diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 1394e028..406d0d3e 100644 --- a/public/locales/en/setting.json +++ b/public/locales/en/setting.json @@ -256,6 +256,8 @@ "custom_style_tip": "if you want customize the widget position more precisely, use the widget element ID in your HTML or CSS file, like this", "param_id": "Widget ID (server version>=v0.3.12)", "param_host": "Assign the user chatting with visitor(User ID)", + "param_title": "chat popup title", + "param_logo": "chat popup logo icon URL", "param_auto_reg": "true: Auto register a new user if not exist, false: need visitor to input email and name to register", "param_login_token": "If you are using your own platform's existing user info to generate VoceChat new account, this is the login token generated by your platform, for more details, please refer to: https://doc.voce.chat/zh-cn/login-with-other-account. Don't fill this out for default scenarios (no 3-rd party user system)!", "param_theme_color": "The theme color of widget", diff --git a/public/locales/es/setting.json b/public/locales/es/setting.json index 924c10a4..893a3e4a 100644 --- a/public/locales/es/setting.json +++ b/public/locales/es/setting.json @@ -250,6 +250,8 @@ "custom_style_tip": "si deseas personalizar la posición del widget de manera más precisa, usa el ID del elemento del widget en tu archivo HTML o CSS, como este", "param_id": "ID del Widget (versión del servidor >= v0.3.12)", "param_host": "Asigna el usuario que está chateando con el visitante (ID de Usuario)", + "param_title": "chat popup title", + "param_logo": "chat popup logo icon URL", "param_auto_reg": "true: Registro automático de un nuevo usuario si no existe, false: el visitante debe ingresar correo electrónico y nombre para registrarse", "param_login_token": "Si estás utilizando la información de usuario existente de tu propia plataforma para generar una nueva cuenta de VoceChat, este es el token de inicio de sesión generado por tu plataforma. Para más detalles, consulta: https://doc.voce.chat/zh-cn/login-with-other-account. ¡No lo llenes para escenarios predeterminados (sin sistema de usuario de terceros)!", "param_theme_color": "El color del tema del widget", diff --git a/public/locales/jp/setting.json b/public/locales/jp/setting.json index dd4adcd3..fcd96ae7 100644 --- a/public/locales/jp/setting.json +++ b/public/locales/jp/setting.json @@ -123,6 +123,8 @@ "remark": "メモ", "param_id": "Widget ID (server version>=v0.3.12)", "param_host": "ユーザーID でチットの相手を指定する", + "param_title": "chat popup title", + "param_logo": "chat popup logo icon URL", "param_close_width": "ウィジェット閉じたままの幅", "param_close_height": "ウィジェット閉じたままの高さ", "param_open_width": "ウィジェット開きままの幅", diff --git a/public/locales/tr/setting.json b/public/locales/tr/setting.json index 007ba74a..16a2aeb9 100644 --- a/public/locales/tr/setting.json +++ b/public/locales/tr/setting.json @@ -197,6 +197,8 @@ "default_value": "Varsayılan Değer", "remark": "Notlar", "param_host": "Ziyaretçiyle sohbet eden kullanıcıyı atayın (Kullanıcı Kimliği)", + "param_title": "chat popup title", + "param_logo": "chat popup logo icon URL", "param_theme_color": "Widget'ın tema rengi", "param_close_width": "Widget kapalıyken genişlik", "param_close_height": "Widget kapalıyken yükseklik", diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index c63ce5e1..3f4d1f63 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -248,6 +248,8 @@ "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助 widget 元素的 ID，自行写 CSS 样式，加到自己的 html 或者 css 文件中，如下所示：", "param_id": "挂件 ID，可选设置 (服务器版本不低于 v0.3.12)", "param_host": "指定和谁聊天 (用户 ID)", + "param_title": "聊天弹窗顶部标题", + "param_logo": "聊天弹窗顶部图标地址", "param_auto_reg": "true:访客无需输入邮箱，直接注册;false:访客需要输入邮箱和用户名注册", "param_login_token": "仅在用您的自有平台账号生成 voce 账号时需要，普通场景请不要填写，详见:https://doc.voce.chat/zh-cn/login-with-other-account", "param_theme_color": "挂件的主题色", diff --git a/public/widget.js b/public/widget.js index 0a31d824..ab9dee37 100644 --- a/public/widget.js +++ b/public/widget.js @@ -10,6 +10,8 @@ openWidth = 380, openHeight = 680, themeColor = "#1fe1f9", + title = "", + logo = "", position = "right", welcome = "" } = d.currentScript.dataset; @@ -31,7 +33,7 @@ new URL(_src).origin }/widget.html?id=${id}&host=${hostId}&autoReg=${autoReg}&token=${loginToken}&themeColor=${encodeURIComponent( themeColor - )}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`; + )}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}&title=${encodeURIComponent(title)}&logo=${encodeURIComponent(logo)}`; wrapper.width = closeWidth; wrapper.height = closeHeight; wrapper.frameborder = 0; diff --git a/public/widget_demo.html b/public/widget_demo.html index fa3f608a..6e6e74cf 100644 --- a/public/widget_demo.html +++ b/public/widget_demo.html @@ -15,6 +15,8 @@ src="/widget.js" data-login-token="414fe2d2edcd74c9d6433655efbf5eef29f3bb05d8bf98ee21a73edb7c2206547b22757365726964223a2268656c6f6f222c22757365726e616d65223a22776f726c64222c22657870697265645f6174223a22323032332d31312d32315431323a33373a33352e3734313636343134325a227d" data-host-id="1" + data-title="test title" + data-logo="https://nuxt.com/assets/integrations/supabase.svg" data-theme-color="#eee" async > diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx index d58db40b..6befae0d 100644 --- a/src/routes/setting/Widget.tsx +++ b/src/routes/setting/Widget.tsx @@ -57,7 +57,7 @@ export default function Widget() { {`\n`} @@ -108,6 +108,16 @@ export default function Widget() { paramDefault: `-`, remarks: t("param_login_token") }, + { + paramKey: "title", + paramDefault: `[VoceChat Name]`, + remarks: t("param_title") + }, + { + paramKey: "logo", + paramDefault: `[VoceChat Logo]`, + remarks: t("param_logo") + }, { paramKey: "theme-color", paramDefault: "#1fe1f9", diff --git a/src/widget/Popup/Header.tsx b/src/widget/Popup/Header.tsx index 831bd116..f8cb09ed 100644 --- a/src/widget/Popup/Header.tsx +++ b/src/widget/Popup/Header.tsx @@ -8,22 +8,22 @@ type Props = { }; const Index: FC = ({ handleClose }) => { - const { color, fgColor, embed, name, logo } = useWidget(); + const { color, fgColor, embed, title, logo } = useWidget(); return (
- {logo && logo} + {logo && logo}
- {name} + {title}
{embed && ( -