Spaces:

Fazbeeer
/

mindmaster-vr-arena-clone

Running

App Files Files Community

Fazbeeer commited on Dec 17, 2025

Commit

eb2ef68

verified ·

1 Parent(s): d744155

Build a website FAQ chat feature where users can select from predefined FAQ questions instead of typing freely.

Browse files

Requirements:

A chat-style FAQ widget

Users can click on preset FAQ buttons/questions

When a question is clicked, the chatbot instantly displays the corresponding answer

Messages should appear in chat bubbles

The chatbot should sound friendly, professional, and concise

Use HTML, CSS, and JavaScript.

Store the FAQs as question-and-answer pairs in JavaScript and display them dynamically when selected. Display FAQ questions as clickable buttons inside the chat window so users can select questions instead of typing. FAQ 1

Question: What is the $150 Live Coach add-on?
Answer: By purchasing the $150 Live Coach add-on, you will receive a link that allows you to sign up for one hour of real, live coaching with a trained professional.

FAQ 2

Question: What is your average reply time?
Answer: We try to respond to all messages within 1–2 business days.

FAQ 3

Question: Do you offer promo codes?
Answer: Yes! We commonly post promo codes on our TikTok and Instagram pages, so be sure to follow us there.

3. Additional FAQs based on Amplify’s mission (recommended)
FAQ 4

Question: What is Amplify?
Answer: Amplify is a mental fitness platform that helps users build confidence, focus, and resilience through immersive VR and AR experiences and personalized coaching.

FAQ 5

Question: Who is Amplify for?
Answer: Amplify is for anyone who wants to improve performance under pressure, including students, professionals, and individuals preparing for presentations, interviews, or new roles.

FAQ 6

Question: Do I need VR equipment to use Amplify?
Answer: Some experiences are enhanced with VR or AR, but Amplify also offers features that can be used without specialized equipment.

FAQ 7

Question: What is the AI Coach?
Answer: The AI Coach provides instant feedback, encouragement, and guidance to help users improve their mental performance in real time.

FAQ 8

Question: How is live coaching different from the AI Coach?
Answer: Live coaching offers one-on-one sessions with trained professionals for personalized support, while the AI Coach provides immediate, on-demand guidance anytime.

FAQ 9

Question: Can Amplify help with public speaking or interviews?
Answer: Yes, Amplify places users in realistic, high-pressure scenarios such as presentations and interviews to help build confidence and performance skills.

FAQ 10

Question: Is Amplify suitable for beginners?
Answer: Absolutely. Amplify is designed for all experience levels, whether you’re just starting or looking to refine your mental performance skills.

Files changed (9) hide show

about.html +5 -6
components/faq-chat.js +268 -0
currency.html +5 -6
events.html +5 -6
help.html +5 -6
index.html +6 -8
newsletter.html +5 -6
pricing.html +5 -6
results.html +5 -6

about.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -51,8 +49,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="../components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

components/faq-chat.js ADDED Viewed

	@@ -0,0 +1,268 @@

+class FAQChat extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    // FAQ data
+    this.faqs = [
+      {
+        question: "What is the $150 Live Coach add-on?",
+        answer: "By purchasing the $150 Live Coach add-on, you will receive a link that allows you to sign up for one hour of real, live coaching with a trained professional."
+      },
+      {
+        question: "What is your average reply time?",
+        answer: "We try to respond to all messages within 1–2 business days."
+      },
+      {
+        question: "Do you offer promo codes?",
+        answer: "Yes! We commonly post promo codes on our TikTok and Instagram pages, so be sure to follow us there."
+      },
+      {
+        question: "What is Amplify?",
+        answer: "Amplify is a mental fitness platform that helps users build confidence, focus, and resilience through immersive VR and AR experiences and personalized coaching."
+      },
+      {
+        question: "Who is Amplify for?",
+        answer: "Amplify is for anyone who wants to improve performance under pressure, including students, professionals, and individuals preparing for presentations, interviews, or new roles."
+      },
+      {
+        question: "Do I need VR equipment to use Amplify?",
+        answer: "Some experiences are enhanced with VR or AR, but Amplify also offers features that can be used without specialized equipment."
+      },
+      {
+        question: "What is the AI Coach?",
+        answer: "The AI Coach provides instant feedback, encouragement, and guidance to help users improve their mental performance in real time."
+      },
+      {
+        question: "How is live coaching different from the AI Coach?",
+        answer: "Live coaching offers one-on-one sessions with trained professionals for personalized support, while the AI Coach provides immediate, on-demand guidance anytime."
+      },
+      {
+        question: "Can Amplify help with public speaking or interviews?",
+        answer: "Yes, Amplify places users in realistic, high-pressure scenarios such as presentations and interviews to help build confidence and performance skills."
+      },
+      {
+        question: "Is Amplify suitable for beginners?",
+        answer: "Absolutely. Amplify is designed for all experience levels, whether you're just starting or looking to refine your mental performance skills."
+      }
+    ];
+    this.messages = [
+      {
+        sender: 'bot',
+        content: 'Hi there! How can I help you today?',
+        buttons: this.faqs.map(faq => faq.question)
+      }
+    ];
+    this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          width: 350px;
+          height: 500px;
+          background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
+          border-radius: 15px;
+          border: 1px solid #e3b341;
+          box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+          overflow: hidden;
+          z-index: 1000;
+          font-family: 'Montserrat', sans-serif;
+        }
+        .chat-container {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
+        .chat-header {
+          background: rgba(0,0,0,0.7);
+          color: #e3b341;
+          padding: 15px;
+          font-size: 18px;
+          font-weight: bold;
+          border-bottom: 1px solid #e3b341;
+          display: flex;
+          align-items: center;
+        }
+        .chat-header i {
+          margin-right: 10px;
+        }
+        .messages {
+          flex: 1;
+          padding: 15px;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+        .message {
+          max-width: 80%;
+          padding: 10px 15px;
+          border-radius: 18px;
+          line-height: 1.4;
+        }
+        .bot-message {
+          align-self: flex-start;
+          background: rgba(227, 179, 65, 0.2);
+          border-bottom-left-radius: 5px;
+          color: white;
+        }
+        .user-message {
+          align-self: flex-end;
+          background: rgba(227, 179, 65, 0.8);
+          border-bottom-right-radius: 5px;
+          color: black;
+        }
+        .question-buttons {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          margin-top: 10px;
+        }
+        .question-btn {
+          background: rgba(227, 179, 65, 0.1);
+          color: #e3b341;
+          border: 1px solid #e3b341;
+          border-radius: 15px;
+          padding: 8px 15px;
+          text-align: left;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-size: 14px;
+        }
+        .question-btn:hover {
+          background: rgba(227, 179, 65, 0.3);
+          transform: translateX(2px);
+        }
+        .close-btn {
+          margin-left: auto;
+          background: none;
+          border: none;
+          color: #e3b341;
+          cursor: pointer;
+          font-size: 20px;
+        }
+        .typing-indicator {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          margin-top: 5px;
+          opacity: 0.7;
+        }
+        .typing-dot {
+          width: 6px;
+          height: 6px;
+          background-color: #e3b341;
+          border-radius: 50%;
+          animation: typingAnimation 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typingAnimation {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-5px); }
+        }
+      </style>
+      <div class="chat-container">
+        <div class="chat-header">
+          <i data-feather="message-square"></i>
+          Amplify FAQ Helper
+          <button class="close-btn" id="close-chat">×</button>
+        </div>
+        <div class="messages" id="messages-container"></div>
+      </div>
+    `;
+    this.renderMessages();
+    this.setupEventListeners();
+    feather.replace();
+  }
+  renderMessages() {
+    const container = this.shadowRoot.getElementById('messages-container');
+    container.innerHTML = '';
+    this.messages.forEach(msg => {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = `message ${msg.sender}-message`;
+      messageDiv.innerHTML = msg.content;
+      if (msg.buttons) {
+        const buttonsDiv = document.createElement('div');
+        buttonsDiv.className = 'question-buttons';
+        msg.buttons.forEach(question => {
+          const button = document.createElement('button');
+          button.className = 'question-btn';
+          button.textContent = question;
+          button.addEventListener('click', () => this.handleQuestionClick(question));
+          buttonsDiv.appendChild(button);
+        });
+        messageDiv.appendChild(buttonsDiv);
+      }
+      container.appendChild(messageDiv);
+    });
+    container.scrollTop = container.scrollHeight;
+  }
+  handleQuestionClick(question) {
+    // Add user message
+    this.messages.push({ sender: 'user', content: question });
+    this.renderMessages();
+    // Find the answer
+    const faq = this.faqs.find(item => item.question === question);
+    if (faq) {
+      // Add typing indicator
+      const typing = document.createElement('div');
+      typing.className = 'typing-indicator';
+      typing.innerHTML = `
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+      `;
+      this.shadowRoot.getElementById('messages-container').appendChild(typing);
+      this.shadowRoot.getElementById('messages-container').scrollTop =
+        this.shadowRoot.getElementById('messages-container').scrollHeight;
+      // Simulate typing delay
+      setTimeout(() => {
+        this.messages.push({ sender: 'bot', content: faq.answer });
+        this.renderMessages();
+      }, 1000);
+    }
+  }
+  setupEventListeners() {
+    this.shadowRoot.getElementById('close-chat').addEventListener('click', () => {
+      this.style.display = 'none';
+    });
+  }
+}
+customElements.define('faq-chat', FAQChat);

currency.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -59,8 +57,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

events.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -58,8 +56,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

help.html CHANGED Viewed

@@ -4,10 +4,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -53,8 +51,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="../components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

index.html CHANGED Viewed

@@ -451,10 +451,8 @@ Get Started Now
 </div>
     </div>
     <!-- Footer Component -->
-  <script src="components/footer.js"></script>
-  <script src="components/santa-animation.js"></script>
-  <santa-animation></santa-animation>
-<script>
         var player;
         function onYouTubeIframeAPIReady() {
@@ -478,10 +476,10 @@ Get Started Now
             feather.replace();
         });
     </script>
-    <script src="https://www.youtube.com/iframe_api"></script>
-    <!-- SNOW EFFECT -->
 <style>
   .snowflake {
     position: fixed;

 </div>
     </div>
     <!-- Footer Component -->
+<script src="components/footer.js"></script>
+    <script>
         var player;
         function onYouTubeIframeAPIReady() {
             feather.replace();
         });
     </script>
+  <script src="https://www.youtube.com/iframe_api"></script>
+  <script src="components/faq-chat.js"></script>
+  <faq-chat></faq-chat>
+<!-- SNOW EFFECT -->
 <style>
   .snowflake {
     position: fixed;

newsletter.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -51,8 +49,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="../components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

pricing.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -52,8 +50,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

results.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-    <script src="components/santa-animation.js"></script>
-    <santa-animation></santa-animation>
-    <script>
-window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
@@ -58,8 +56,9 @@ window.dataLayer = window.dataLayer || [];
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">

 <head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-RTR4DLTDNS');
         }
     </script>
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="components/faq-chat.js"></script>
+    <faq-chat></faq-chat>
+<!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">