Spaces:

redfernstech
/

ipip

Running

App Files Files Community

Srinivasulu kethanaboina commited on Sep 21, 2024

Commit

0655866

verified ·

1 Parent(s): 990556b

Update index.html

Browse files

Files changed (1) hide show

index.html +1238 -172

index.html CHANGED Viewed

@@ -3,263 +3,1329 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RedFerns Tech Chatbot</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <!-- 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 -->
-    <div id="chat-box">
-        <div id="chat-header">
             <span>FernAI</span>
-            <span id="close-chat">&times;</span>
         </div>
-        <div id="chat-body"></div>
-    </div>
-    <!-- Gradio Iframe -->
-    <div id="gradio-iframe">
-        <div id="gradio-header">
-            <span>Chat With Expert</span>
-            <span id="back-button">&larr;</span>
         </div>
-        <iframe src="" id="gradio-frame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
-    </div>
-    <!-- Chat Icon -->
-    <div id="chat-icon">
-        <img src="https://raw.githubusercontent.com/SRINIVASULU-2003/srinu/main/static/bot.png" alt="Chat Icon">
     </div>
     <script>
-        // 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';
             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=a0N4V00000K23oVUAR', '_blank');
                     break;
                 default:
-                    botMessage.textContent = 'Sorry, I didn\'t understand that.';
             }
             chatBody.appendChild(botMessage);
-            chatBody.scrollTop = chatBody.scrollHeight; // Scroll to the bottom
         }
-        // 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;
-            // Prepare data to send to the server
-            const formData = {
-                name,
-                company,
-                email,
-                countryCode,
-                phone
-            };
-            try {
-                // Send data to the new server URL
-                const response = await fetch('https://srinuksv-fastapiyes.hf.space/webhook', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData)
-                });
-                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.id; // Update according to your server response structure
-                // Open Gradio URL with unique ID
-                gradioFrame.src = `https://srinuksv-fastapiyes.hf.space/ch/${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
-            }
-        });
-        // Event listeners for chat icon and buttons
-        chatIcon.addEventListener('click', () => {
-            formContainer.style.display = 'block';
-            chatBox.style.display = 'none';
-        });
-        closeChat.addEventListener('click', () => {
-            chatBox.style.display = 'none';
-            formContainer.style.display = 'block';
         });
-        backButton.addEventListener('click', () => {
             gradioIframe.style.display = 'none';
-            formContainer.style.display = 'block';
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot with Morph and Fade Animations</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #ffffff00;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        .hover-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: auto;
+            height: 60px;
+            border-radius: 30px;
+            background-color: #de2127;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease, opacity 0.3s ease;
+            z-index: 999;
+            padding: 0 20px;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+        .hover-button:hover {
+            transform: scale(1.05);
+        }
+        .hover-button img {
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+            filter: invert(0.0) sepia(0.2) saturate(4) hue-rotate(300deg) brightness(0.8);
+        }
+        .hover-button span {
+            color: white;
+            font-size: 1em;
+            font-weight: bold;
+        }
+        .chatbot-popup {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #f0f4ff 0%, #ffd1d1 100%);
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            width: 450px;
+            max-height: 90vh;
+            height: 719px;
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            opacity: 0;
+            transform: scale(0.7);
+            transition: transform 0.3s ease, opacity 0.3s ease;
+            visibility: hidden; /* Hidden by default */
+        }
+        .chatbot-popup.visible {
+            opacity: 1;
+            transform: scale(1);
+            visibility: visible;
+        }
+        .chat-header {
+            background-color: #CF2E2E;
+            color: #fff;
+            padding: 10px;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-header span {
+            font-weight: bold;
+        }
+        #close-btn {
+            background-color: transparent;
+            border: none;
+            color: #fff;
+            font-size: 24px;
+            cursor: pointer;
+            line-height: 1;
+        }
+        .chat-content {
+            flex: 1;
+            display: none; /* Initially hidden */
+            flex-direction: column;
+            overflow-y: auto;
+            padding: 20px;
+            max-height: calc(80vh - 60px);
+        }
+        .user-message, .bot-message {
+            padding: 10px 15px;
+            margin: 10px 0;
+            border-radius: 10px;
+            max-width: 80%;
+            word-wrap: break-word;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .user-message {
+            background-color: #E5E5EA;
+            align-self: flex-end;
+            display: flex;
+            align-items: center;
+        }
+        .bot-message {
+            background-color: #F1F0F0;
+            align-self: flex-start;
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+            max-width: 100%;
+            padding: 10px 15px;
+            margin: 10px 0;
+            border-radius: 10px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0 ,0.1);
+        }
+        .message-content {
+            margin-left: 10px;
+        }
+        .user-message::before, .bot-message::before {
+            content: '';
+            width: 30px;
+            height: 30px;
+            background-size: cover;
+            border-radius: 50%;
+        }
+        .user-message::before {
+            background-image: url('https://github.com/SRINIVASULU-2003/srinu/blob/main/static/user.jpeg?raw=true');
+        }
+        .bot-message::before {
+            background-image: url('https://github.com/SRINIVASULU-2003/srinu/blob/main/static/bot.jpeg?raw=true');
+        }
+        .button-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            margin-top: 10px;
+            width: 100%;
+        }
+        .button-container button {
+            background-color: #ef6a61;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.3s ease;
+            text-align: center;
+            min-height: 44px;
+        }
+        .button-container button.large-button {
+            grid-column: span 2;
+        }
+        .button-container button:hover {
+            background-color: #f63838;
+        }
+        .gradio-container {
+            display: none;
+            margin-top: 10px;
+            height: calc(100% - 60px); /* Adjusted to fit within the chatbot */
+            position: relative; /* Added for positioning the back button */
+        }
+        .form-container {
+            padding: 20px 30px 30px 30px;
+            height: auto;
+            opacity: 1;
+            transition: opacity 0.3s ease;
+            overflow-y: auto;
+            max-height: calc(100vh - 150px);
+            flex: 1;
+            display: none; /* Initially hidden */
+        }
+        .form-container.visible {
+            display: block; /* Show when active */
+        }
+        .form-container h2 {
+            text-align: left;
+            margin-bottom: 5px;
+            font-size: 1.4em;
+            color: #333;
+        }
+        .form-container p {
+            text-align: left;
+            margin-bottom: 10px;
+            color: #666;
+            font-size: 0.9em;
+        }
+        .form {
+            width: 100%;
+        }
+        .form-control {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+        .form-control label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 0.9em;
+            color: #333;
+        }
+        .form-control input, .form-control select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-sizing: border-box;
+            font-size: 1em;
+            background-color: #f9f9f9;
+        }
+        .form-control input:focus, .form-control select:focus {
+            outline: none;
+            border-color: #4a90e2;
+            background-color: #fff;
+        }
+        .required {
+            color: red;
+        }
+        .begin-button {
+            width: 100%;
+            padding: 10px;
+            background: #de2127;
+            border: none;
+            color: white;
+            font-size: 1em;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .begin-button:hover {
+            background-color: #a81a1d;
+        }
+        .close-button {
+            background-color: transparent;
+            border: none;
+            color: #fff;
+            font-size: 24px;
+            cursor: pointer;
+            line-height: 1;
+        }
+        .g-recaptcha {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 10px;
+            transform: scale(0.8);
+        }
+        .g-recaptcha > div {
+            width: auto !important;
+        }
+        #back-to-chatbot-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: #de2127;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            z-index: 1000;
+        }
+        #back-to-chatbot-btn:hover {
+            background-color: #a81a1d;
+        }
+    </style>
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 </head>
 <body>
+    <!-- Hover Button -->
+    <div class="hover-button" id="chatbot-button">
+        <img src="https://www.svgrepo.com/show/209115/chat.svg" alt="Chat Icon">
+        <span>How can I help you?</span>
     </div>
+    <!-- Chatbot Popup -->
+    <div class="chatbot-popup" id="chatbot-popup">
+        <!-- Chat Header -->
+        <div class="chat-header">
             <span>FernAI</span>
+            <button id="close-btn" class="close-button">×</button>
         </div>
+        <!-- Form Container -->
+        <div id="form-container" class="form-container">
+            <h2>To guide you better, we need some basic information</h2>
+            <form id="form" class="form">
+                <div class="form-control">
+                    <label for="username">Name <span class="required">*</span></label>
+                    <input type="text" placeholder="First and Last Name" id="username" required />
+                </div>
+                <div class="form-control">
+                    <label for="companyname">Company Name <span class="required">*</span></label>
+                    <input type="text" placeholder="Company name" id="companyname" required />
+                </div>
+                <div class="form-control">
+                    <label for="email">Email <span class="required">*</span></label>
+                    <input type="email" placeholder="[email protected]" id="email" required />
+                </div>
+                <div class="form-control">
+                    <label for="country">Country <span class="required">*</span></label>
+                    <select id="country" required>
+                        <option value="">Select a country</option>
+                        <option value="AF">Afghanistan (+93)</option>
+                        <option value="AL">Albania (+355)</option>
+                        <option value="DZ">Algeria (+213)</option>
+                        <option value="AS">American Samoa (+1-684)</option>
+                        <option value="AD">Andorra (+376)</option>
+                        <option value="AO">Angola (+244)</option>
+                        <option value="AI">Anguilla (+1-264)</option>
+                        <option value="AG">Antigua and Barbuda (+1-268)</option>
+                        <option value="AR">Argentina (+54)</option>
+                        <option value="AM">Armenia (+374)</option>
+                        <option value="AW">Aruba (+297)</option>
+                        <option value="AU">Australia (+61)</option>
+                        <option value="AT">Austria (+43)</option>
+                        <option value="AZ">Azerbaijan (+994)</option>
+                        <option value="BS">Bahamas (+1-242)</option>
+                        <option value="BH">Bahrain (+973)</option>
+                        <option value="BD">Bangladesh (+880)</option>
+                        <option value="BB">Barbados (+1-246)</option>
+                        <option value="BY">Belarus (+375)</option>
+                        <option value="BE">Belgium (+32)</option>
+                        <option value="BZ">Belize (+501)</option>
+                        <option value="BJ">Benin (+229)</option>
+                        <option value="BM">Bermuda (+1-441)</option>
+                        <option value="BT">Bhutan (+975)</option>
+                        <option value="BO">Bolivia (+591)</option>
+                        <option value="BA">Bosnia and Herzegovina (+387)</option>
+                        <option value="BW">Botswana (+267)</option>
+                        <option value="BR">Brazil (+55)</option>
+                        <option value="IO">British Indian Ocean Territory (+246)</option>
+                        <option value="VG">British Virgin Islands (+1-284)</option>
+                        <option value="BN">Brunei (+673)</option>
+                        <option value="BG">Bulgaria (+359)</option>
+                        <option value="BF">Burkina Faso (+226)</option>
+                        <option value="BI">Burundi (+257)</option>
+                        <option value="KH">Cambodia (+855)</option>
+                        <option value="CM">Cameroon (+237)</option>
+                        <option value="CA">Canada (+1)</option>
+                        <option value="CV">Cape Verde (+238)</option>
+                        <option value="KY">Cayman Islands (+1-345)</option>
+                        <option value="CF">Central African Republic (+236)</option>
+                        <option value="TD">Chad (+235)</option>
+                        <option value="CL">Chile (+56)</option>
+                        <option value="CN">China (+86)</option>
+                        <option value="CX">Christmas Island (+61)</option>
+                        <option value="CC">Cocos Islands (+61)</option>
+                        <option value="CO">Colombia (+57)</option>
+                        <option value="KM">Comoros (+269)</option>
+                        <option value="CK">Cook Islands (+682)</option>
+                        <option value="CR">Costa Rica (+506)</option>
+                        <option value="HR">Croatia (+385)</option>
+                        <option value="CU">Cuba (+53)</option>
+                        <option value="CW">Curacao (+599)</option>
+                        <option value="CY">Cyprus (+357)</option>
+                        <option value="CZ">Czech Republic (+420)</option>
+                        <option value="CD">Democratic Republic of the Congo (+243)</option>
+                        <option value="DK">Denmark (+45)</option>
+                        <option value="DJ">Djibouti (+253)</option>
+                        <option value="DM">Dominica (+1-767)</option>
+                        <option value="DO">Dominican Republic (+1-809)</option>
+                        <option value="TL">East Timor (+670)</option>
+                        <option value="EC">Ecuador (+593)</option>
+                        <option value="EG">Egypt (+20)</option>
+                        <option value="SV">El Salvador (+503)</option>
+                        <option value="GQ">Equatorial Guinea (+240)</option>
+                        <option value="ER">Eritrea (+291)</option>
+                        <option value="EE">Estonia (+372)</option>
+                        <option value="ET">Ethiopia (+251)</option>
+                        <option value="FK">Falkland Islands (+500)</option>
+                        <option value="FO">Faroe Islands (+298)</option>
+                        <option value="FJ">Fiji (+679)</option>
+                        <option value="FI">Finland (+358)</option>
+                        <option value="FR">France (+33)</option>
+                        <option value="PF">French Polynesia (+689)</option>
+                        <option value="GA">Gabon (+241)</option>
+                        <option value="GM">Gambia (+220)</option>
+                        <option value="GE">Georgia (+995)</option>
+                        <option value="DE">Germany (+49)</option>
+                        <option value="GH">Ghana (+233)</option>
+                        <option value="GI">Gibraltar (+350)</option>
+                        <option value="GR">Greece (+30)</option>
+                        <option value="GL">Greenland (+299)</option>
+                        <option value="GD">Grenada (+1-473)</option>
+                        <option value="GU">Guam (+1-671)</option>
+                        <option value="GT">Guatemala (+502)</option>
+                        <option value="GN">Guinea (+224)</option>
+                        <option value="GW">Guinea-Bissau (+245)</option>
+                        <option value="GY">Guyana (+592)</option>
+                        <option value="HT">Haiti (+509)</option>
+                        <option value="HN">Honduras (+504)</option>
+                        <option value="HK">Hong Kong (+852)</option>
+                        <option value="HU">Hungary (+36)</option>
+                        <option value="IS">Iceland (+354)</option>
+                        <option value="IN">India (+91)</option>
+                        <option value="ID">Indonesia (+62)</option>
+                        <option value="IR">Iran (+98)</option>
+                        <option value="IQ">Iraq (+964)</option>
+                        <option value="IE">Ireland (+353)</option>
+                        <option value="IM">Isle of Man (+44-1624)</option>
+                        <option value="IL">Israel (+972)</option>
+                        <option value="IT">Italy (+39)</option>
+                        <option value="CI">Ivory Coast (+225)</option>
+                        <option value="JM">Jamaica (+1-876)</option>
+                        <option value="JP">Japan (+81)</option>
+                        <option value="JE">Jersey (+44-1534)</option>
+                        <option value="JO">Jordan (+962)</option>
+                        <option value="KZ">Kazakhstan (+7)</option>
+                        <option value="KE">Kenya (+254)</option>
+                        <option value="KI">Kiribati (+686)</option>
+                        <option value="XK">Kosovo (+383)</option>
+                        <option value="KW">Kuwait (+965)</option>
+                        <option value="KG">Kyrgyzstan (+996)</option>
+                        <option value="LA">Laos (+856)</option>
+                        <option value="LV">Latvia (+371)</option>
+                        <option value="LB">Lebanon (+961)</option>
+                        <option value="LS">Lesotho (+266)</option>
+                        <option value="LR">Liberia (+231)</option>
+                        <option value="LY">Libya (+218)</option>
+                        <option value="LI">Liechtenstein (+423)</option>
+                        <option value="LT">Lithuania (+370)</option>
+                        <option value="LU">Luxembourg (+352)</option>
+                        <option value="MO">Macau (+853)</option>
+                        <option value="MK">Macedonia (+389)</option>
+                        <option value="MG">Madagascar (+261)</option>
+                        <option value="MW">Malawi (+265)</option>
+                        <option value="MY">Malaysia (+60)</option>
+                        <option value="MV">Maldives (+960)</option>
+                        <option value="ML">Mali (+223)</option>
+                        <option value="MT">Malta (+356)</option>
+                        <option value="MH">Marshall Islands (+692)</option>
+                        <option value="MR">Mauritania (+222)</option>
+                        <option value="MU">Mauritius (+230)</option>
+                        <option value="YT">Mayotte (+262)</option>
+                        <option value="MX">Mexico (+52)</option>
+                        <option value="FM">Micronesia (+691)</option>
+                        <option value="MD">Moldova (+373)</option>
+                        <option value="MC">Monaco (+377)</option>
+                        <option value="MN">Mongolia (+976)</option>
+                        <option value="ME">Montenegro (+382)</option>
+                        <option value="MS">Montserrat (+1-664)</option>
+                        <option value="MA">Morocco (+212)</option>
+                        <option value="MZ">Mozambique (+258)</option>
+                        <option value="MM">Myanmar (+95)</option>
+                        <option value="NA">Namibia (+264)</option>
+                        <option value="NR">Nauru (+674)</option>
+                        <option value="NP">Nepal (+977)</option>
+                        <option value="NL">Netherlands (+31)</option>
+                        <option value="NC">New Caledonia (+687)</option>
+                        <option value="NZ">New Zealand (+64)</option>
+                        <option value="NI">Nicaragua (+505)</option>
+                        <option value="NE">Niger (+227)</option>
+                        <option value="NG">Nigeria (+234)</option>
+                        <option value="NU">Niue (+683)</option>
+                        <option value="KP">North Korea (+850)</option>
+                        <option value="MP">Northern Mariana Islands (+1-670)</option>
+                        <option value="NO">Norway (+47)</option>
+                        <option value="OM">Oman (+968)</option>
+                        <option value="PK">Pakistan (+92)</option>
+                        <option value="PW">Palau (+680)</option>
+                        <option value="PS">Palestine (+970)</option>
+                        <option value="PA">Panama (+507)</option>
+                        <option value="PG">Papua New Guinea (+675)</option>
+                        <option value="PY">Paraguay (+595)</option>
+                        <option value="PE">Peru (+51)</option>
+                        <option value="PH">Philippines (+63)</option>
+                        <option value="PN">Pitcairn (+64)</option>
+                        <option value="PL">Poland (+48)</option>
+                        <option value="PT">Portugal (+351)</option>
+                        <option value="PR">Puerto Rico (+1-787)</option>
+                        <option value="QA">Qatar (+974)</option>
+                        <option value="CG">Republic of the Congo (+242)</option>
+                        <option value="RE">Reunion (+262)</option>
+                        <option value="RO">Romania (+40)</option>
+                        <option value="RU">Russia (+7)</option>
+                        <option value="RW">Rwanda (+250)</option>
+                        <option value="BL">Saint Barthelemy (+590)</option>
+                        <option value="SH">Saint Helena (+290)</option>
+                        <option value="KN">Saint Kitts and Nevis (+1-869)</option>
+                        <option value="LC">Saint Lucia (+1-758)</option>
+                        <option value="MF">Saint Martin (+590)</option>
+                        <option value="PM">Saint Pierre and Miquelon (+508)</option>
+                        <option value="VC">Saint Vincent and the Grenadines (+1-784)</option>
+                        <option value="WS">Samoa (+685)</option>
+                        <option value="SM">San Marino (+378)</option>
+                        <option value="ST">Sao Tome and Principe (+239)</option>
+                        <option value="SA">Saudi Arabia (+966)</option>
+                        <option value="SN">Senegal (+221)</option>
+                        <option value="RS">Serbia (+381)</option>
+                        <option value="SC">Seychelles (+248)</option>
+                        <option value="SL">Sierra Leone (+232)</option>
+                        <option value="SG">Singapore (+65)</option>
+                        <option value="SX">Sint Maarten (+1-721)</option>
+                        <option value="SK">Slovakia (+421)</option>
+                        <option value="SI">Slovenia (+386)</option>
+                        <option value="SB">Solomon Islands (+677)</option>
+                        <option value="SO">Somalia (+252)</option>
+                        <option value="ZA">South Africa (+27)</option>
+                        <option value="KR">South Korea (+82)</option>
+                        <option value="SS">South Sudan (+211)</option>
+                        <option value="ES">Spain (+34)</option>
+                        <option value="LK">Sri Lanka (+94)</option>
+                        <option value="SD">Sudan (+249)</option>
+                        <option value="SR">Suriname (+597)</option>
+                        <option value="SJ">Svalbard and Jan Mayen (+47)</option>
+                        <option value="SZ">Swaziland (+268)</option>
+                        <option value="SE">Sweden (+46)</option>
+                        <option value="CH">Switzerland (+41)</option>
+                        <option value="SY">Syria (+963)</option>
+                        <option value="TW">Taiwan (+886)</option>
+                        <option value="TJ">Tajikistan (+992)</option>
+                        <option value="TZ">Tanzania (+255)</option>
+                        <option value="TH">Thailand (+66)</option>
+                        <option value="TG">Togo (+228)</option>
+                        <option value="TK">Tokelau (+690)</option>
+                        <option value="TO">Tonga (+676)</option>
+                        <option value="TT">Trinidad and Tobago (+1-868)</option>
+                        <option value="TN">Tunisia (+216)</option>
+                        <option value="TR">Turkey (+90)</option>
+                        <option value="TM">Turkmenistan (+993)</option>
+                        <option value="TC">Turks and Caicos Islands (+1-649)</option>
+                        <option value="TV">Tuvalu (+688)</option>
+                        <option value="VI">U.S. Virgin Islands (+1-340)</option>
+                        <option value="UG">Uganda (+256)</option>
+                        <option value="UA">Ukraine (+380)</option>
+                        <option value="AE">United Arab Emirates (+971)</option>
+                        <option value="GB">United Kingdom (+44)</option>
+                        <option value="US">United States (+1)</option>
+                        <option value="UY">Uruguay (+598)</option>
+                        <option value="UZ">Uzbekistan (+998)</option>
+                        <option value="VU">Vanuatu (+678)</option>
+                        <option value="VA">Vatican (+39-06)</option>
+                        <option value="VE">Venezuela (+58)</option>
+                        <option value="VN">Vietnam (+84)</option>
+                        <option value="WF">Wallis and Futuna (+681)</option>
+                        <option value="EH">Western Sahara (+212)</option>
+                        <option value="YE">Yemen (+967)</option>
+                        <option value="ZM">Zambia (+260)</option>
+                        <option value="ZW">Zimbabwe (+263)</option>
+                    </select>
+                </div>
+                <div class="form-control">
+                    <label for="phone">Phone</label>
+                    <input type="tel" placeholder="Phone" id="phone" />
+                </div>
+                <div class="g-recaptcha" data-sitekey="6LfAXQIqAAAAANA8I1vdofDPvxatWH8H3Als1XfM"></div>
+                <button type="submit" class="begin-button">Let's Begin</button>
+            </form>
+        </div>
+        <!-- Chat Content -->
+        <div id="chat-box" class="chat-content">
+            <div id="chat-body" class="chat-body"></div>
         </div>
+        <!-- Gradio Container -->
+        <div class="gradio-container" id="gradio-iframe">
+            <iframe id="gradio-frame" src="" style="width:100%; height:100%; border:none;"></iframe>
+            <button id="back-to-chatbot-btn">Back to Chatbot</button>
+        </div>
     </div>
     <script>
+const countrySelect = document.getElementById('country');
+const phoneInput = document.getElementById('phone');
+const countryCodes = {
+    'AF': '+93',
+    'AL': '+355',
+    'DZ': '+213',
+    'AS': '+1-684',
+    'AD': '+376',
+    'AO': '+244',
+    'AI': '+1-264',
+    'AG': '+1-268',
+    'AR': '+54',
+    'AM': '+374',
+    'AW': '+297',
+    'AU': '+61',
+    'AT': '+43',
+    'AZ': '+994',
+    'BS': '+1-242',
+    'BH': '+973',
+    'BD': '+880',
+    'BB': '+1-246',
+    'BY': '+375',
+    'BE': '+32',
+    'BZ': '+501',
+    'BJ': '+229',
+    'BM': '+1-441',
+    'BT': '+975',
+    'BO': '+591',
+    'BA': '+387',
+    'BW': '+267',
+    'BR': '+55',
+    'IO': '+246',
+    'VG': '+1-284',
+    'BN': '+673',
+    'BG': '+359',
+    'BF': '+226',
+    'BI': '+257',
+    'KH': '+855',
+    'CM': '+237',
+    'CA': '+1',
+    'CV': '+238',
+    'KY': '+1-345',
+    'CF': '+236',
+    'TD': '+235',
+    'CL': '+56',
+    'CN': '+86',
+    'CX': '+61',
+    'CC': '+61',
+    'CO': '+57',
+    'KM': '+269',
+    'CK': '+682',
+    'CR': '+506',
+    'HR': '+385',
+    'CU': '+53',
+    'CW': '+599',
+    'CY': '+357',
+    'CZ': '+420',
+    'CD': '+243',
+    'DK': '+45',
+    'DJ': '+253',
+    'DM': '+1-767',
+    'DO': '+1-809',
+    'TL': '+670',
+    'EC': '+593',
+    'EG': '+20',
+    'SV': '+503',
+    'GQ': '+240',
+    'ER': '+291',
+    'EE': '+372',
+    'ET': '+251',
+    'FK': '+500',
+    'FO': '+298',
+    'FJ': '+679',
+    'FI': '+358',
+    'FR': '+33',
+    'PF': '+689',
+    'GA': '+241',
+    'GM': '+220',
+    'GE': '+995',
+    'DE': '+49',
+    'GH': '+233',
+    'GI': '+350',
+    'GR': '+30',
+    'GL': '+299',
+    'GD': '+1-473',
+    'GU': '+1-671',
+    'GT': '+502',
+    'GN': '+224',
+    'GW': '+245',
+    'GY': '+592',
+    'HT': '+509',
+    'HN': '+504',
+    'HK': '+852',
+    'HU': '+36',
+    'IS': '+354',
+    'IN': '+91',
+    'ID': '+62',
+    'IR': '+98',
+    'IQ': '+964',
+    'IE': '+353',
+    'IM': '+44-1624',
+    'IL': '+972',
+    'IT': '+39',
+    'CI': '+225',
+    'JM': '+1-876',
+    'JP': '+81',
+    'JE': '+44-1534',
+    'JO': '+962',
+    'KZ': '+7',
+    'KE': '+254',
+    'KI': '+686',
+    'XK': '+383',
+    'KW': '+965',
+    'KG': '+996',
+    'LA': '+856',
+    'LV': '+371',
+    'LB': '+961',
+    'LS': '+266',
+    'LR': '+231',
+    'LY': '+218',
+    'LI': '+423',
+    'LT': '+370',
+    'LU': '+352',
+    'MO': '+853',
+    'MK': '+389',
+    'MG': '+261',
+    'MW': '+265',
+    'MY': '+60',
+    'MV': '+960',
+    'ML': '+223',
+    'MT': '+356',
+    'MH': '+692',
+    'MR': '+222',
+    'MU': '+230',
+    'YT': '+262',
+    'MX': '+52',
+    'FM': '+691',
+    'MD': '+373',
+    'MC': '+377',
+    'MN': '+976',
+    'ME': '+382',
+    'MS': '+1-664',
+    'MA': '+212',
+    'MZ': '+258',
+    'MM': '+95',
+    'NA': '+264',
+    'NR': '+674',
+    'NP': '+977',
+    'NL': '+31',
+    'NC': '+687',
+    'NZ': '+64',
+    'NI': '+505',
+    'NE': '+227',
+    'NG': '+234',
+    'NU': '+683',
+    'KP': '+850',
+    'MP': '+1-670',
+    'NO': '+47',
+    'OM': '+968',
+    'PK': '+92',
+    'PW': '+680',
+    'PS': '+970',
+    'PA': '+507',
+    'PG': '+675',
+    'PY': '+595',
+    'PE': '+51',
+    'PH': '+63',
+    'PN': '+64',
+    'PL': '+48',
+    'PT': '+351',
+    'PR': '+1-787',
+    'QA': '+974',
+    'CG': '+242',
+    'RE': '+262',
+    'RO': '+40',
+    'RU': '+7',
+    'RW': '+250',
+    'BL': '+590',
+    'SH': '+290',
+    'KN': '+1-869',
+    'LC': '+1-758',
+    'MF': '+590',
+    'PM': '+508',
+    'VC': '+1-784',
+    'WS': '+685',
+    'SM': '+378',
+    'ST': '+239',
+    'SA': '+966',
+    'SN': '+221',
+    'RS': '+381',
+    'SC': '+248',
+    'SL': '+232',
+    'SG': '+65',
+    'SX': '+1-721',
+    'SK': '+421',
+    'SI': '+386',
+    'SB': '+677',
+    'SO': '+252',
+    'ZA': '+27',
+    'KR': '+82',
+    'SS': '+211',
+    'ES': '+34',
+    'LK': '+94',
+    'SD': '+249',
+    'SR': '+597',
+    'SJ': '+47',
+    'SZ': '+268',
+    'SE': '+46',
+    'CH': '+41',
+    'SY': '+963',
+    'TW': '+886',
+    'TJ': '+992',
+    'TZ': '+255',
+    'TH': '+66',
+    'TG': '+228',
+    'TK': '+690',
+    'TO': '+676',
+    'TT': '+1-868',
+    'TN': '+216',
+    'TR': '+90',
+    'TM': '+993',
+    'TC': '+1-649',
+    'TV': '+688',
+    'VI': '+1-340',
+    'UG': '+256',
+    'UA': '+380',
+    'AE': '+971',
+    'GB': '+44',
+    'US': '+1',
+    'UY': '+598',
+    'UZ': '+998',
+    'VU': '+678',
+    'VA': '+39-06',
+    'VE': '+58',
+    'VN': '+84',
+    'WF': '+681',
+    'EH': '+212',
+    'YE': '+967',
+    'ZM': '+260',
+    'ZW': '+263'
+};
+countrySelect.addEventListener('change', function() {
+    const selectedCountry = this.value;
+    if (selectedCountry in countryCodes) {
+        phoneInput.value = countryCodes[selectedCountry] + ' ';
+    } else {
+        phoneInput.value = '';
+    }
+});
+        // Get DOM Elements
+        const chatbotButton = document.getElementById('chatbot-button');
+        const chatbotPopup = document.getElementById('chatbot-popup');
         const formContainer = document.getElementById('form-container');
         const chatBox = document.getElementById('chat-box');
+        const chatBody = document.getElementById('chat-body');
         const gradioIframe = document.getElementById('gradio-iframe');
         const gradioFrame = document.getElementById('gradio-frame');
+        const closeButton = document.getElementById('close-btn');
+        const form = document.getElementById('form');
+        const backToChatbotBtn = document.getElementById('back-to-chatbot-btn');
+        // Check if the form was already submitted in the current session
+        const formSubmitted = sessionStorage.getItem('formSubmitted') === 'true';
+        let globalUniqueID; // Declare a global variable
+const userForm = document.getElementById('form');
+userForm.addEventListener('submit', async (event) => {
+    event.preventDefault(); // Prevent default form submission
+    // Gather form data
+    const name = document.getElementById('username').value;
+    const company = document.getElementById('companyname').value;
+    const email = document.getElementById('email').value;
+    const countryCode = document.getElementById('country').value;
+    const phone = document.getElementById('phone').value;
+    // Prepare data to send to the server
+    const formData = {
+        name,
+        company,
+        email,
+        countryCode,
+        phone
+    };
+    try {
+        // Send data to the new server URL
+        const response = await fetch('https://srinuksv-fastapiyes.hf.space/webhook', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData)
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const result = await response.json();
+        // Store the unique ID in the global variable
+        globalUniqueID = result.id;
+        console.log('Unique ID:', globalUniqueID);
+    } catch (error) {
+        console.error('Error:', error);
+    }
+});
+        // Function to Open Chatbot
+        function openChatbot() {
+            chatbotPopup.classList.add('visible'); // Add the visible class to show the popup
+            chatbotButton.style.opacity = '0'; // Fade out the hover button
+            setTimeout(() => {
+                chatbotButton.style.display = 'none'; // Hide the hover button after fade out
+            }, 300);
+            if (formSubmitted) {
+                formContainer.style.display = 'none';
+                chatBox.style.display = 'flex';
+                initializeChat(); // Start chat if the form was already submitted
+            } else {
+                formContainer.style.display = 'block'; // Show form when opening
+                chatBox.style.display = 'none';
+            }
+        }
+        // Function to Close Chatbot
+        function closeChatbot() {
+            chatbotPopup.classList.remove('visible'); // Remove the visible class to hide the popup
+            setTimeout(() => {
+                chatbotButton.style.display = 'flex'; // Display the hover button before fading in
+                setTimeout(() => {
+                    chatbotButton.style.opacity = '1'; // Fade in the hover button
+                }, 50);
+            }, 300);
+        }
+        // Handle Form Submission
+        form.addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent default form submission
+            let isValid = true;
+            const formControls = document.querySelectorAll('.form-control');
+            formControls.forEach(function(control) {
+                const input = control.querySelector('input, select');
+                if (input.hasAttribute('required') && !input.value.trim()) {
+                    input.style.borderColor = 'red';
+                    isValid = false;
+                } else {
+                    input.style.borderColor = '#ddd';
+                }
+            });
+            const recaptchaResponse = grecaptcha.getResponse();
+            if (recaptchaResponse.length === 0) {
+                alert('Please complete the reCAPTCHA.');
+                isValid = false;
+            }
+            if (isValid) {
+                formContainer.style.display = 'none';
+                chatBox.style.display = 'flex';
+                sessionStorage.setItem('formSubmitted', 'true');
+                initializeChat(); // Initialize the chat after form submission
+            }
+        });
         // Function to handle user input and display chat responses
         function handleUserInput(input) {
             // Display user message
             const userMessage = document.createElement('div');
+            userMessage.className = 'user-message';
             userMessage.textContent = input;
             chatBody.appendChild(userMessage);
             // Create bot response
             const botMessage = document.createElement('div');
+            botMessage.className = '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.
+                        <div class="button-container">
+                            <button onclick="handleUserInput('Menu')">Menu</button>
+                        </div>
                     `;
                     break;
                 case 'Our services':
                     botMessage.innerHTML = `
                         We offer a range of services tailored to your needs. Please choose one:
+                        <div class="button-container">
+                            <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>
+                        </div>
                     `;
                     break;
                 case 'Salesforce':
                     botMessage.innerHTML = `
                         We offer a range of services tailored to your needs. Please choose one:
+                        <div class="button-container">
+                            <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>
+                        </div>
                     `;
                     break;
                 case 'Our products':
                     botMessage.innerHTML = `
                         We offer a range of services tailored to your needs. Please choose one:
+                        <div class="button-container">
+                            <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>
+                        </div>
                     `;
                     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>
+        <div class="button-container">
+        <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':
+window.open('https://calendly.com/contactus-redfernstech', '_blank');
+botMessage.innerHTML = `
+        <p>Book an Appointment or Go back to Menu:</p>
+        <div class="button-container"w>
+                    <button onclick="handleUserInput('Menu')">Menu</button>
                     `;
                     break;
                 case 'Zoho':
+                window.open('https://redfernstech.com/services-list/zoho-crm/', '_blank');
+botMessage.innerHTML = `
+        <p>View Zoho Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'Machine Learning':
+                window.open('https://redfernstech.com/services-list/machine-learning/', '_blank');
+botMessage.innerHTML = `
+        <p>View Machine Learning Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'Data Science':
+                window.open('https://redfernstech.com/services-list/data-science/', '_blank');
+botMessage.innerHTML = `
+        <p>View Data Science Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'Lightning Service':
+                window.open('https://redfernstech.com/services-list/salesforce-lightning-services/', '_blank');
+botMessage.innerHTML = `
+        <p>View Lightning Service Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'App Development':
+                window.open('https://redfernstech.com/services-list/salesforce-app-development/', '_blank');
+botMessage.innerHTML = `
+        <p>View App Development Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
+                case 'Sites and Communities':
+                window.open('https://redfernstech.com/services-list/salesforce-sites-communities/', '_blank');
+botMessage.innerHTML = `
+        <p>View Sites and Communities Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'Admin Support':
+                window.open('https://redfernstech.com/services-list/salesforce-admin-and-support/', '_blank');
+botMessage.innerHTML = `
+        <p>View Admin Support Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'career opportunities':
+                window.open('https://redfernstech.com/careers/', '_blank');
+botMessage.innerHTML = `
+        <p>View Careers Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'product filter app':
+                window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K23xNUAR', '_blank');
+botMessage.innerHTML = `
+        <p>View Product Filter App Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'thumbnail viewer app':
+                window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K8u1dUAB', '_blank');
+botMessage.innerHTML = `
+        <p>View Thumbnail Viewer App Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'mass approvals app':
+                window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K24EdUAJ', '_blank');
+botMessage.innerHTML = `
+        <p>View Mass Approvals App Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</button>
+                    `;
                     break;
                 case 'currency conversion app':
+                window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000Is77CUAR', '_blank');
+botMessage.innerHTML = `
+        <p>View Currency Conversion App Page or Go back to Menu:</p>
+        <div class="button-container">
+                    <button onclick="handleUserInput('Menu')">Menu</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';
+                    botMessage.textContent = 'Loading Salesforce chatbot...'; // Optional: Notify the user
+                    gradioFrame.src = `https://srinuksv-fastapiyes.hf.space/ch/${globalUniqueID}`; // Replace with your Gradio chatbot URL
                     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
+        }
+        // Show chat box
+        function showChat() {
+            formContainer.style.display = 'none';
+            chatBox.style.display = 'flex';
+            gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
+            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-fastapiyes.hf.space/ch/${globalUniqueID}`;
+               } else {
+                    gradioIframe.src = `https://srinuksv-fastapiyes.hf.space/ch/${globalUniqueID}`;
+               }
+        }
+        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
+    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 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;
+}
+        // Hide Gradio iframe and show chat box
+        function goBackToChat() {
+            formContainer.style.display = 'none';
+            chatBox.style.display = 'flex';
             gradioIframe.style.display = 'none';
+            initializeChat();
+        }
+        // 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>
+        <div class="button-container">
+        <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
+        chatbotButton.addEventListener('click', openChatbot);
+        closeButton.addEventListener('click', closeChatbot);
+        backToChatbotBtn.addEventListener('click', goBackToChat);
+        // Automatically open the chatbot if the form was submitted in the current session
+        if (formSubmitted) {
+            openChatbot();
+        }
     </script>
 </body>
 </html>