Chat Widget Settings & Installation

Chat Widget

Open Dashboard → your assistant → Channels → Chat widget. This is where you install and customize the floating website widget. There is no separate Integration or Widget Integration tab.

Install the widget

Expand Show installation details above the customization area. The panel contains:

• the ready-to-use HTML with your Chatbot ID already inserted;
• Copy code and Add to website actions;
• Check installation to verify that the widget loads on an allowed domain;
• setup guides for WordPress, Shopify, Wix, Squarespace, and Webflow.

When WebChatAgent detects the widget, the panel shows the domain where this assistant is loading. A failed check usually means the code is missing, the page still serves an old cached version, or the domain is absent from Settings → Allowed websites.

See the Website Embed Guide for placement and the developer widget guide for HTML attributes and runtime events.

Appearance & content

This tab combines visual design, images, and the content shown before a conversation starts.

Basic settings

Colors

The editor checks text contrast and warns when a foreground/background pair is below the recommended WCAG ratio. Resolve those warnings before publishing.

Chat button

Choose what the closed launcher shows without writing CSS:

Seven icon presets are animated: Typing, Sparkles, Wave, Bell, Rocket, Heartbeat, and Lightning. The dashboard preview and published widget use the same icon and motion. If Own image is selected without an available image, the chosen icon is used safely as a fallback. See Custom CSS for the stable selector table and effect example.

Images

Each image accepts either an upload or a URL:

The custom chat-button image is configured in Chat button → Own image. Uploads support PNG, JPG, WebP, and GIF. Use small, optimized images; the editor shows the current size limits beside each upload.

Content

Welcome and speech-bubble text can be drafted with Generate with AI and then edited. Keep the speech bubble short; put longer explanations in the welcome message.

Behavior

Visibility and interaction

Hide on URLs/paths

Enter one rule per line. Wildcard * is supported, so you can hide the widget on pages such as:

/checkout/*
/account/*
https://example.com/en/legal/*

Use this for checkout, account, login, or other pages where the floating widget would distract from the task or cover important controls.

Positioning

Choose Left, Center, or Right independently for desktop and mobile. The horizontal offset is measured from the selected physical edge; it is kept but ignored while Center is selected. The vertical offset remains the distance from the bottom edge.

On desktop, the selection positions the complete floating widget and controls whether it opens from the left, right, or from below when centered. On mobile, the open chat remains fullscreen and the selection applies to the closed launcher. Test all variants with cookie banners, sticky navigation, and mobile safe areas visible.

Automatic engagement

Turn on Enable proactive triggers when the widget should contact visitors based on time, scroll depth, exit intent, page, inactivity, returning visits, or other behavior.

The panel contains the trigger editor, global frequency controls, optional scheduling and targeting, templates, and performance data. It also explains the optional consent connection. Basic proactive behavior works anonymously; returning-visitor detection, persistent limits, analytics, and AI-generated greetings require a granted consent signal.

See Proactive Triggers for every trigger type, response mode, limit, and privacy behavior.

Buttons & forms

Quick actions

Prompt buttons (also called starter questions, suggested questions, or conversation starters) are one-click messages shown before the visitor types anything. They live under Channels → Chat widget → Buttons & forms → Quick actions.

Use Add Button for a new item, drag the handle on the left to reorder, then Save Changes. Generate with AI drafts a set from the assistant's own data sources; the switch above it keeps that set up to date automatically.

The buttons are visible while the conversation is still empty. Once the visitor sends the first message, they move into the actions menu next to the input field.

Two things that catch people out: an active Action Bar replaces the prompt buttons, so use one or the other. And the inline chat keeps its own buttons under Channels → Inline chat; this setting does not apply there.

Action Bar

The Action Bar displays persistent actions at the bottom of the chat. When active, it replaces prompt buttons. Depending on the item type, it can open a link, WhatsApp, an embedded Calendly page, or a custom form.

Forms

Create forms, add and reorder fields, set required values, and customize the submit button and success message. Submitted data is stored in the Leads dashboard.

See Action Bar & Forms for item types, field types, translation, and lead mapping.

Advanced

Language detection source

Choose how automatic translation detects the visitor language:

• Browser language uses the browser's Accept-Language preference.
• HTML lang attribute uses the page's <html lang="…"> value.

Use the HTML option when each localized page declares its language correctly and should control the widget language. Use browser language when the page itself is not reliably localized.

Right-to-left pages

The widget reads and observes <html dir="rtl">. Text, messages, the header, input, menus, lists, and the speech bubble mirror automatically, including when dir changes after the page has loaded. Explicit Left, Center, and Right positions remain physical, so Left always stays on the left edge.

Branding

Hide Branding removes the WebChatAgent attribution when the current plan allows it. The panel clearly shows whether branding is currently visible or hidden.

Test and publish

1. Use Test Your Chatbot after content or behavior changes.
2. Check the welcome state, one real answer, sources, prompt buttons, forms, and file upload as applicable.
3. Click Save Changes.
4. Open the real website on desktop and mobile.
5. Use Check installation if the widget is not detected.

The dashboard preview is useful, but the real site is authoritative for z-index, cookie banners, responsive offsets, fonts, and page-specific visibility rules.