Widget Customization
The widget settings control exactly how the chat looks and behaves on your site. Open Dashboard → your chatbot → Widget Integration. Settings are split across seven tabs:
- Appearance — theme, size, title, font, and all colors
- Images — avatar, chat button image, welcome image
- Behavior — toggles, welcome message, excluded paths, prompt buttons
- Positioning — where the floating button sits on desktop and mobile
- Triggers — proactive messages based on visitor behavior
- Action Bar — buttons and forms at the bottom of the chat
- Advanced — language detection, branding, custom CSS
The Triggers and Action Bar tabs have their own pages — this page covers the other five.
Appearance
Control the visual design of your chat widget.
| Field | Description | Default |
|---|---|---|
| Widget Theme | Visual style of the widget. Options: Default, Modern. | Modern |
| Width | Widget width in pixels. Leave empty for auto. Minimum 300. | Auto |
| Height | Widget height in pixels. Leave empty for auto. Minimum 300. | Auto |
| Chat Title | Text displayed in the widget header bar. | Customer Service Bot |
| Font Family | The font used inside the widget. Start typing to search Google Fonts, or type any font name and press Enter to add it — pick one that matches your website. | System default |
Color Settings
| Field | Description | Default |
|---|---|---|
| Theme Color | Background color of the header bar. | #ffffff |
| Theme Text Color | Text color of the header bar. | #000000 |
| Bot Message Color | Background color of chatbot message bubbles. | #f3f4f6 |
| Bot Message Text Color | Text color inside chatbot message bubbles. | #424242 |
| User Message Color | Background color of visitor message bubbles. | #2563eb |
| User Message Text Color | Text color inside visitor message bubbles. | #ffffff |
| Chat Button Color | Background color of the floating chat button. | #424242 |
| Chat Button Icon Color | Icon/text color of the floating chat button. | #ffffff |
All color fields include a color picker and support hex values.
Images
On the Images tab you upload (or link) three optional images. Each accepts an uploaded file or a full image URL.
| Field | Description |
|---|---|
| Avatar Image | The small picture shown next to the chatbot's messages — usually a logo or mascot. |
| Chat Button Image | A custom image for the floating chat button instead of the default icon. |
| Welcome Image | An image shown above the welcome message when the chat opens. |
If you leave these empty, the widget uses its default icon and no images.
Behavior
On the Behavior tab you configure what the widget shows and how it interacts with visitors.
Toggle Settings
| Field | Description | Default |
|---|---|---|
| Disable widget on website | Completely hides the widget on all pages. Use this to temporarily disable the chatbot. | Off |
| Initially Open | Widget opens automatically when the page loads instead of showing only the chat button. | Off |
| Disable Microphone | Hides the voice input button from the chat interface. | Off |
| Show Sources | Displays source references below chatbot responses so visitors can verify information. | Off |
| Automatic Translation | Automatically translates widget UI labels to the visitor's browser language. Available on paid plans only. | On |
Text Fields
| Field | Description | Default |
|---|---|---|
| Welcome Message | The first message shown to visitors when they open the chat. Supports rich text/HTML formatting. | "Welcome! How can I help you today?" |
| Speech Bubble Text | Text shown in the floating speech bubble next to the chat button. Supports rich text/HTML. Use this to attract attention. | Empty |
| Privacy Notice | HTML content displayed as a privacy notice inside the widget (e.g. GDPR notice with a link to your privacy policy). | Empty |
Excluded Paths
Enter URL paths (one per line) where the widget should not appear. Supports wildcard * matching.
Example:
/admin/*
/checkout
/login
Prompt Buttons
Prompt buttons appear in the chat as quick-reply options visitors can click.
| Field | Description | Default |
|---|---|---|
| Generate prompt buttons automatically | Let AI automatically suggest relevant follow-up buttons based on the conversation. | Off |
| Max. buttons | Maximum number of auto-generated buttons (1–3). | 3 |
| Custom Prompt Buttons | Manually define buttons with a title and action text. Each button has a Title (displayed text) and Action (message sent when clicked). | Empty |
Positioning
Control where the chat widget and floating button appear on the page.
| Field | Description | Default |
|---|---|---|
| Offset X (Desktop) | Horizontal distance from the right edge in pixels. | 20 |
| Offset Y (Desktop) | Vertical distance from the bottom edge in pixels. | 20 |
| Offset X (Mobile) | Horizontal distance from the right edge on mobile devices. | 20 |
| Offset Y (Mobile) | Vertical distance from the bottom edge on mobile devices. | 20 |
These values define the position of the floating chat button. Adjust them to avoid overlapping with other elements on your page (e.g. cookie banners or navigation).
Advanced
| Field | Description | Default |
|---|---|---|
| Language detection source | How the widget detects the visitor's language. Browser uses the browser's language setting. HTML uses the page's <html lang="..."> attribute. | Browser |
| Hide Branding | Removes the "Powered by WebChatAgent.com" footer from the widget. Available on paid plans only. | Off |
| Custom CSS | Style the widget with your own CSS via stable .wca-* selectors. Available on Standard plans and higher. See Custom CSS. | Empty |
Integration Code
After customizing your widget, copy the embed code from the Integration section to add it to your website. Two methods are available:
- Script Tag — Simple
<script>snippet. Paste before the closing</body>tag. - Custom Element — Use the
<web-chat-agent>custom HTML element for more control over placement and behavior.
See the Widget Embed Guide for detailed integration instructions.
Looking for a chat that sits inside your page layout instead of a floating button? See the Inline Widget.
Best Practices
- Match your brand colors — Set theme, message, and button colors to match your website's design
- Use a friendly welcome message — First impressions matter; make visitors feel welcome
- Enable prompt buttons — Quick-reply buttons increase engagement and guide conversations
- Set excluded paths — Hide the widget on checkout, login, or admin pages where it's not needed
- Use the speech bubble — A short, inviting text attracts attention and increases chat usage
- Test on mobile — Adjust positioning offsets to ensure the widget doesn't overlap important content on small screens
- Add a privacy notice — If required by GDPR, add a notice with a link to your privacy policy