Update index.html

index.html

@@ -15,6 +15,7 @@
             <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>
@@ -24,6 +25,7 @@
                 </select>
                 <input type="tel" id="phone" placeholder="Your Phone Number" required>
             </div>
+        
             <button type="submit">Start Chat</button>
         </form>
     </div>
@@ -70,12 +72,46 @@
             userMessage.className = 'message user-message';
             userMessage.textContent = input;
             chatBody.appendChild(userMessage);
-
             // Create bot response
             const botMessage = document.createElement('div');
             botMessage.className = 'message bot-message';
-            
             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>
@@ -87,109 +123,143 @@
                         <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...';
+                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;
-                default:
-                    botMessage.textContent = 'Sorry, I didn’t understand that.';
+                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=a0N4V00000K23oVUAR', '_blank');
+                    break;
+                default:
+                    botMessage.textContent = 'Sorry, I didn\'t understand that.';
             }
-
             chatBody.appendChild(botMessage);
-            chatBody.scrollTop = chatBody.scrollHeight;
+            chatBody.scrollTop = chatBody.scrollHeight; // Scroll to the bottom
         }
 
-        function submitAppointment() {
-            const phoneNumber = document.getElementById('phoneNumber').value;
-            const appointmentDate = document.getElementById('appointmentDate').value;
-            const appointmentTime = document.getElementById('appointmentTime').value;
+        // Handle the form submission
+        userForm.addEventListener('submit', async (event) => {
+            event.preventDefault(); // Prevent default form submission
+            
+            // Gather form data
+            const name = document.getElementById('name').value;
+            const company = document.getElementById('company').value;
+            const email = document.getElementById('email').value;
+            const countryCode = document.getElementById('country-code').value;
+            const phone = document.getElementById('phone').value;
 
-            if (phoneNumber && appointmentDate && appointmentTime) {
-                const formData = {
-                    phoneNumber: phoneNumber,
-                    appointmentDate: appointmentDate,
-                    appointmentTime: appointmentTime
-                };
+            // Prepare data to send to the server
+            const formData = {
+                name,
+                company,
+                email,
+                countryCode,
+                phone
+            };
 
-                fetch('https://srinuksv-fastapiyes.hf.space/webhook', {
+            try {
+                // Send data to the new server URL
+                const response = await fetch('http://your-new-server-url.com/submit-form', {
                     method: 'POST',
                     headers: {
-                        'Content-Type': 'application/json'
+                        '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
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const result = await response.json();
+                // Assuming the response contains a unique ID
+                const uniqueID = result.uniqueID; // Update according to your server response structure
+
+                // Open Gradio URL with unique ID
+                gradioFrame.src = `https://srinuksv-srunu.hf.space/?uniqueID=${uniqueID}`;
+
+                // Hide form container and show Gradio iframe
+                formContainer.style.display = 'none';
+                gradioIframe.style.display = 'block';
+
+            } catch (error) {
+                console.error('There was a problem with the fetch operation:', error);
+                // Handle error gracefully
             }
         });
 
-        userForm.addEventListener('submit', function(event) {
-            event.preventDefault();
-            localStorage.setItem('formShown', 'true');
-            showChat();
+        // Event listeners for chat icon and buttons
+        chatIcon.addEventListener('click', () => {
+            formContainer.style.display = 'block';
+            chatBox.style.display = 'none';
         });
 
-        closeChat.addEventListener('click', function() {
-            formContainer.style.display = 'none';
+        closeChat.addEventListener('click', () => {
             chatBox.style.display = 'none';
-            gradioIframe.style.display = 'none';
-            chatIcon.style.display = 'flex';
+            formContainer.style.display = 'block';
         });
 
-        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
-        }
+        backButton.addEventListener('click', () => {
+            gradioIframe.style.display = 'none';
+            formContainer.style.display = 'block';
+        });
     </script>
-
 </body>
 </html>