Merge pull request #352 from T-Rahul-prabhu-38/main

Feat: chatbot has been added #340
RamakrushnaBiswal · Oct 20, 2024 · a0a1cbc · a0a1cbc
2 parents 76a5b4d + 3f35c52
commit a0a1cbc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/frontend/index.html b/frontend/index.html
@@ -22,7 +22,24 @@
     />
   </head>
   <body>
+
     <div id="root"></div>
+
+    <script>
+      window.embeddedChatbotConfig = {
+      chatbotId: "rL36bLvnKl-LBrT-vmYpR",
+      domain: "www.chatbase.co"
+      }
+      </script>
+
+      <script
+      src="https://www.chatbase.co/embed.min.js"
+      chatbotId="rL36bLvnKl-LBrT-vmYpR"
+      domain="www.chatbase.co"
+      defer>
+
+      </script>
+
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/frontend/src/chatbot.jsx b/frontend/src/chatbot.jsx
@@ -0,0 +1,30 @@
+import{ useEffect } from 'react';
+
+const Chatbot = () => {
+  useEffect(() => {
+    // Set the chatbot config
+    window.embeddedChatbotConfig = {
+      chatbotId: "rL36bLvnKl-LBrT-vmYpR",
+      domain: "www.chatbase.co",
+    };
+
+    // Create the script element to load the chatbot
+    const script = document.createElement('script');
+    script.src = "https://www.chatbase.co/embed.min.js";
+    script.setAttribute("chatbotId", "rL36bLvnKl-LBrT-vmYpR");
+    script.setAttribute("domain", "www.chatbase.co");
+    script.defer = true;
+
+    // Append the script to the document body
+    document.body.appendChild(script);
+
+    // Cleanup the script when the component unmounts
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return <div id="chatbot" />;
+};
+
+export default Chatbot;
diff --git a/frontend/src/components/Shared/BackToTopButton.jsx b/frontend/src/components/Shared/BackToTopButton.jsx
@@ -44,7 +44,7 @@ const BackToTopButton = () => {
       {shouldRender && (
         <button
           onClick={scrollToTop}
-          className={`z-50 fixed bottom-12 right-8 bg-green-700 hover:bg-green-600 text-white font-bold px-5 py-3 rounded-md shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 ${
+          className={`z-50 fixed bottom-20 right-5 bg-green-700 hover:bg-green-600 text-white font-bold px-5 py-3 rounded-md shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 ${
             isVisible ? 'animate-fadeInBounce' : 'animate-fadeOutBounce'
           }`}
           style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}