57 lines
2.2 KiB
JavaScript
57 lines
2.2 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const chatWidgetButton = document.getElementById('chat-widget-button');
|
|
const chatWidget = document.getElementById('chat-widget');
|
|
const chatCloseButton = document.getElementById('chat-close-button');
|
|
const chatForm = document.getElementById('chat-form');
|
|
const chatBody = document.getElementById('chat-body');
|
|
const chatInput = document.getElementById('chat-input');
|
|
|
|
chatWidgetButton.addEventListener('click', () => {
|
|
chatWidget.style.display = 'flex';
|
|
chatWidgetButton.style.display = 'none';
|
|
});
|
|
|
|
chatCloseButton.addEventListener('click', () => {
|
|
chatWidget.style.display = 'none';
|
|
chatWidgetButton.style.display = 'block';
|
|
});
|
|
|
|
chatForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const userInput = chatInput.value.trim();
|
|
if (userInput === '') return;
|
|
|
|
addMessage(userInput, 'user');
|
|
chatInput.value = '';
|
|
|
|
setTimeout(() => {
|
|
const botResponse = getBotResponse(userInput);
|
|
addMessage(botResponse, 'bot');
|
|
}, 500);
|
|
});
|
|
|
|
function addMessage(text, sender) {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('chat-message', `${sender}-message`);
|
|
messageElement.textContent = text;
|
|
chatBody.appendChild(messageElement);
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
}
|
|
|
|
function getBotResponse(userInput) {
|
|
const lowerInput = userInput.toLowerCase();
|
|
if (lowerInput.includes('hello') || lowerInput.includes('hi')) {
|
|
return 'Hello there! How can I help you today?';
|
|
} else if (lowerInput.includes('help')) {
|
|
return 'I can answer simple questions. Try asking me about pricing or features.';
|
|
} else if (lowerInput.includes('pricing')) {
|
|
return 'Our pricing is very competitive. Please visit our pricing page for more details.';
|
|
} else if (lowerInput.includes('feature')) {
|
|
return 'We have a wide range of features to meet your needs.';
|
|
} else {
|
|
return "I'm sorry, I don't understand. Can you please rephrase?";
|
|
}
|
|
}
|
|
});
|