Branding, Menu & Dark Mode

Branding

The branding section in the widget editor's Appearance tab lets you replace the default assets with your own.

Logo

Your logo appears in the top-left corner of the home screen header. Upload a WebP, PNG, or JPEG 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 bot. This is a circular image — square uploads are cropped to a circle.

"Powered by Yaplet" Badge

A small badge with the Yaplet logo and text appears at the bottom of the home screen. On paid plans, you can toggle it off:

Go to Widget Editor → Home tab
Find Hide Branding and switch it on

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 toggle in its respective section of the widget editor:

Messages — Widget Editor → Messages tab
News — Widget Editor → Features tab → News section
Roadmap — Widget Editor → Features tab → Roadmap section
Help — Widget Editor → Features tab → Help section

Tabs tied to external resources are auto-hidden when the resource isn't connected. For example, the Help tab hides automatically if no knowledge base is linked, and the Roadmap tab hides if no roadmap board is linked.

Custom Tab Labels

Every tab has a 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. You can configure two properties:

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

The launcher button color is controlled by the Launcher Button color in the Color System — it defaults to your accent color. The icon color (white or black) adapts automatically based on the button's brightness.

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.