Hugging Face's logo

Spaces:
redfernstech
/
ipip
Running

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