Update index.html

index.html

@@ -10,28 +10,22 @@
 
     <!-- Form Container -->
     <div id="form-container">
-        
         <form id="user-form">
             <h2>We need basic information to guide you</h2>
             <input type="text" id="name" placeholder="Your Name" required>
             <input type="text" id="company" placeholder="Company Name" required>
             <input type="email" id="email" placeholder="Your Email" required>
-            
             <div>
                 <!-- Country Code Dropdown -->
                 <select id="country-code" required>
                     <option value="">Select a country</option>
                     <option value="AF">Afghanistan (+93)</option>
                     <option value="AL">Albania (+355)</option>
-                    
                 </select>
                 <input type="tel" id="phone" placeholder="Your Phone Number" required>
             </div>
-        
             <button type="submit">Start Chat</button>
         </form>
-        
-        
     </div>
 
     <!-- Chatbox -->
@@ -59,346 +53,142 @@
 
     <script>
         // Elements
-        // Elements
-// Elements
-const chatIcon = document.getElementById('chat-icon');
-const formContainer = document.getElementById('form-container');
-const chatBox = document.getElementById('chat-box');
-const gradioIframe = document.getElementById('gradio-iframe');
-const gradioFrame = document.getElementById('gradio-frame');
-const closeChat = document.getElementById('close-chat');
-const backButton = document.getElementById('back-button');
-const userForm = document.getElementById('user-form');
-const chatBody = document.getElementById('chat-body');
-
-// Function to handle user input and display chat responses
-function handleUserInput(input) {
-    // Display user message
-    const userMessage = document.createElement('div');
-    userMessage.className = 'message user-message';
-    userMessage.textContent = input;
-    chatBody.appendChild(userMessage);
-
-    // Create bot response
-    const botMessage = document.createElement('div');
-    botMessage.className = 'message bot-message';
-
-    // Define bot responses based on user input
-    switch (input) {
-        case 'Know more about RedFerns Tech':
-            botMessage.innerHTML = `
-                RedFerns Tech is a leading technology solutions provider specializing in Salesforce consultancy, Zoho services, ServiceNow implementation, and Data Science solutions.
-                <button onclick="handleUserInput('Menu')">Menu</button>
-            `;
-            break;
-        case 'Our services':
-            botMessage.innerHTML = `
-                We offer a range of services tailored to your needs. Please choose one:
-                <button onclick="handleUserInput('Salesforce')">Salesforce</button>
-                <button onclick="handleUserInput('Zoho')">Zoho</button>
-                <button onclick="handleUserInput('Machine Learning')">Machine Learning</button>
-                <button onclick="handleUserInput('Data Science')">Data Science</button>
-                <button onclick="handleUserInput('Menu')">Menu</button>
-            `;
-            break;
-        case 'Salesforce':
-            botMessage.innerHTML = `
-                We offer a range of services tailored to your needs. Please choose one:
-                <button onclick="handleUserInput('Lightning Service')">Lightning Service</button>
-                <button onclick="handleUserInput('Admin Support')">Admin Support</button>
-                <button onclick="handleUserInput('App Development')">App Development</button>
-                <button onclick="handleUserInput('Sites and Communities')">Sites and Communities</button>
-                <button onclick="handleUserInput('Menu')">Menu</button>
-            `;
-            break;
-        case 'Our products':
-            botMessage.innerHTML = `
-                We offer a range of services tailored to your needs. Please choose one:
-                <button onclick="handleUserInput('currency conversion app')">Currency Conversion App</button>
-                <button onclick="handleUserInput('mass approvals app')">Mass Approvals App</button>
-                <button onclick="handleUserInput('thumbnail viewer app')">Thumbnail Viewer App</button>
-                <button onclick="handleUserInput('product filter app')">Product Filter App</button>
-                <button onclick="handleUserInput('Menu')">Menu</button>
-            `;
-            break;
-        case 'Menu':
-            botMessage.innerHTML = `
-        <p>Hi! Welcome to RedFerns Tech! I'm FernAI, here to help you explore our innovative solutions and services. Please select from below:</p>
-        <button onclick="handleUserInput('Know more about RedFerns Tech')">Know more about RedFerns Tech</button>
-        <button onclick="handleUserInput('Our services')">Our services</button>
-        <button onclick="handleUserInput('Our products')">Our products</button>
-        <button onclick="handleUserInput('career opportunities')">Career Opportunities</button>
-        <button onclick="handleUserInput('chat with expert')">Chat With Expert</button>
-        <button onclick="handleUserInput('Appointment Booking')">Appointment Booking</button>
-            `;
-            break;
-
-     case 'Appointment Booking':
-           botMessage.innerHTML = `
-        Please provide the following details to book an appointment:
-        <br><br>
-        <label for="phoneNumber">Phone Number:</label>
-        <input type="text" id="phoneNumber" placeholder="Enter your phone number" />
-        <br>
-        <label for="appointmentDate">Preferred Date:</label>
-        <input type="date" id="appointmentDate" />
-        <br>
-        <label for="appointmentTime">Preferred Time:</label>
-        <input type="time" id="appointmentTime" />
-        <br><br>
-        <button onclick="submitAppointment()">Submit Appointment</button>
-    `;
-    break;
-
-        case 'Zoho':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/zoho-crm/', '_blank');
-            break;
-        case 'Machine Learning':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/machine-learning/', '_blank');
-            break;
-        case 'Data Science':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/data-science/', '_blank');
-            break;
-        case 'Lightning Service':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/salesforce-lightning-services/', '_blank');
-            break;
-        case 'App Development':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/salesforce-app-development/', '_blank');
-            break;
-        case 'Sites and Communities':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/salesforce-sites-communities/', '_blank');
-            break;
-        case 'Admin Support':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/services-list/salesforce-admin-and-support/', '_blank');
-            break;
-        case 'career opportunities':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://redfernstech.com/careers/', '_blank');
-            break;
-        case 'product filter app':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K23xNUAR', '_blank');
-            break;
-        case 'thumbnail viewer app':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K8u1dUAB', '_blank');
-            break;
-        case 'mass approvals app':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K24EdUAJ', '_blank');
-            break;
-        case 'currency conversion app':
-            botMessage.textContent = 'Link is Opening';
-            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000Is77CUAR', '_blank');
-            break;                
-        case 'chat with expert':
-            // Show the iframe with the Gradio chatbot URL
-            gradioIframe.style.display = 'flex';
-            chatBox.style.display = 'none';
-            formContainer.style.display = 'none';
-            chatIcon.style.display = 'none'; // Hide chat icon
-            gradioFrame.src = 'https://srinuksv-fastapi.hf.space/'; // Replace with your Gradio chatbot URL
-            botMessage.textContent = 'Loading Salesforce chatbot...'; // Optional: Notify the user
-            break;
-        default:
-            botMessage.textContent = 'Sorry, I didn’t understand that. Can you please choose another option?';
-            break;
-    }
-    chatBody.appendChild(botMessage);
-    chatBody.scrollTop = chatBody.scrollHeight;
-}
-
-// Show form container
-function showForm() {
-    formContainer.style.display = 'flex';
-    chatBox.style.display = 'none';
-    gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
-    chatIcon.style.display = 'flex'; // Hide chat icon
-}
-
-// Show chat box
-function showChat() {
-    formContainer.style.display = 'none';
-    chatBox.style.display = 'flex';
-    gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
-    chatIcon.style.display = 'flex';
-    initializeChat();
-}
-
-// Show Gradio iframe
-function openGradioChat() {
-    const chatbots = ["Lily", "Clara"];
-    const selectedChatbot = chatbots[Math.floor(Math.random() * chatbots.length)];
-    
-    // Hide form and chat box, display Gradio iframe
-    formContainer.style.display = 'none';
-    chatBox.style.display = 'none';
-    gradioIframe.style.display = 'flex';
-    
-    // Set the iframe source based on the selected chatbot
-    if (selectedChatbot === "Clara") {
-        gradioIframe.src = "https://srinuksv-fastapi.hf.space/";
-    } else {
-        gradioIframe.src = "https://srinuksv-fastapi.hf.space/";
-    }
-    
-    // Display the chat icon
-    chatIcon.style.display = 'flex';
-}
-
-
-// Hide Gradio iframe and show chat box
-function goBackToChat() {
-    formContainer.style.display = 'none';
-    chatBox.style.display = 'flex';
-    gradioIframe.style.display = 'none';
-    chatIcon.style.display = 'flex';
-    initializeChat();
-}
-
-function submitAppointment() {
-    const phoneNumber = document.getElementById('phoneNumber').value;
-    const appointmentDate = document.getElementById('appointmentDate').value;
-    const appointmentTime = document.getElementById('appointmentTime').value;
-
-    // Split the date into year, month, and day
-    const dateParts = appointmentDate.split('-');  // Assuming the format is YYYY-MM-DD
-    const year = dateParts[0];
-    const month = dateParts[1];  // Google Forms uses 1-indexed months (January is 1, not 0)
-    const day = dateParts[2];
-
-    // Split the time into hour and minute
-    const timeParts = appointmentTime.split(':');  // Assuming the format is HH:MM
-    const hour = timeParts[0];
-    const minute = timeParts[1];
-
-    if (phoneNumber && appointmentDate && appointmentTime) {
-        // Google Form submission URL and entry IDs
-        const googleFormURL = 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSdLLMPObehQAPIJe26ALLP-uGiR_rTbFomaQ6jrYSDKDpC53Q/formResponse';
-        const formData = new FormData();
-        formData.append('entry.399768569', phoneNumber);  // Phone number
-        formData.append('entry.524576831_hour', hour);  // Appointment hour
-        formData.append('entry.524576831_minute', minute);  // Appointment minute
-        formData.append('entry.277009627_year', year);  // Appointment year
-        formData.append('entry.277009627_month', month);  // Appointment month
-        formData.append('entry.277009627_day', day);  // Appointment day
-
-        // Send data to Google Form
-        fetch(googleFormURL, {
-            method: 'POST',
-            body: formData,
-            mode: 'no-cors'  // To avoid CORS issues
-        }).then(() => {
-            const botMessage = document.createElement('div');
-            botMessage.className = 'message bot-message';
-            botMessage.innerHTML = `
-                Appointment booked for ${appointmentDate} at ${appointmentTime}. We will contact you at ${phoneNumber}.
-                <br><br>What would you like to do next?
-                <button onclick="handleUserInput('Menu')">Return to Menu</button>
-            `;
-            chatBody.appendChild(botMessage);
-        }).catch(() => {
+        const chatIcon = document.getElementById('chat-icon');
+        const formContainer = document.getElementById('form-container');
+        const chatBox = document.getElementById('chat-box');
+        const gradioIframe = document.getElementById('gradio-iframe');
+        const gradioFrame = document.getElementById('gradio-frame');
+        const closeChat = document.getElementById('close-chat');
+        const backButton = document.getElementById('back-button');
+        const userForm = document.getElementById('user-form');
+        const chatBody = document.getElementById('chat-body');
+
+        // Function to handle user input and display chat responses
+        function handleUserInput(input) {
+            // Display user message
+            const userMessage = document.createElement('div');
+            userMessage.className = 'message user-message';
+            userMessage.textContent = input;
+            chatBody.appendChild(userMessage);
+
+            // Create bot response
             const botMessage = document.createElement('div');
             botMessage.className = 'message bot-message';
-            botMessage.innerHTML = `
-                There was an error booking your appointment. Please try again.
-                <br><br>What would you like to do next?
-                <button onclick="handleUserInput('Menu')">Return to Menu</button>
-            `;
+            
+            switch (input) {
+                case 'Menu':
+                    botMessage.innerHTML = `
+                        <p>Hi! Welcome to RedFerns Tech! I'm FernAI, here to help you explore our innovative solutions and services. Please select from below:</p>
+                        <button onclick="handleUserInput('Know more about RedFerns Tech')">Know more about RedFerns Tech</button>
+                        <button onclick="handleUserInput('Our services')">Our services</button>
+                        <button onclick="handleUserInput('Our products')">Our products</button>
+                        <button onclick="handleUserInput('career opportunities')">Career Opportunities</button>
+                        <button onclick="handleUserInput('chat with expert')">Chat With Expert</button>
+                        <button onclick="handleUserInput('Appointment Booking')">Appointment Booking</button>
+                    `;
+                    break;
+                case 'chat with expert':
+                    // Show the iframe with the Gradio chatbot URL
+                    gradioIframe.style.display = 'flex';
+                    chatBox.style.display = 'none';
+                    formContainer.style.display = 'none';
+                    chatIcon.style.display = 'none'; // Hide chat icon
+                    gradioFrame.src = 'https://srinuksv-fastapiyes.hf.space/ch/' + localStorage.getItem('userId');
+                    botMessage.textContent = 'Loading Salesforce chatbot...';
+                    break;
+                default:
+                    botMessage.textContent = 'Sorry, I didn’t understand that.';
+                    break;
+            }
+
             chatBody.appendChild(botMessage);
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+
+        function submitAppointment() {
+            const phoneNumber = document.getElementById('phoneNumber').value;
+            const appointmentDate = document.getElementById('appointmentDate').value;
+            const appointmentTime = document.getElementById('appointmentTime').value;
+
+            if (phoneNumber && appointmentDate && appointmentTime) {
+                const formData = {
+                    phoneNumber: phoneNumber,
+                    appointmentDate: appointmentDate,
+                    appointmentTime: appointmentTime
+                };
+
+                fetch('https://srinuksv-fastapiyes.hf.space/webhook', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    localStorage.setItem('userId', data.id); // Store the ID for future use
+                    const botMessage = document.createElement('div');
+                    botMessage.className = 'message bot-message';
+                    botMessage.innerHTML = `
+                        Appointment booked! We will contact you shortly.
+                        <br><br>What would you like to do next?
+                        <button onclick="handleUserInput('Menu')">Return to Menu</button>
+                    `;
+                    chatBody.appendChild(botMessage);
+                })
+                .catch(() => {
+                    const botMessage = document.createElement('div');
+                    botMessage.className = 'message bot-message';
+                    botMessage.innerHTML = `
+                        There was an error booking your appointment. Please try again.
+                        <br><br>What would you like to do next?
+                        <button onclick="handleUserInput('Menu')">Return to Menu</button>
+                    `;
+                    chatBody.appendChild(botMessage);
+                });
+            } else {
+                const botMessage = document.createElement('div');
+                botMessage.className = 'message bot-message';
+                botMessage.innerHTML = `
+                    Please fill in all the details.
+                    <br><br>What would you like to do next?
+                    <button onclick="handleUserInput('Menu')">Return to Menu</button>
+                `;
+                chatBody.appendChild(botMessage);
+            }
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+
+        // Event Listeners
+        chatIcon.addEventListener('click', function() {
+            if (localStorage.getItem('formShown') === 'true') {
+                showChat(); // Show the chat box if form has been shown
+            } else {
+                showForm(); // Show the form if it hasn't been shown
+            }
         });
-    } else {
-        const botMessage = document.createElement('div');
-        botMessage.className = 'message bot-message';
-        botMessage.innerHTML = `
-            Please fill in all the details.
-            <br><br>What would you like to do next?
-            <button onclick="handleUserInput('Menu')">Return to Menu</button>
-        `;
-        chatBody.appendChild(botMessage);
-    }
-
-    chatBody.scrollTop = chatBody.scrollHeight;
-}
-
-
-
-// Initialize chat
-// Initialize chat
-function initializeChat() {
-    chatBody.innerHTML = '';
-    const welcomeMessage = document.createElement('div');
-    welcomeMessage.className = 'message bot-message';
-    welcomeMessage.innerHTML = `
-        <p>Hi! Welcome to RedFerns Tech! I'm FernAI, here to help you explore our innovative solutions and services. Please select from below:</p>
-        <button onclick="handleUserInput('Know more about RedFerns Tech')">Know more about RedFerns Tech</button>
-        <button onclick="handleUserInput('Our services')">Our services</button>
-        <button onclick="handleUserInput('Our products')">Our products</button>
-        <button onclick="handleUserInput('career opportunities')">Career Opportunities</button>
-        <button onclick="handleUserInput('chat with expert')">Chat With Expert</button>
-        <button onclick="handleUserInput('Appointment Booking')">Appointment Booking</button>
-    `;
-    chatBody.appendChild(welcomeMessage);
-    chatBody.scrollTop = chatBody.scrollHeight;
-}
-
-
-// Event Listeners
-
-chatIcon.addEventListener('click', function() {
-    if (localStorage.getItem('formShown') === 'true') {
-        showChat(); // Show the chat box if form has been shown
-    } else {
-        showForm(); // Show the form if it hasn't been shown
-    }
-});
-
-
-
-
-
-
-
-userForm.addEventListener('submit', function(event) {
-    event.preventDefault();
-    localStorage.setItem('formShown', 'true');
-    showChat();
-});
-
-closeChat.addEventListener('click', function() {
-        formContainer.style.display = 'none';
-        chatBox.style.display = 'none';
-        gradioIframe.style.display = 'none';
-        chatIcon.style.display = 'flex';
-    });
-
-
-
-
-backButton.addEventListener('click', goBackToChat);
-
-// Initialize on load
-if (localStorage.getItem('formShown') === 'true') {
-    showChat();
-} else {
-    chatIcon.style.display = 'flex'; // Ensure the chat icon is visible initially
-}
-// Select the div with class 'component-2 block svelte-12'
-// Select the div with class 'component-2 block svelte-12'
-// Select the element with the specific class
-// Select the element with the specific class
-// Select the element with the specific class
 
+        userForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            localStorage.setItem('formShown', 'true');
+            showChat();
+        });
 
+        closeChat.addEventListener('click', function() {
+            formContainer.style.display = 'none';
+            chatBox.style.display = 'none';
+            gradioIframe.style.display = 'none';
+            chatIcon.style.display = 'flex';
+        });
 
+        backButton.addEventListener('click', goBackToChat);
 
+        // Initialize on load
+        if (localStorage.getItem('formShown') === 'true') {
+            showChat();
+        } else {
+            chatIcon.style.display = 'flex'; // Ensure the chat icon is visible initially
+        }
     </script>
 
 </body>