Spaces:
Running
Running
| <html lang="en"> | |
| <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">×</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">←</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.uniqueID; // Update according to your server response structure | |
| // Open Gradio URL with unique ID | |
| gradioFrame.src = `https://srinuksv-fastapiyes.hf.space/ch/?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 | |
| } | |
| }); | |
| // 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> | |