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 six tabs and a live preview: Design, Home, Messages, Features, Install and Languages.

Where to Find It

Open it at Brand → (your brand) → Chat widget. Its web address is /dashboard/widgets/<widgetId>. 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 Six Tabs

TabWhat you set there
DesignLogo and bot avatar, widget color, brand colors, buttons & messages, cards, corners, the Home screen background layers, the launcher, Starting points, Redesign with AI
HomeGreeting, welcome message, team avatars, hide branding, and the home-screen cards
MessagesExpected reply time, email capture, conversation ratings
FeaturesThe widget's name and start screen, session replays, Help, News, Roadmap, inbox access, deleting it
InstallThe embed script, and identity verification
LanguagesWhere your own texts stand in each language, and the two language switches

Design

The tab has three sections, top to bottom: Widget, Home screen and Launcher. The full reference is Appearance & Theming.

Widget

"The panel itself: your images, your colors, and the shape of everything in it." — every color in the widget is derived from these and checked for readability:

  • Logo (shown at the top-left of the Home screen) and Bot avatar (the picture beside the AI's replies) — both chosen through a shared image picker titled "Your images" — "Everything this organization 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. With no logo the Home screen shows none; with no bot avatar the AI's replies carry the AI mark on your brand color.
  • Widget color — the widget's own page color: six swatches from Paper to Ink, or any color of your own. It decides whether the widget reads light or dark.
  • Brand colors — one to three, most important first. The first paints buttons, links and the active tab; the others join the gradients and the Home screen background.
  • Buttons & messages — One color or Gradient: how your brand colors are painted on buttons, on your visitors' own messages and, until you give it colors of its own, on the launcher bubble.
  • Cards — Neutral, Subtle, Medium or Strong: how much brand color is washed into every card, chip and panel.
  • Corners — Square, Rounded, Soft or Pill: one scale for the panel and everything in it. The launcher bubble has its own shape.

A small icon in the section's header shows whether every text stays readable; a warning bar appears only when some text falls short, with a Details list of the measured pairs. The header also holds Starting points — twelve finished looks, with Undo — and Redesign with AI.

Home screen

The background behind the greeting: four layers painted over each other — Color, Photo, Glow and Lines — plus Reaches, how far down they go. Every layer can be switched off and every combination works. See Home Screen Background.

Launcher

The floating button on your customer's site that opens the widget: which corner it sits in (Bottom Right or Bottom Left), which icon it shows (Message Bubble or AI Icon), its Bubble color — following your brand colors, or set by hand with one to three colors — its Bubble shape (Circle, Soft, Rounded or Square, separate from the widget's Corners setting), its Icon color, picked automatically for contrast or pinned by you, with the measured contrast printed underneath, and an optional Highlight ring that travels around the bubble's edge. See Launcher Button.

Redesign with AI

The button opens the same AI setup dialog used elsewhere in the dashboard. Give it a website address, choose Keep what's there or Replace it if the widget already has a design, and look at the result in the live preview — nothing is written until you press Save Changes. With Replace it it sets the colors, Home background, corners, card style and launcher look. Either way it writes quick buttons about your business; they are translated into the other languages after you save. It writes no greeting or welcome line. The full description, including the run limits, is on Appearance & Theming.

Home

Home Screen Settings

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; the switch appears only when your plan or add-on includes Remove branding).

You type the greeting and the welcome message in your own language; the other languages are behind the globe button next to each field. A visitor reads their own language when you have written it, otherwise your own text, and an empty field shows Yaplet's built-in wording in the visitor's language. See Widget Languages.

Home Cards

The interactive cards on the home screen. Two of them are fixed and always come first, in this order: the AI Assistant — the "Ask me anything..." box, with the quick action buttons you define under it — and the Active Conversation. Neither can be moved or removed. Below them you arrange the six types you own: Help Articles, Documentation, Form, News & Updates, External Link and Start a Conversation. 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: the Reply Time shown to visitors, picked from eleven set options rather than typed, whether it asks visitors for an email address, and whether it collects a rating after a conversation.

The tab names and the rating question are Yaplet's own: the widget says both in the visitor's own language.

Features

General

The widget's name — the internal label you see in the dashboard, nothing the visitor ever reads — and its Start Screen: whether the widget opens on the Home screen or straight in the chat.

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.

Help

This section does not pick 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 set here is presentation only: whether the tab appears at all, and whether a link to the brand's documentation is shown at the end of the help section.

News Feed

Whether the news tab is visible. Its name is Yaplet's, said in the visitor's language.

Roadmap

Whether the roadmap tab is visible, and which feature-request board it shows. This board picker is the one content picker on the widget, because boards belong to the organization rather than to a brand. Changing it reloads the page after you save.

Inbox access

A list of everyone in your organization 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.

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.

Languages

The two language switches sit here: Follow the visitor's browser language — on for new widgets — opens the widget in the visitor's browser language when it is one of the 38 the widget speaks, and Language selector — visible by default — shows the globe button on the home screen so visitors can change language themselves. The tab also shows, language by language, how many of your own texts are translated. See Widget Languages.

Live Preview

Color, text and layout changes appear in the preview the moment you make them — you do not have to save to look. Clicking an option in the Design tab's Home screen section also takes the preview to the Home screen. Saving is what makes the changes 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 Belongs to the Brand

Several things belong to the brand rather than to the widget. Changing any of them destroys nothing and costs nothing, and none of them asks you to confirm deleting or regenerating AI training data.

WhatWhere to find it
Public web address (the widget URL)Brand → Brand settings → Public address
Interface languageBrand → Brand settings → General — and each visitor can pick their own, see Widget Languages
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. The AI agent belongs to the brand, not to the widget: the AI can make one of your AI agents the one that answers for the widget's brand, or release it (the agent itself is kept). Changing which knowledge base a brand publishes is likewise a bookkeeping change that deletes nothing.