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.
About 95% of the code for this widget is written by GPT-4, I just edited and adjust a few things
- No external dependencies, pure javascript
- Responsive design
- Smooth animations and transitions
- Easily customizable
- Lightweight and dependency-free
- Replace Tailwind with a custom CSS file
- Session Persistance
- Ajax mechanism to send and receive messages
To install the chat widget, follow these steps:
-
Copy the
chat-widget.jsfile into your project directory. -
Add the following script tag to the
<head>section of your HTML document:
<script async src="./chat-widget.js"></script>
-
The code is quite straight forward and easy to follow, you can easily modify it to suit your needs.
-
Messages are passed to the
onUserRequestfunction, where you can handle user requests and provide appropriate replies. Use thereplyfunction 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.
Here's a live demo of the chat widget:
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.
This project is open-source and available under the MIT License.