feat: more widget settings
This commit is contained in:
Tristan Yang
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "ウィジェット開きままの幅",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "挂件的主题色",
|
||||
|
||||
+3
-1
@@ -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;
|
||||
|
||||
@@ -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
|
||||
></script>
|
||||
|
||||
@@ -57,7 +57,7 @@ export default function Widget() {
|
||||
<SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
|
||||
{`<!-- ${t(
|
||||
"code_comment"
|
||||
)} -->\n<script \n data-host-id="${loginUid}" \n data-auto-reg="true" \n data-login-token="" \n data-theme-color="#1fe1f9" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n data-welcome="Your custom welcome text" \n src="${
|
||||
)} -->\n<script \n data-host-id="${loginUid}" \n data-auto-reg="true" \n data-login-token="" \n data-title="" \n data-logo="" \n data-theme-color="#1fe1f9" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n data-welcome="Your custom welcome text" \n src="${
|
||||
location.origin
|
||||
}/widget.js" \n async \n></script>`}
|
||||
</SyntaxHighlighter>
|
||||
@@ -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",
|
||||
|
||||
@@ -8,22 +8,22 @@ type Props = {
|
||||
};
|
||||
|
||||
const Index: FC<Props> = ({ handleClose }) => {
|
||||
const { color, fgColor, embed, name, logo } = useWidget();
|
||||
const { color, fgColor, embed, title, logo } = useWidget();
|
||||
return (
|
||||
<header
|
||||
className="relative flex justify-between items-center h-14 px-4 py-2"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
<div className="relative w-8 h-8">
|
||||
{logo && <img src={logo} alt="logo" className="w-full h-full rounded-full" />}
|
||||
{logo && <img src={logo} alt="logo" className="size-full" />}
|
||||
</div>
|
||||
<div className="flex-1 px-4 pr-2 text-lg">
|
||||
<span className="text-lg font-bold truncate text-gray-50" style={{ color: fgColor }}>
|
||||
{name}
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
{embed && (
|
||||
<button type="button" className="w-6 h-6">
|
||||
<button type="button" className="size-6">
|
||||
<IconClose
|
||||
onClick={handleClose}
|
||||
className={fgColor == "black" ? `fill-black` : "fill-white"}
|
||||
|
||||
@@ -8,6 +8,8 @@ import { shallowEqual } from "react-redux";
|
||||
const query = new URLSearchParams(location.search);
|
||||
const id = decodeURIComponent(query.get("id") || "");
|
||||
const welcome = decodeURIComponent(query.get("welcome") || "");
|
||||
const title = decodeURIComponent(query.get("title") || "");
|
||||
const logo = decodeURIComponent(query.get("logo") || "");
|
||||
const autoReg = decodeURIComponent(query.get("autoReg") || "true") == "true";
|
||||
const token = decodeURIComponent(query.get("token") || "");
|
||||
const color = decodeURIComponent(query.get("themeColor") || "#1fe1f9");
|
||||
@@ -25,8 +27,8 @@ const WidgetContext = createContext({
|
||||
from,
|
||||
loading: true,
|
||||
inviteOnly: false,
|
||||
name: "",
|
||||
logo: "",
|
||||
title,
|
||||
logo,
|
||||
welcome
|
||||
});
|
||||
|
||||
@@ -50,8 +52,8 @@ function WidgetProvider({ children }: { children: ReactNode }) {
|
||||
embed,
|
||||
from,
|
||||
inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly",
|
||||
name: serverData?.name,
|
||||
logo: serverData.logo
|
||||
title: title ? title : serverData?.name,
|
||||
logo: logo ? logo : serverData.logo
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user