💬 Modern Chatbot Widget for stores

A modern, minimal chatbot widget designed for stores, inspired by WhatsApp-style UX. Built with vanilla JavaScript, easy to integrate, lightweight, and fully customizable.

✨ Features

✅ Floating chat button

✅ Modern minimal UI (blue + gray tones)

✅ Typing indicator (bot is “thinking”)

✅ Send message with Enter key

✅ Quick reply buttons (Price / Format / Buy)

✅ Auto greeting message

✅ Responsive & mobile-friendly

✅ Easy backend integration (API-based)

---

🖼️ Preview

A clean floating chat widget with rounded bubbles, quick actions, and smooth UX. (Screenshot included in the repository)

---

🛠️ Tech Stack

JavaScript (Vanilla)

HTML (DOM injection)

CSS (inline + optional external CSS)

Backend: Any REST API (Node.js, FastAPI, Flask, etc.)

---

📂 Project Structure

chatbot-website/
│
├── chatbot.js        # Main chatbot logic
├── chatbot.css       # (Optional) Custom styles
├── README.md
└── screenshot.png

---

🚀 Installation (Store)

1️⃣ Add the JS file

Upload chatbot.js to your website theme assets or paste it directly into theme.liquid.

2️⃣ Update backend URL

Inside chatbot.js, change:

const BACKEND_URL = "https://your-backend-url/chat";

3️⃣ Save & refresh your store

The chat button will appear in the bottom-right corner.

---

🔌 Backend API Format

The chatbot expects a POST request like this:

Request

{
  "message": "price"
}

Response

{
  "reply": "The Digital Planner 2026 costs $12. Instant download."
}

---

💡 Example Use Cases

Product FAQ assistant

Digital product sales chatbot

Customer support automation

Lead qualification

AI-powered store assistant

---

🎨 Customization

You can easily customize:

🎨 Colors (blue, gray, dark mode)

🧩 Quick reply buttons

🧠 Bot responses (via backend)

🛒 Buy Now links

🌍 Language (EN / FR / AR)

---

🔒 Security & Privacy

No user data stored on frontend

API-based communication

---

📌 Roadmap

Dark mode

Chat history memory

Product cards

Analytics dashboard

---

🤝 Contributing

Pull requests are welcome. Feel free to open an issue for suggestions or improvements.

---

👩‍💻 Author

Eng. Khadija Bouadi

📧 Contact

For any queries, reach out to:

GitHub: @khadibd

Email: [email protected]