<title>Foltech Feedback Chatbot</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f9ff; margin: 0; padding: 0; }

.chatbox {
  max-width: 400px;
  margin: 50px auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.messages {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
}

.message {
  margin-bottom: 10px;
}

.bot {
  color: #007bff;
}

.user {
  text-align: right;
  color: #333;
}

input[type="text"] {
  width: 80%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

h2 {
  text-align: center;
  color: #0056b3;
}

</style>

Feedback Chatbot

Hi! 👋 I'm the Foltech Feedback Bot. What would you like to share with us today?

Send

<script> const form = document.getElementById('chat-form'); const input = document.getElementById('user-input'); const messages = document.getElementById('messages'); form.addEventListener('submit', (e) => { e.preventDefault(); const userText = input.value.trim(); if (userText === '') return; appendMessage('user', userText); input.value = ''; // Simulated bot response setTimeout(() => { const botReply = getBotReply(userText); appendMessage('bot', botReply); }, 700); }); function appendMessage(sender, text) { const msgDiv = document.createElement('div'); msgDiv.classList.add('message', sender); msgDiv.textContent = text; messages.appendChild(msgDiv); messages.scrollTop = messages.scrollHeight; } function getBotReply(input) { const lower = input.toLowerCase(); if (lower.includes('good') || lower.includes('great')) { return "Thanks for your positive feedback! 😊"; } else if (lower.includes('bad') || lower.includes('issue')) { return "We're sorry to hear that. We'll look into it right away!"; } else { return "Thanks for your feedback. We appreciate it!"; } } </script>