feat: add buttonPosition option to chat configuration (#9)

* feat: add buttonPosition option to chat configuration * Update example.html * Update casibase.js * Update README.md --------- Co-authored-by: Yang Luo <[email protected]>
casibase · Aug 9, 2024 · 4c182f3 · 4c182f3
1 parent e08de17
commit 4c182f3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ Put the following tracking code (HTML tag) into your main HTML file like index.h
 - `buttonText` (optional): The text displayed on the chat button (default: "Chat with AI")
 - `popupTitle` (optional): The title of the chat popup, used as the iframe title attribute (default: "Chat with AI")
 - `popupTime` (optional): The time in seconds after which the chat window automatically opens. Set to -1 to disable auto-opening (default: -1)
+- `buttonPosition` (optional): The position of the chat button. Possible values are "TopLeft", "MiddleLeft", "BottomLeft", "TopRight", "MiddleRight", "BottomRight" (default: "BottomRight")
 
 An example to use the parameters is:
 
@@ -66,7 +67,8 @@ An example to use the parameters is:
         popupHeight: "600px",
         buttonText: "Chat with AI",
         popupTitle: "Casibase AI Assistant",
-        popupTime: 5
+        popupTime: -1,
+        buttonPosition: "BottomRight"
       });
     };
     var f = d.getElementsByTagName(s)[0];

diff --git a/casibase.js b/casibase.js
@@ -6,7 +6,8 @@
     popupHeight: "min(600px, calc(100vh - 100px))",
     buttonText: "Chat with AI",
     popupTitle: "Casibase AI Assistant",
-    popupTime: -1
+    popupTime: -1,
+    buttonPosition: "BottomRight"
   };
 
   let userConfig = { ...defaultConfig };
@@ -41,11 +42,21 @@
   function applyStyles() {
     const animationStyles = userConfig.enableAnimations ? `transition: all 0.3s ease;` : `transition: none;`;
 
+    const buttonPositionStyles = {
+      TopLeft: "top: 20px; left: 20px;",
+      MiddleLeft: "top: 50%; left: 20px; transform: translateY(-50%);",
+      BottomLeft: "bottom: 20px; left: 20px;",
+      TopRight: "top: 20px; right: 20px;",
+      MiddleRight: "top: 50%; right: 20px; transform: translateY(-50%);",
+      BottomRight: "bottom: 20px; right: 20px;"
+    };
+
+    const buttonPosition = buttonPositionStyles[userConfig.buttonPosition] || buttonPositionStyles.BottomRight;
+
     const styles = `
       .chat-button {
         position: fixed;
-        bottom: 20px;
-        right: 20px;
+        ${buttonPosition}
         background-color: ${userConfig.themeColor} !important;
         color: white;
         border: none;
@@ -162,6 +173,18 @@
     const container = document.createElement("div");
     container.className = "chat-container";
 
+    const containerPositions = {
+      TopLeft: "top: 80px; left: 20px;",
+      MiddleLeft: "top: 50%; left: 80px; transform: translateY(-50%);",
+      BottomLeft: "bottom: 80px; left: 20px;",
+      TopRight: "top: 80px; right: 20px;",
+      MiddleRight: "top: 50%; right: 80px; transform: translateY(-50%);",
+      BottomRight: "bottom: 80px; right: 20px;"
+    };
+
+    const containerPosition = containerPositions[userConfig.buttonPosition] || containerPositions.BottomRight;
+    container.style.cssText = containerPosition;
+
     if (userConfig.endpoint) {
       const iframe = document.createElement("iframe");
       iframe.src = userConfig.endpoint + "/?isRaw=1";;