Widget Configuration
Customize the chatbot widget appearance, behavior, and features
Configure your chatbot's look and behavior from Config → Widget Settings.
Appearance
| Setting | Description | Default |
|---|---|---|
| Primary Color | Brand color for buttons, links, and accents | #6366f1 |
| Bot Name | Name shown in the widget header | "Assistant" |
| Greeting Message | First message visitors see when opening the chat | "Hi! How can I help?" |
| Input Placeholder | Placeholder text in the message input | "Type a message..." |
| Position | Bottom-right or bottom-left corner | Bottom right |
| Theme | Auto (follows system), Light, or Dark | Auto |
| Window Height | Chat panel height in pixels (300–800) | 500 |
| Launcher Icon | Chat bubble or question mark icon | Chat |
| Avatar URL | Custom avatar image for the bot | None |
| Hide on Mobile | Hide the widget on mobile devices | Off |
AI Instructions
In Config → AI Instructions, you can provide custom instructions that shape how the AI responds:
You are a friendly support agent for Acme Store. Always be concise and helpful.
If someone asks about pricing, direct them to our pricing page.
Never discuss competitor products.
Instructions are included in every conversation and help the AI match your brand voice and policies.
Live Preview
The config page includes a live preview panel that shows how your widget will look with the current settings. Changes update the preview in real-time before you save.
Embed Code
After configuring your widget, copy the embed code from the domain Overview tab and add it to your website:
<script
src="https://userboost.ai/widget.js"
data-cid="YOUR_DOMAIN_ID"
async
></script>