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.
The Six Tabs
| Tab | What you set there |
|---|---|
| Design | Logo and bot avatar, widget color, brand colors, buttons & messages, cards, corners, the Home screen background layers, the launcher, Starting points, Redesign with AI |
| Home | Greeting, welcome message, team avatars, hide branding, and the home-screen cards |
| Messages | Expected reply time, email capture, conversation ratings |
| Features | The widget's name and start screen, session replays, Help, News, Roadmap, inbox access, deleting it |
| Install | The embed script, and identity verification |
| Languages | Where 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:
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:
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.
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
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.
| What | Where to find it |
|---|---|
| Public web address (the widget URL) | Brand → Brand settings → Public address |
| Interface language | Brand → Brand settings → General — and each visitor can pick their own, see Widget Languages |
| 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 |