https://github.com/wlad1slav/chatbot-widget
AI Chatbot Widget — customizable animated AI chatbot widget for e-commerce sites enhancing visitor engagement and sales.
https://github.com/wlad1slav/chatbot-widget
chatbot chatbot-ui e-commerce e-commerce-app widget
Last synced: 9 months ago
JSON representation
AI Chatbot Widget — customizable animated AI chatbot widget for e-commerce sites enhancing visitor engagement and sales.
- Host: GitHub
- URL: https://github.com/wlad1slav/chatbot-widget
- Owner: Wlad1slav
- Created: 2025-06-16T14:09:21.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-24T14:33:16.000Z (11 months ago)
- Last Synced: 2025-07-24T19:25:55.279Z (11 months ago)
- Topics: chatbot, chatbot-ui, e-commerce, e-commerce-app, widget
- Language: TypeScript
- Homepage:
- Size: 179 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Chatbot Widget
This chatbot widget was developed for [Agile Alpaca](https://agile-alpaca.com) clients who have used our AI-agent integration services in their online stores. It’s designed for commercial websites to help visitors quickly get answers to their questions and place orders.
## Features
- [x] Theme customization – the theme parameter applies predefined styles that change the background, button, and message-bubble colors.
- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.
- [x] Open button + message badge
- [x] Welcome message
- [x] Previous dialogue restoration
- [x] Quick-reply prompts (chat prompts)
- [x] Page context (pageContext) – lets you run arbitrary scripts (e.g., auto-show the chat or display a personalized message) once a visitor has spent timer ms on a specific pathname.
- [x] Full control via context object – the execPageContext function provides external code with a complete set of setters (open, messageOptions, input, promptsOptions) plus a scrollToBottom method, simplifying integration with analytics or business logic.
- [x] Input with Shift+Enter support – pressing Enter sends a message; Shift+Enter inserts a newline.
- [x] Automatic scroll to the latest message
- [x] Responsive design
- [ ] Full-page context handling – ability to send the entire page context to the server along with the user’s message.
## Usage
```html
const greeting = 'Hello! 👋 I’m the AI assistant.'
const contactUsMessage = `To get in touch with our manager, please leave your email address 📧, WhatsApp, or phone number 📱.
We'll get back to you during our business hours 🕖 7:00 a.m. – 4:00 p.m. CST.
Thank you for reaching out! 💬`
const chatPrompts = [
'I want a custom sign',
'I want to track my order',
'What are production and delivery times?',
'What are your shipping and refund policies?',
'I have problem with my order'
]
ChatbotWidget.mountChatbotWidget("#chatbot", {
chatbotUrl: 'https://.../webhook/...',
dialogeBaseUrl: 'https://.../webhook/...',
ty, futuristic, o Canada
greeting,
chatPrompts,
title: 'Bsign Assistant',
imageUrl: 'https://cdn.shopify.com/s/files/1/0248/8198/7665/files/chatbot-logo.png?v=1750682293',
imageWidth: '120px',
// Modify the chat states depending on the user's URL
pageContext: {
'/pages/contact-us': {
timer: 1000,
exec: ({ open, messageOptions }) => {
messageOptions.setMessages(prev => [
...prev,
{content: contactUsMessage, sender: 'bot'}
])
open.setIsOpen(true);
}
}
},
});
```
### Themes
Avaible themes: `futuristic`, `lighty`, `boring`, `o Canada`.
The themes are stylized using tailwind, you can see them here: `/widget-vite/src/utils/styles.ts`.
There is currently no solution for creating custom themes by passing props. If needed, you can use plain CSS with the !important directive.
#### lighty
The “lighty” theme combines minimalism with vibrant accents:
- A clean white background makes the interface feel light and airy.
- A contrasting dark header adds structure and focuses attention on navigation.
- Gradiented bot messages in purple-pink hues enliven the space without overwhelming it.
- Black-and-white user messages (with subtle transparency) maintain a sleek look.
- Buttons and input fields feature delicate purple outlines for a modern yet refined style.
#### boring
The “boring” theme offers a maximally neutral and formal interface:
- A pure white background and a solid dark header (no gradients) create a very simple backdrop.
- Bot messages in dark gray blocks with white text look like a classic terminal chat.
- User messages and icons are in black without any color accents—utterly restrained.
- Inputs and buttons have thin gray borders that barely draw attention.
- This style suits corporate or internal tools where functionality matters more than aesthetics.
#### futuristic
The “futuristic” theme plunges you into a cyberpunk, sci-fi world:
- A deep gradient from dark slate through purple to near-black evokes the infinity of space.
- Bright purple-to-blue accents in the header and open button emit neon energy.
- Bot messages in warm purple-pink gradients with white text resemble holograms.
- Semi-transparent, heavily blurred user message backgrounds create a digital cocoon.
- Glow effects on the open button and notification badge complete the high-tech vibe.
#### o Canada
The “o Canada” theme embodies nature and stability:
- A white background recalls Canadian forests, snowy landscapes, and purity.
- The header and bot elements use a deep green (#016553), reminiscent of evergreen woods.
- The gold notification badge (#D1A205) symbolizes the warm hues of sunlight over the plains.
- User messages and input fields remain understated so nothing distracts from the core content.
- This style works well for eco-friendly, educational, or official projects that value trust and reliability.
### Widget context
One of the chatbot’s most important features is its ability to manipulate widget states based on the page context (and this functionality will only expand over time).
At the moment, you can only modify states based on the URL the user is visiting.
Example usage:
```typescript
pageContext: {
'/pages/contact-us': {
timer: 1000, // after how many ms executed
exec: ({ open, messageOptions }) => {
// Adds messages to existing
messageOptions.setMessages(prev => [
...prev,
{ content: "Hello! Do you want to contact us?", sender: 'bot' }
]);
// Automatically expands the widget
open.setIsOpen(true);
}
}
}
```
All modifiable states are:
```typescript
{
open: {
isOpen: boolean, // whether the widget is open
setIsOpen: (v: boolean) => void // open / close the widget
},
messageOptions: {
// All existing messages
messages: {
content: string,
sender: "user" | "bot"
}[],
// Function for setting messages
setMessages: (messages: {
content: string,
sender: "user" | "bot"
}[]) => void,
},
// Input field
input: {
inputValue: string,
setInputValue: (value: string) => void,
},
// Tips for the user
promptsOptions: {
prompts: string[],
setPrompts: (prompts: string[]) => void
},
// Thing that unfortunately doesn't work
scrollToBottom: () => void
}
```