The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Build a simple chatbot for FAQs

Written by

in

Computer Science

Here’s a simple FAQ chatbot implemented in HTML, CSS, and JavaScript. It uses predefined questions and answers to respond to user inputs.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Simple FAQ Chatbot</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f1f1f1;
      margin: 0;
      padding: 0;
    }
    .chat-container {
      width: 100%;
      max-width: 600px;
      margin: 40px auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .chat-box {
      height: 300px;
      overflow-y: auto;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 15px;
      border-radius: 5px;
      background: #fff;
    }
    .chat-message {
      margin: 5px 0;
    }
    .user {
      text-align: right;
      color: #333;
    }
    .bot {
      text-align: left;
      color: #007BFF;
    }
    input[type="text"] {
      width: 80%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      padding: 10px;
      border: none;
      background: #007BFF;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <h2>FAQ Chatbot</h2>
    <div class="chat-box" id="chatBox"></div>
    <input type="text" id="userInput" placeholder="Ask a question...">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script>
    const faqData = {
      "what are your business hours": "Our business hours are Monday to Friday, 9 AM to 5 PM.",
      "how can i contact support": "You can contact support via email at support@example.com.",
      "where are you located": "We are located at 1234 Main Street, Anytown, USA.",
      "what services do you offer": "We offer web development, digital marketing, and IT consulting services.",
      "how much do your services cost": "Pricing depends on the project. Please contact us for a quote."
    };

    function sendMessage() {
      const userInput = document.getElementById("userInput").value.trim().toLowerCase();
      if (!userInput) return;

      appendMessage("user", userInput);

      const answer = getBotResponse(userInput);
      appendMessage("bot", answer);

      document.getElementById("userInput").value = "";
    }

    function getBotResponse(input) {
      return faqData[input] || "Sorry, I don't understand that question. Please try asking something else.";
    }

    function appendMessage(sender, message) {
      const chatBox = document.getElementById("chatBox");
      const messageElement = document.createElement("div");
      messageElement.className = `chat-message ${sender}`;
      messageElement.innerText = message;
      chatBox.appendChild(messageElement);
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  </script>
</body>
</html>

Key Features:

Matches exact lowercase questions to stored answers.
Displays user and bot messages in a scrollable chat interface.
Easy to extend with more FAQ pairs.

How to Use:

Save the code in an .html file.
Open it in a web browser.
Ask a question matching the FAQ keys (e.g., “what are your business hours”).

Let me know if you want a version with AI or natural language capabilities using an API.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About