refactor: widget

public/locales/en/setting.json

@@ -246,6 +246,7 @@
     "param_key": "Parameter Key",
     "default_value": "Default Value",
     "remark": "Remarks",
+    "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_host": "Assign the user chatting with visitor(User ID)",
     "param_theme_color": "The theme color of widget",
     "param_close_width": "The width while widget closed",
@@ -253,6 +254,7 @@
     "param_open_width": "The width while widget opened",
     "param_open_height": "The height while widget opened",
     "param_welcome": "Custom welcome message",
+    "param_position": "Widget position: left/right",
     "share_link": "Share the widget link so that people can chat with you directly",
     "widget_faq": "Enable Let Everyone Join First"
   },

public/locales/zh/setting.json

@@ -239,6 +239,7 @@
     "param_key": "参数",
     "default_value": "默认值",
     "remark": "备注",
+    "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助widget元素的ID，自行写CSS样式，加到自己的html或者css文件中，如下所示：",
     "param_host": "指定和谁聊天(用户ID)",
     "param_theme_color": "挂件的主题色",
     "param_close_width": "挂件关闭态的宽度",
@@ -246,6 +247,7 @@
     "param_open_width": "挂件打开态的宽度",
     "param_open_height": "挂件打开态的高度",
     "param_welcome": "自定义欢迎语",
+    "param_position": "设置挂件位置，居左(left)或居右(right)",
     "share_link": "分享此链接，别人可以通过该地址直接与你对话",
     "widget_faq": "允许公开注册"
   },

public/widget.js

@@ -1,3 +1,5 @@
+// IIFC
+((w, d) => {
   const {
     hostId = 1,
     closeWidth = 48,
@@ -7,9 +9,9 @@ const {
     themeColor = "#1fe1f9",
     position = "right",
     welcome = ""
-} = document.currentScript.dataset;
-const _src = document.currentScript.src;
-const wrapper = document.createElement("iframe");
+  } = d.currentScript.dataset;
+  const _src = d.currentScript.src;
+  const wrapper = d.createElement("iframe");
   wrapper.id = "VOCECHAT_WIDGET";
   const styles = {
     position: "fixed",
@@ -28,7 +30,7 @@ wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${e
   wrapper.width = closeWidth;
   wrapper.height = closeHeight;
   wrapper.frameborder = 0;
-window.addEventListener(
+  w.addEventListener(
     "message",
     (event) => {
       const { data: CMD } = event;
@@ -57,4 +59,5 @@ window.addEventListener(
     },
     false
   );
-document.body.appendChild(wrapper);
+  d.body.appendChild(wrapper);
+})(window, document);

src/assets/index.css

@@ -138,7 +138,9 @@
     gap: 2px;
     padding: 4px;
     background-color: #fff;
-    box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04);
+    box-shadow:
+      0 20px 25px 20px rgba(31, 41, 55, 0.1),
+      0 10px 10px rgba(31, 41, 55, 0.04);
     border-radius: 12px;
     min-width: 200px;
   }

src/routes/setting/Widget.tsx

@@ -57,6 +57,15 @@ export default function Widget() {
           location.origin
         }/widget.js" \n  async \n></script>`}
       </SyntaxHighlighter>
+      <div className="text-sm dark:text-white">{t("custom_style_tip")}:</div>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
+        {`<style>
+  #VOCECHAT_WIDGET {
+    left:10px  /* left position */
+    bottom: 5px /* bottom position */
+  }
+</style>`}
+      </SyntaxHighlighter>
       <div className="font-semibold dark:text-white mt-5 mb-2">{t("config")}:</div>
       <div className="w-full md:w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-auto md:overflow-hidden">
         <table className="min-w-full table-auto">
@@ -105,6 +114,11 @@ export default function Widget() {
                 paramDefault: `680(px)`,
                 remarks: t("param_open_height")
               },
+              {
+                paramKey: "position",
+                paramDefault: `right`,
+                remarks: t("param_position")
+              },
               {
                 paramKey: "welcome",
                 paramDefault: wt("welcome"),