adde bot to support

multiverseweb · Nov 26, 2024 · aff5346 · aff5346
1 parent faf84d9
commit aff5346
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/website/pages/support.html b/website/pages/support.html
@@ -87,12 +87,17 @@
         </header>
 
         <main>
+            <button id="infinityBtn" onclick="showChat()">
             <div class="category" id="infinity">
                 <p class="heading">Need Help?</p>
                 <p id="infinityText">Try asking Infinity</p>
-                <img src="../web_images/Infinity-2.png" alt="" class="infinityImage">
-            </div>
-            <div class="category" id="faq">
+                <img src="../web_images/Infinity-2.png" alt="" class="infinityImage" id="infinityImg">
+                </div>
+            </button>
+            <iframe src="https://www.chatbase.co/chatbot-iframe/oKgfHa3hvh7Ic0ypSqDbv" width="100%"
+                style="height: 100%; min-height: 500px; display:none; margin-top: 20px; border-radius: 20px;" id="infinityChat" frameborder="0"></iframe>
+                <div class="category" id="faq">
+
                 <p class="heading">Frequently Asked Questions</p>
                 <details>
                     <summary>What is Dataverse?</summary>
@@ -142,15 +147,19 @@
                     <li>Develop More Such Software</li>
                 </ul>
                 <div class="fund_links">
-                        <p class="heading">How You Can Support</p>
-                        <div>- Donate: Every contribution, big or small, helps keep Dataverse growing.
-                        <a href="https://buymeacoffee.com/tejasgupta" class="funds"><button class="design_btn"><img src="../web_images/coffee.png" alt="">Donate</button></a><br>
+                    <p class="heading">How You Can Support</p>
+                    <div>- Donate: Every contribution, big or small, helps keep Dataverse growing.
+                        <a href="https://buymeacoffee.com/tejasgupta" class="funds"><button class="design_btn"><img
+                                    src="../web_images/coffee.png" alt="">Donate</button></a><br>
                     </div>
                     <div>- Sponsor Us: Become a long-term partner and help fund critical project milestones.
-                        <a href="https://github.com/sponsors/multiverseweb" class="funds"><button class="design_btn"><img src="../web_images/sponsor.png" alt="">Sponsor</button></a><br>
+                        <a href="https://github.com/sponsors/multiverseweb" class="funds"><button
+                                class="design_btn"><img src="../web_images/sponsor.png" alt="">Sponsor</button></a><br>
                     </div>
                     <div>- Contribute Code: If you're a developer, join us on GitHub to improve the platform.
-                        <a href="https://github.com/multiverseweb/Dataverse" class="funds"><button class="design_btn"><img src="../web_images/github.png" alt="">Contribute</button></a><br>
+                        <a href="https://github.com/multiverseweb/Dataverse" class="funds"><button
+                                class="design_btn"><img src="../web_images/github.png"
+                                    alt="">Contribute</button></a><br>
                     </div>
                 </div>
             </div>

diff --git a/website/scripts/support.js b/website/scripts/support.js
@@ -42,4 +42,16 @@ document.addEventListener("keyup", (event) => {
 })
 
 // Attach functions required by the DOM to the window
-attachToWindow(windowFunctions);
+attachToWindow(windowFunctions);
+
+function showChat(){
+  document.getElementById("infinityChat").style.display="flex";
+  document.getElementById("infinityBtn").onclick=hideChat;
+}
+
+function hideChat(){
+  document.getElementById("infinityChat").style.display="none";
+  document.getElementById("infinityBtn").onclick=showChat;
+}
+windowFunctions.push(showChat);
+windowFunctions.push(hideChat);
diff --git a/website/styles/support.css b/website/styles/support.css
@@ -47,6 +47,7 @@ details[open] {
     padding-bottom: 10px; /* Adds padding to make expanded state look better */
 }
 #infinity {
+    margin-top: 0;
     position: relative;
     overflow: hidden;
     background-color: var(--background-color); /* Fallback */
@@ -74,7 +75,13 @@ details[open] {
     position: relative; /* Make sure content is above the gradient */
     z-index: 1; /* Ensure it appears above the ::before pseudo-element */
 }
-
+#infinityBtn{
+    background-color: #0f0f0f00;
+    border: none;
+    padding: 0;
+    width: 100%;
+    text-align: left;
+}
 
 .infinityImage {
     position: absolute; /* Position the image relative to the parent (#infinity) */