The Palos Publishing Company

Categories We Write About

Build a chatbot that answers FAQs

Written by

in

Computer Science

To build a chatbot that answers FAQs, you can create a simple FAQ chatbot using JavaScript and HTML for the frontend, and optionally Node.js or Python for backend integration if needed. Below is a complete front-end example of a basic FAQ chatbot that responds to pre-defined questions.

✅ Features:

Predefined FAQ list
Keyword matching
Simple UI using HTML/CSS/JavaScript

✅ Code Example (HTML + CSS + JavaScript)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>FAQ Chatbot</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .chat-container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 400px;
      max-height: 600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .chat-box {
      flex-grow: 1;
      padding: 15px;
      overflow-y: auto;
    }
    .chat-message {
      margin: 10px 0;
    }
    .user {
      text-align: right;
    }
    .bot {
      text-align: left;
    }
    .input-area {
      display: flex;
      border-top: 1px solid #ccc;
    }
    input {
      flex-grow: 1;
      padding: 10px;
      border: none;
      outline: none;
    }
    button {
      padding: 10px 15px;
      background: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <div class="chat-box" id="chat-box"></div>
    <div class="input-area">
      <input type="text" id="user-input" placeholder="Ask a question..." />
      <button onclick="sendMessage()">Send</button>
    </div>
  </div>

  <script>
    const faq = {
      "what are your business hours": "Our business hours are 9 AM to 6 PM, Monday to Friday.",
      "how can i contact support": "You can contact our support team at support@example.com.",
      "where are you located": "We are located at 123 Main Street, Cityname.",
      "what is your return policy": "We offer a 30-day return policy from the date of purchase.",
      "how long does shipping take": "Shipping typically takes 3-5 business days."
    };

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

      displayMessage(userInput, "user");
      inputField.value = "";

      let response = "Sorry, I didn't understand that. Please try asking another question.";
      for (let key in faq) {
        if (userInput.includes(key)) {
          response = faq[key];
          break;
        }
      }

      setTimeout(() => {
        displayMessage(response, "bot");
      }, 500);
    }

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

✅ How to Use:

Save the code as an index.html file.
Open it in any browser.
Type questions like:
- What are your business hours?
- How can I contact support?

✅ Optional Enhancements:

Use AI APIs (e.g., OpenAI) for more dynamic responses.
Integrate with a backend (Node.js/Python) to fetch real-time data.
Add a database of FAQs for scalability.
Add voice input or NLP libraries (e.g., TensorFlow.js or spaCy).

Would you like this chatbot to be powered by AI instead of static responses?

Share This Page:

Comments

Leave a Reply Cancel reply

Check Out Our Newest Posts we wrote about

Categories We Write About