Chat Widget
The chat widget is the bubble your visitors click on your website. It belongs to a brand, and you design it on a split screen with five tabs and a live preview: Appearance, Home, Messages, Features and Install.
Where to Find It
Open it at Brand → (your brand) → Chat widget. The web address has not changed — it is still /dashboard/widgets/<widgetId> — so old bookmarks keep working. Above the tabs you get a breadcrumb reading (brand name) › Chat widget, and a back arrow to that brand's Overview.
The screen is split: the settings on the left, a live preview of the widget on the right. On narrower screens a Preview / Settings button swaps between the two. Save Changes at the top right writes every tab's settings in one go — with one exception: the Inbox access list on the Features tab has its own Save button and is not written by Save Changes.
Editing it needs the Brands permission, shown in the permission editor as Brands & chat widgets. That is the same right that covers Brand settings and creating brands.
Where a Chat Widget Comes From
There is no widget list page and no "New widget" dialog. A chat widget comes into existence together with a brand: Brand → + New brand has an Also create block with tick boxes for Chat widget, Knowledge base, Documentation and Vex AI bot. Each box is shown only if your plan includes that feature at all, and is disabled with "Your plan has no room for another one." when your allowance is already used up.
The Five Tabs
| Tab | What you set there |
|---|---|
| Appearance | Logo and avatar, Redesign with AI, launcher button, theme colours, home-screen background style |
| Home | Greeting, welcome message, team avatars, hide branding, and the home-screen cards |
| Messages | Menu title, expected reply time, email capture, conversation ratings |
| Features | The widget's name, session replays, News, Roadmap, Knowledge base, inbox access, deleting it |
| Install | The embed script, and identity verification |
Appearance
Branding
The Default Logo (shown in the widget header) and the Bot Avatar (the AI's profile picture) are chosen through a shared image picker titled "Your images" — "Everything this organisation has uploaded. Pick one to reuse it, or add a new one." Anything you upload joins that library automatically and can be reused anywhere else in the dashboard that asks for an image.
Redesign with AI
"Point us at a website and we'll match this widget's colors, background style and greeting to it." It opens the same AI setup dialog used elsewhere in the dashboard.
Give it a website address
Your own homepage is the usual answer. You can add a short note about your business if it helps.
It reads the site
The wizard looks at the page and works out a palette, a background style and wording that fit it.
Keep or Replace
If the widget already has a design, you are asked explicitly whether to keep what is there or replace it. Nothing is decided for you.
Look, then save
The result lands in the unsaved form and appears immediately in the live preview. Nothing is written until you press Save Changes — close the page without saving and your widget is untouched.
It changes more than colours: the home-screen background style, the greeting and welcome message, the launcher and icon colours, and the widget's avatar and header logo, which are pulled from the site and filed into your image library.
Launcher Button
The floating button on your customer's site that opens the widget. It is its own section because it has its own colour — solid or a two-colour gradient — and its own icon colour, none of which the theme's auto-generate touches.
Theme & Colors
Set the two colours the theme is built from, Background and Accents, then press Auto-Generate to derive every supporting colour (text, borders, bubbles, inputs) from them. Templates offers ready-made schemes, and asks whether to apply the same scheme to the home screen too. Advanced Colors expands to let you set each one by hand.
Home Screen
The home screen's own colours, plus its Background Style — Default, Blobs, Spotlight, Gradient, Ripple, Grid, Full Image, Small Image or None. The two image styles ask for a picture, taken from the same shared Your images library.
Launcher
Which corner the button sits in (bottom right or bottom left) and which icon it shows (message bubble or AI icon).
Home
Home Screen Settings
The Menu Title shown in the widget's bottom navigation, the Header Greeting (the large line, e.g. "Hi there 👋"), the Welcome Message beneath it, Show Team (whether agent avatars appear) and Hide Branding (removes the "Powered by Yaplet" badge, if your plan allows it).
Home Cards
The interactive cards on the home screen, in the order you arrange them. The available types are AI Assistant (Ask) — buttons that trigger AI answers or actions — plus Active Chat, Help Articles, Documentation, Form / Bug Report, Latest News, External Link and Send Message. Card types belonging to features your plan does not include are not hidden: they stay in the picker, greyed out and unclickable, with "Not included in your plan" printed underneath. Help Articles and Documentation are greyed out the same way until the brand publishes one on its public address — the note then reads "Requires Knowledge Base" or "Requires Documentation" instead.
Messages
The chat tab: its Menu Title, the Reply Time shown to visitors ("typically replies instantly", and so on), whether the widget shows in the bottom navigation, whether it asks visitors for an email address, and whether it collects a rating after a conversation — with your own wording for the rating prompt.
Features
General
The widget's name. This is the internal label you see in the dashboard, nothing the visitor ever reads. It is all that is left of the old General tab.
SDK Features
Session Replays — whether the widget records visitor sessions, for bug reports and for the Session Replays screen — plus Recording Rules, which limit recording to certain pages or certain visitors. Shown only if your plan includes session replays.
News Feed
The label and visibility of the news tab.
Roadmap
The label and visibility of the roadmap tab, and which feature-request board it shows. This board picker is the one connection that stayed on the widget, because boards belong to the organisation rather than to a brand. Changing it reloads the page after you save.
Knowledge base
This section no longer picks a knowledge base. It reports which one is in use:
Inbox access
A list of everyone in your organisation with a switch each. This grants access to the widget's brand, not to the single widget — switch someone off and they lose the whole brand, including its other screens. It writes exactly the same grant as the Brand access section on the Organization page. Owners and admins always have access and show an "Always has access" badge with the switch disabled. This section has its own Save button, and the page's Save Changes button does not save it.
Danger zone
The bottom of the Features tab is where you delete the widget. The dialog is explicit about both halves:
Install
The Install tab is where the embed script lives. It used to hide behind an "Embed" button in the top-right corner; that button and its pop-up are gone.
Copy the script and paste it into your website just above the closing </body> tag, on every page where the widget should appear.
Yaplet.identify(), you need it: calls to identify() are rejected unless they carry a valid userHash, and without one your signed-in users stay anonymous visitors. The panel reveals this widget's own identity secret on demand — every chat widget has its own, and it is not loaded into the page until you ask for it — shows the two code samples (sign the user id on your backend, pass the hash as the third argument to identify()), and lets you rotate the secret. Rotating breaks every identify() call to that widget until you deploy the new secret, so do it deliberately.Live Preview
What Is No Longer a Widget Setting
Several things that used to live on this screen belong to the brand now. Changing any of them destroys nothing and costs nothing — the old "this will delete and regenerate your AI training data" confirmations, and the "generating AI context chunks" progress notices behind them, are gone for good.
| What | Where it is now |
|---|---|
| Public web address (the widget URL) | Brand → Brand settings → Public address |
| Interface language | Brand → Brand settings → General |
| Which AI answers | Brand → Vex — the brand has one, and the widget uses it |
| Which knowledge base the Help tab shows | Brand → Knowledge |
| Which documentation is linked | Brand → Knowledge |
| Which forms a card can open | Tickets → (the board) → Forms — forms live on the board they feed |