Appearance & Theming

What You Can Customize

The Appearance tab of the chat widget designer gives you control over how your widget looks and feels. You reach it at Brand → (your brand) → Chat widget → Appearance — see the Chat Widget dashboard article. Changes appear instantly in the live preview as you edit.

Launcher Button

Style the floating chat button independently — solid color or linear gradient with up to three stops and a custom angle, plus a manual icon color picker.

Color System

Set the background, accent, text, border, and message colors for both the general widget and the home screen. Use preset themes or auto-generate a full palette from two main colors.

Branding, Menu & Dark Mode

Pick a logo and avatar from your organisation's shared image library, show or hide navigation tabs, rename tab labels, toggle the "Powered by Yaplet" badge, and set the launcher's screen position and icon style.

How It Works

Your widget's appearance is split into two color groups and a set of config options:

General colors — applied to chat screens, messages, inputs, and borders throughout the widget
Home screen colors — applied to the header, background decorations, and home cards
Config options — branding images, menu tab visibility, launcher position, and background style

When you pick a Background and Accent color, Yaplet can auto-generate all remaining sub-colors (text shades, borders, message bubbles) so everything stays visually consistent. You can also fine-tune any individual color.

All changes preview in real time inside the designer. Hit Save when you're happy with the result.

Redesign with AI

The Appearance tab also holds a Redesign with AI section. Give it a website address and it proposes a matching set of colors, background style, greeting, launcher colors and images.

The result is dropped into the unsaved form, not written to your live widget: the toast that appears says "Have a look at the preview — nothing is saved until you press Save." Nothing reaches visitors until you save it yourself.

Preset Themes

Seven built-in color templates give you a quick starting point:

Theme	Style	Background	Accent
Classic Blue	Light	`#FFFFFF`	`#083BD9`
Midnight Sky	Dark	`#1F262E`	`#083BD9`
Crimson Night	Dark	`#050608`	`#9E0000`
Twilight Horizon	Dark	`#282D33`	`#7642D3`
Sunset Sands	Warm	`#E6E6E6`	`#FFB611`
Sunset Gradient	Gradient	`#FFFFFF`	`#FF6B35`
Aurora	Gradient	`#0F1424`	`#7C3AED`

The two gradient templates ship with a built-in launcher gradient. You can apply a template to general colors, home colors, or both at once — then customize from there.