Customer Service Chatbot

A beginner-friendly Customer Service Chatbot web application built with Python Flask, HTML, CSS, and JavaScript. It answers common customer questions using a JSON FAQ dataset, keyword matching, fuzzy matching, and lightweight NLP-style token normalization.

Features

• ChatGPT-style responsive chat interface
• Dark and light mode
• Welcome message
• Typing indicator and smooth message animations
• Message timestamps
• Quick reply FAQ buttons with category filtering
• 100+ FAQ questions and answers stored in faq.json
• Search-based responses using keyword and fuzzy matching
• Chat history saved in the browser with localStorage
• Clear chat button
• Voice input with the Web Speech API
• Text-to-speech bot replies
• Polite fallback for unknown questions

Screenshots

Light mode:

Dark mode:

Project Structure

customer-service-chatbot/
├── app.py
├── chatbot.py
├── faq.json
├── requirements.txt
├── templates/
│   └── index.html
├── static/
│   ├── style.css
│   ├── script.js
│   └── images/
│       ├── bot-avatar.svg
│       ├── screenshot-dark.svg
│       └── screenshot-light.svg
└── README.md

Installation

1. Create and activate a virtual environment:

python -m venv .venv

Windows:

.venv\Scripts\activate

macOS/Linux:

source .venv/bin/activate

2. Install dependencies:

pip install -r requirements.txt

3. Run the Flask app:

python app.py

4. Open the app in your browser:

http://127.0.0.1:5000

How It Works

The backend loads FAQs from faq.json. When the user sends a message, chatbot.py normalizes the text, removes common stop words, maps a few synonyms, applies light stemming, and scores every FAQ using:

• Token overlap
• Keyword hits
• Fuzzy similarity with difflib.SequenceMatcher
• Exact phrase bonus

The highest-scoring FAQ is returned when confidence is high enough. Otherwise, the bot replies politely and suggests contacting support.

API Endpoints

Method	Endpoint	Purpose
GET	/	Chatbot UI
POST	/api/chat	Send a message and receive a bot reply
GET	/api/faqs	Get FAQ records
GET	/api/categories	Get FAQ categories

Example chat request:

curl -X POST http://127.0.0.1:5000/api/chat \
  -H "Content-Type: application/json" \
  -d "{\"message\":\"Where is my refund?\"}"

Notes for Beginners

• Edit faq.json to add more questions, categories, keywords, and answers.
• Adjust the confidence threshold in chatbot.py if the bot is too strict or too eager.
• Browser voice input works best in Chrome or Edge and may require microphone permission.
• Text-to-speech uses your browser's built-in speech engine.

Ideas to Improve

• Add user authentication
• Store chat history in a database
• Add an admin page for editing FAQs
• Use sentence embeddings for smarter matching
• Connect the fallback response to a live support ticket form