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.

A brand can live without a widget. Deleting the widget deliberately leaves its brand alive, so "a brand with no chat bubble" is a normal, permanent state. In that case the brand's Chat widget row opens a short page that explains the situation and offers an Add a chat widget button — which is also greyed out if your plan has no room for another one. A brand never has more than one chat widget.

The Five Tabs

TabWhat you set there
AppearanceLogo and avatar, Redesign with AI, launcher button, theme colours, home-screen background style
HomeGreeting, welcome message, team avatars, hide branding, and the home-screen cards
MessagesMenu title, expected reply time, email capture, conversation ratings
FeaturesThe widget's name, session replays, News, Roadmap, Knowledge base, inbox access, deleting it
InstallThe 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.

AI setup runs are limited. Free organisations share a lifetime pool of three runs across every place the wizard can be started from, and the dialog prints how many are left. A preview still counts as a run. Everyone, on every plan, is limited to five runs a minute.

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.

Auto-generate is the fastest way to a coherent widget: pick two colours you like, generate, and only open Advanced Colors if something specific looks wrong.

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:

A blue notice names the knowledge base currently published on the brand's public address — on screen it is worded "This is the knowledge base on this brand's address (acme.yaplet.help), and it is what this tab shows." — with a Manage on the brand's Knowledge page button. If nothing is published there you get an amber warning instead: "No knowledge base on this brand's address." What you can still set here is presentation only: the tab's label, whether it appears at all, and whether a link to the brand's documentation is shown at the end of the help section.

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:

What dies: the widget and every conversation held in it — the dialog counts them for you ("The widget · 128 conversations"). That means the chats, their messages and events, the visitors, the session replays, and any banner campaigns configured for this widget. There is no undo.What survives: the brand and everything it owns. Your public address and its knowledge base keep working, as do the documentation, the knowledge, the products and the Vex AI — the customer's pages simply lose the chat bubble, and you can add a widget back later.Deleting only the widget happens on a plain click once you have read the count. Below it sits an unticked box, "Also delete the whole brand", which expands into the full brand-deletion confirmation: real counts of everything that would go, a warning about any phone numbers that would be left unassigned and still billing, and a field where you must type the brand's name. That box is a shortcut, not the only way. Brand settings → Danger zone deletes a brand directly at any time and takes the widget with it. Use this dialog when you want the narrower thing — the chat bubble off a site, with the brand and everything it owns left running.

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.

Identity verification sits below the script, on the same tab, because the person pasting the snippet is the person who has to sign user ids on the server. If your site has signed-in users and you plan to call 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

Colour, text and layout changes appear in the preview the moment you make them — you do not have to save to look. Saving is what makes them real for visitors. The one setting that behaves differently is the roadmap board: changing it reloads the page after the save so the preview can pick up the new board.

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.

WhatWhere it is now
Public web address (the widget URL)Brand → Brand settings → Public address
Interface languageBrand → Brand settings → General
Which AI answersBrand → Vex — the brand has one, and the widget uses it
Which knowledge base the Help tab showsBrand → Knowledge
Which documentation is linkedBrand → Knowledge
Which forms a card can openTickets → (the board) → Forms — forms live on the board they feed

Automate with AI

You can also change a widget through Copilot or any MCP-compatible client — describe the change you want and the AI applies it. See the Widget Tools reference for what it can do. Note that connecting a chatbot to a widget is no longer one of those things: the brand owns the AI, and changing which knowledge base a brand publishes is now a bookkeeping change that deletes nothing.