Spaces:

redfernstech
/

ipip

Running

File size: 16,850 Bytes

<!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>