A modern, fully customizable AI chatbot widget for WordPress, built as a single HTML file. This chatbot supports LLMs via OpenRouter.ai, and is designed to be easy to use, embed, and configure within any WordPress site using the Code Snippets plugin or theme editor.
| Theme | Preview |
|---|---|
| Orange | Orange Chatbot UI  |
| Navy Blue | Navy Blue Chatbot UI  |
| Green (Dark Mode) | Green (night mode) Chatbot UI  |
| Dark theme | Dark Chatbot UI  |
| /> |
Lightweight HTML-based AI assistant widget for WordPress. Compatible with OpenRouter API, customizable prompts, and visual themes included.
- 🧠 Powered by any OpenRouter-compatible LLM
- 🪄 Built-in system prompt customization
- 🎨 Three color themes: Orange ,Navy Blue and **green(Dark Mode).
- 📄 Supports text and image uploads
- 💡 Zero JavaScript conflicts (WordPress-safe)
- 🧩 Easily embeddable with a single HTML snippet
- Install the Code Snippets plugin (or use your theme's custom HTML block).
- Open the chatbot
.htmlfile (either green or blue version) in VS Code or any editor. - Copy the entire code and paste it into a new HTML snippet in WordPress.
- Save and activate the snippet.
In the HTML file, locate the WP_CHATBOT_CONFIG section inside the JavaScript code:
const WP_CHATBOT_CONFIG = {
OPENROUTER_API_KEY: "YOUR_OPENROUTER_KEY_HERE", // 🔑 Replace this
MODEL_NAME: "mistralai/mistral-small-3.2-24b-instruct:free", // ✅ Use any supported OpenRouter model
SYSTEM_PROMPT: `Customize your assistant's tone, knowledge, and personality here.`,- This project is open-source under the MIT License.
- Feel free to open issues, suggest features, or submit pull requests. Let’s build smarter web experiences together!