Branding, Menu & Dark Mode

Branding

The Branding section at the top of Brand → (your brand) → Chat widget → Appearance lets you replace the default images with your own. Both fields open the same shared picker, a modal titled "Your images": "Everything this organisation has uploaded. Pick one to reuse it, or add a new one." Uploading through it adds the file to the library, so the same logo never has to be uploaded twice.

Logo

Your logo appears in the top-left corner of the home screen header. Pick one from the library or upload a PNG, JPEG or WebP image.

Use a square or wide image with a transparent background for the cleanest look. The logo is displayed inside a small container, so keep it simple and legible.

Bot Avatar

The bot avatar is the default profile picture shown for chat messages sent by your team or AI agent. This is a circular image, so a square picture works best.

Removing an Image From the Library

Removing an image from the library never breaks a live picture. If anything is still showing it, only the listing is removed and the file itself is kept, with the message "The file itself was kept — either something is still showing it, or it predates your library." If nothing is using it, the file is genuinely deleted. There is also a per-organisation ceiling; reaching it gives "Your image library is full — delete an image before adding another."

"Powered by Yaplet" Badge

A small badge with the Yaplet logo and text appears at the bottom of the home screen. Turning it off needs the Remove branding add-on, which grants the Brands.Branding right.

The switch is called Hide Branding, and it belongs on Brand → (your brand) → Chat widget → Home
It does not currently appear there, even on accounts that have bought the add-on — the screen still checks for the right under its retired name, so the switch is never drawn. If you have paid for Remove branding and cannot find it, contact support; you are not overlooking a setting

Brand Logo vs Widget Logo

These are two different pictures. The brand's logo (Brand settings → Brand images) is what appears at the top of the public knowledge base, documentation and roadmap pages. The widget's logo, set here, is what appears inside the chat panel.

Menu Tabs

The bottom navigation bar gives visitors quick access to different sections of your widget. There are five possible tabs:

Tab	Default Label	Always Visible?
Home	Home	Yes — cannot be hidden
Messages	Messages	No
News	News	No
Roadmap	Roadmap	No
Help	Help	No

The bottom navigation bar only appears when two or more tabs are enabled. If only the Home tab is active, no navigation bar is shown.

Show or Hide Tabs

Each tab (except Home) has a Show on Navbar switch in its own section of the designer:

Messages — Chat widget → Messages tab
News — Chat widget → Features tab → News Feed section
Roadmap — Chat widget → Features tab → Roadmap section
Help — Chat widget → Features tab → Knowledge base section

A tab that is switched on stays in the navigation bar whether or not it has anything to show, so check its source as well as its switch. The Help tab's content depends on whether the brand's public web address has a knowledge base on it — not on any widget-level setting. The Roadmap tab depends on a roadmap board picked on the widget itself; that picker is the only content picker left on the widget.

Custom Tab Labels

Every tab has a Menu Title field where you can replace the default label. For example, rename "Help" to "Support" or "News" to "Updates" — the label you set is what visitors see in the navigation bar.

Launcher Button

The launcher is the floating button visitors click to open your widget. Two properties are configured in the Launcher section of the Appearance tab:

Setting	Options
Position	Bottom Right or Bottom Left
Icon	Message Bubble (chat icon) or AI Icon (person/sparkle)

The launcher button's color, gradient, and icon color are configured separately in their own section at the top of Theme & Colors. See Launcher Button for solid/gradient mode, color stops, angle, and icon color controls.

Dark Mode

The widget doesn't have a separate "dark mode toggle." Instead, dark mode is achieved through your color configuration. To create a dark-themed widget:

Pick a dark template

Open the Templates picker in the Appearance tab and choose Midnight Sky, Crimson Night, or Twilight Horizon — all three are dark themes.

Or set colors manually

Set a dark Background color (e.g., #1F262E) and click Auto-Generate. The system will detect the dark background and generate light text, appropriate borders, and matching sub-colors automatically.

Adjust the home screen

Apply the same template to home colors (or set a dark Top Header and Main Body color), then auto-generate the home sub-colors.

The auto-generation logic is luminance-aware. It picks light grays for text on dark backgrounds and dark grays for text on light backgrounds — so switching between light and dark is just a matter of changing the two main colors and clicking Auto-Generate.

Because the color system fully controls the widget's appearance, you can create any visual style — light, dark, branded, high-contrast — just by changing the color values.