Open your widget settings
In the dashboard's left menu, open Brand → (your brand) → Chat widget. That takes you straight into the designer. There is no Widgets list and no "New widget" button: a chat widget exists because a brand has one, and a brand has at most one.
The designer has six tabs — Design · Home · Messages · Features · Install · Languages. For a first-time setup you only need Design and Home. Editing this screen needs the Brands permission (administrators see it listed as "Brands & chat widgets").
1. Check the widget's name
The widget's name lives in the General section of the Features tab. It is an internal name, for finding the right widget in your own dashboard — visitors do not see it.
Your public web address is not here either. It belongs to the brand, at Brand → (your brand) → Brand settings → Public address, and changing it is confirmed with a warning because every link already shared to the old address breaks. The widget's language is a brand setting too (Brand settings → General → Language) and is pushed down to the widget automatically — though it is only the starting language: the widget speaks 38, and visitors can switch with the globe button. See Show your widget in your visitors' language.
2. Pick your colors
Switch to the Design tab. The Widget section at the top is where the whole look is decided. Its first two rows are your Logo and Bot avatar; then come your colors:
- Widget color — the widget's own page color. Six ready swatches run from Paper (white) to Ink (near-black), or pick any color of your own. This is what makes the widget read light or dark.
- Brand colors — one to three, most important first. The first one paints the buttons, the links and the launcher bubble; a second and third join the gradients and the home screen background.
- Buttons & messages — whether your color is painted on the buttons, your visitors' own messages and the launcher bubble as One color or as a Gradient.
Everything else — every text color, every surface, the chips, the borders — is calculated from those, and each one is checked for readability against the exact background it sits on.
In a hurry? Starting points in the section header applies one of twelve finished looks — colors, home screen background, card style, corners and launcher bubble together — with an Undo if you don't like the one you tried.
The preview on the right updates in real time so you can see the result before saving.
3. Choose the launcher position
Still on the Design tab, scroll down to the Launcher section and find Position. You can place the launcher button in the bottom-right or bottom-left corner of the screen.
Bottom-right is the default and works well for most sites. Choose bottom-left if your site already has important UI elements in the bottom-right corner (a cookie banner, a back-to-top button, etc.).
The same section sets the bubble's own look, because the bubble sits on your website rather than inside the widget: its Bubble color (it follows your brand colors until you press "Copy my brand colors"), its Bubble shape — Circle, Soft, Rounded or Square, separate from the widget's own Corners — and its Icon color, which is picked automatically for contrast and prints the measured result underneath. The same section has the Highlight ring: a thin line that travels slowly around the bubble's edge. New widgets start with a Rounded bubble and a white ring.
The home screen background, in four layers
Below the Widget section, the Home screen section builds what sits behind the greeting out of four layers painted over each other. Each layer can be switched off and every combination works, so nothing is ever greyed out because of something else you picked. Click an option and the preview switches to the home screen to show you the result straight away:
- Color — what is painted behind the greeting: None, Tint, Solid or Gradient.
- Photo — a picture of your own over that color. It is on for as long as a picture is uploaded, and the shapes are still drawn over it.
- Glow — soft blurred shapes in your brand colors: None, Streaks, Spotlight or Blobs. How strong they are is worked out for you from whatever they sit on, so they always show.
- Lines — thin crisp lines over the glow: None, Verticals, Grid, Rings, Squares or Both.
- Reaches — how far down the whole stack goes: Top only, a band behind the greeting that fades into the page, or Whole screen, including the cards and the navigation.
Two more rows, at the end of the Widget section, finish the shape of the widget. The defaults are sensible, so you can skip them on a first setup:
- Cards — how much of your brand color is washed into cards and chips: Neutral, Subtle, Medium or Strong.
- Corners — one scale for the panel, the cards, the buttons, the inputs, the chips and the navigation: Square, Rounded, Soft or Pill. The launcher bubble has its own shape and does not follow it.
4. Write your greeting
Open the Home tab. This is the screen visitors see when they first open the widget — and the greeting is the first thing they read.
You'll set two short lines:
- Header Greeting — the big, friendly text at the top, along the lines of "Hi there 👋". Keep it short — one short sentence or a single phrase works best. Emoji are welcome.
- Welcome Message — the subtitle right below the greeting. Use this to set expectations: invite a question, mention your reply time, or point visitors at a specific resource.
Both fields are short and live-preview on the right, so iterate until it sounds like you. Write them in your own language: the other languages are behind the globe button next to each field, and a field left empty shows Yaplet's built-in wording in each visitor's language.
5. Or let AI do the design for you
In the header of the Widget section, on the Design tab, there is a Redesign with AI button. Give it your website address and it matches the widget to your site: the colors, the home screen background, the corners and card style, the launcher's look, the avatar and the header logo — and it writes quick buttons about your business.
It previews rather than saves — the result lands in the form in front of you and nothing reaches your live widget until you press Save. If the widget already has a design, it asks whether to keep it or replace it first. It never uploads a home screen photo.
On the free plan, AI setup runs are limited and a preview counts as one even though it saves nothing. Let AI set up your brand from your website covers the whole wizard, including the allowance.
Images come from one shared library
Every image field in the designer — the avatar, the header logo, the Photo layer of the home screen background — opens Your images: a grid of everything your organization has already uploaded, plus an upload tile. Anything you upload joins that library, so you can reuse the same file for your brand logo or your documentation header without uploading it twice.
What is not on this screen
Two things people look for here and won't find. There are no pickers for the AI bot, the knowledge base or the documentation: content belongs to the brand, and the widget simply shows whatever is published on the brand's address. The help section of the Features tab tells you which knowledge base that is and links through to Brand → Knowledge. The one picker that did survive is the roadmap board, also on Features.
Changing content never deletes or regenerates AI training data: publishing an article is what makes the AI able to use it, and nothing needs re-attaching.
Save and preview
Click Save Changes at the top of the designer. To see the widget as a visitor would, open the Install tab — the script is shown there, ready to copy — and paste it into a test page. See Install Yaplet for the full instructions.
What's next
The widget is configured. Next up: put it on a page and send a real message — follow Send your first message from the inbox for the full end-to-end test.
If the menu around the designer is unfamiliar, what a brand is in Yaplet explains what else sits under Brand and where the old Widgets and Automation entries went.