Widget Customization
The widget settings let you fully customize how the chat widget looks and behaves on your website. Settings are organized into four tabs: Appearance, Content & Behavior, Positioning, and Advanced.
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. | Auto (min 300, max 600) |
| Height | Widget height in pixels. | Auto (min 300, max 700) |
| Chat Title | Text displayed in the widget header bar. | Customer Service Bot |
| Avatar Image URL | Full URL to a custom avatar image for the chatbot. | None |
| Chat Button Image URL | Full URL to a custom image for the floating chat button. | None |
| Font Family | Google Font to use in the widget. Matches your website's typography. | 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.
Content & Behavior
Configure what the widget displays 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 |
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.
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