Web Chat Widget

Easily add a chat bubble to your website with a single script tag. A simple and responsive chat widget built with HTML, CSS, and JavaScript. The chat widget is styled using Tailwind CSS (v2). The blog post describing how I did it.

Built with ChatGPT (GPT-4)

About 95% of the code for this widget is written by GPT-4, I just edited and adjust a few things

Features

No external dependencies, pure javascript
Responsive design
Smooth animations and transitions
Easily customizable
Lightweight and dependency-free

TODO

Replace Tailwind with a custom CSS file
Session Persistance
Ajax mechanism to send and receive messages

Installation

To install the chat widget, follow these steps:

Copy the chat-widget.js file into your project directory.
Add the following script tag to the <head> section of your HTML document:

<script async src="https://github.com/sAakib13/sample-chat/raw/main/chat-widget.js"></script>

Usage & Customization

The code is quite straight forward and easy to follow, you can easily modify it to suit your needs.
Messages are passed to the onUserRequest function, where you can handle user requests and provide appropriate replies. Use the reply function to display responses in the chat popup.
For visual customization, you can directly make changes to the css or you can also replace the Tailwind CSS classes with your own custom CSS classes or inline styles.

Demo

Here's a live demo of the chat widget:

Chat Widget Demo

Contributing

Contributions are welcome! If you find a bug, have a feature request, or want to improve the chat widget, please feel free to open an issue or create a pull request.

License

This project is open-source and available under the MIT License.

sAakib13 / sample-chat

readme