Appearance & Theming

What You Can Customize

The Design tab of the chat widget designer holds everything about how the widget looks. You reach it at Brand → (your brand) → Chat widget → Design — see the Chat Widget dashboard article. It has three sections, top to bottom:

Section	What it holds
Widget	"The panel itself: your images, your colors, and the shape of everything in it." Logo, Bot avatar, Widget color, Brand colors, Buttons & messages, Cards and Corners.
Home screen	"The background behind the greeting, painted as layers in this order. Any combination works." Color, Photo, Glow, Lines and Reaches.
Launcher	The bubble on your website: Position, Icon, Bubble color, Bubble shape, Icon color and Highlight ring.

The header of the Widget section also holds the readability check, Starting points and Redesign with AI.

Color System

A widget color and one to three brand colors — every other color is calculated from them and checked for readability.

Home Screen Background

The four layers behind the greeting — Color, Photo, Glow and Lines — and how far down they reach.

Branding, Menu & Dark Mode

Logo and bot avatar from your shared image library, the floating dock, the "Powered by Yaplet" line, and how a dark widget is made.

Launcher Button

The bubble on your website has a look of its own: its own colors, shape, icon color and highlight ring, following your brand until you set them.

How the Design Tab Works

Every pick-one setting is a row of buttons. Rest the pointer on a button and a one-line description of that option appears. When the column is too narrow for the buttons, the row turns into a dropdown instead.

Clicking an option repaints the live preview beside the form straight away. Clicking an option in the Home screen section also takes the preview to the Home screen, so you always see the change you just made. Nothing reaches visitors until you press Save Changes.

Widget

Three choices decide every color in the widget:

Choice	What it is
Widget color	"The page color. Light or dark starts here." Six swatches, or any color of your own.
Brand colors	"The first one paints buttons and links. Up to three, in gradient order."
Buttons & messages	One color or Gradient: how your brand colors are painted on buttons, on your visitors' messages and — until you give it colors of its own — on the launcher bubble.

Surfaces, every tier of text, chips, badges, the color behind the greeting and the shapes on the Home screen are all calculated from those, and every text color is checked against the exact background it sits on. See Color System.

Two more rows set the shape of everything.

Cards — "How much of your brand color is washed into every card, chip and panel, on every tab."

Option	What it does
Neutral	"One step off the page color. Your brand color stays on buttons, links and the active tab."
Subtle	"A faint wash of your brand color. Barely there on Home, which is what keeps your messages and articles calm."
Medium	"Twice the wash. Clearly visible on Home — check your messages and articles too before you keep it."
Strong	"The most brand color the widget will paint on a card. Still a soft pastel, never your full brand color."

Corners — "One scale for the panel and everything in it." Square, Rounded, Soft or Pill. The launcher bubble does not follow it; it has its own Bubble shape.

Home Screen

The background behind the greeting is four layers — Color, Photo, Glow and Lines — plus Reaches, how far down the screen they go. Every layer can be switched off and every combination works. What each option draws is on Home Screen Background.

The background lives on the Home screen only. Messages, Help, News and Roadmap always sit on the plain widget color, so a bold background never gets in the way of reading.

Launcher

The last section sets the bubble visitors click on your website: its position, its icon, its colors, its shape, the color of its icon and an optional highlight ring. See Launcher Button.

Redesign with AI

The Widget section's header carries a Redesign with AI button (as long as the widget belongs to a brand). Give it a website address — and a short note about your business if it helps — and it designs the widget to match the site.

If the widget already has a design, the wizard asks first:

Keep what's there — "Your colors, Home background, corners and launcher stay exactly as they are." A logo or bot avatar found on the site only fills a field that is empty.
Replace it — "Apply new colors, Home background, corners, card style and launcher look. The launcher follows your new brand color." It sets the widget color, the brand colors, Buttons & messages, the Color, Glow and Lines layers, Reaches, Cards, Corners, the launcher's icon, bubble shape and highlight ring, and takes the logo and bot avatar from the site. A bubble whose colors you had set by hand goes back to following your brand colors.

Either way it writes quick buttons about your business, in your own language. They take the place of Yaplet's stock quick buttons, never of a button you wrote yourself, and they are translated into the other languages after you press Save. It writes no greeting or welcome line, and it never sets a Home screen photo.

The result lands in the unsaved form and the live preview, never on your live widget. The toast reads "New design ready" — "Have a look at the preview — nothing is saved until you press Save." — and its Undo button puts the form back as it was for ten seconds.

AI setup runs are limited. Free organizations share a lifetime pool of three runs across every place the wizard can be started from, and a preview that you never save still counts as one. Everyone, on every plan, is limited to five runs a minute.

Starting Points

Starting points, in the same header, opens a dialog of twelve finished looks — "A finished look: colors, the Home background, the card finish, the corners and the bubble. Every part of it stays editable afterwards."

Picking one sets the widget color, the brand colors, Buttons & messages, the Home screen's Color, Glow, Lines and Reaches, Cards, Corners, and the bubble's own colors, shape and highlight ring. Your logo, bot avatar, Home screen photo, the launcher's position and its icon stay as they are. A toast says "Starting point applied" and offers Undo for ten seconds.

Starting point	Widget color	Brand colors	Color	Buttons & messages	Glow · Lines	Reaches	Cards	Corners	Bubble
Monochrome	`#FFFFFF`	`#18181B`	None	One color	None · None	Top only	Subtle	Rounded	Rounded
Classic Blue	`#FFFFFF`	`#083BD9`	Tint	One color	Streaks · Both	Top only	Neutral	Rounded	Circle
Blueprint	`#F5F7FB`	`#2563EB`	Tint	One color	None · Grid	Whole screen	Subtle	Square	Rounded
Mint	`#FFFFFF`	`#0EA47A` · `#7FE0C2`	Tint	One color	Blobs · Rings	Top only	Subtle	Pill	Circle
Terracotta	`#FBF7F1`	`#B4541F`	Tint	One color	None · Rings	Top only	Neutral	Pill	Soft
Blush	`#FFFFFF`	`#D9488F` · `#F9A8D4`	Tint	Gradient	Streaks · Squares	Top only	Medium	Soft	Circle
Sunset	`#FFFFFF`	`#FF7A1A` · `#FFC93C`	Gradient	Gradient	Streaks · None	Whole screen	Neutral	Soft	Circle
Midnight	`#1E2430`	`#3B82F6`	None	One color	Blobs · None	Whole screen	Subtle	Rounded	Circle
Terminal	`#0B0D14`	`#A3E635`	None	One color	None · Grid	Whole screen	Neutral	Square	Square
Twilight	`#1B1D2A`	`#7642D3` · `#4747B9`	Gradient	Gradient	Streaks · Verticals	Top only	Subtle	Soft	Soft
Ember	`#0A0A0B`	`#B91C1C` · `#1C0A0A`	Gradient	One color	None · Squares	Whole screen	Strong	Rounded	Circle
Aurora	`#0F1424`	`#7C3AED` · `#06B6D4` · `#10B981`	Gradient	Gradient	Spotlight · None	Whole screen	Neutral	Soft	Circle

Every starting point turns the highlight ring on, each in a color that stands out on its bubble. Midnight, Terminal, Twilight, Ember and Aurora are the dark ones.

What a New Widget Looks Like

Unless AI setup has designed it from your website, a new chat widget starts with the Monochrome look: the white Paper widget color, one near-black brand color, no Home background at all (Color None, no Glow, no Lines, Reaches Top only), Subtle cards and Rounded corners. Its launcher sits bottom right and shows the AI Icon on a Rounded bubble that follows your brand color, with a white highlight ring.

A new widget has no logo and no bot avatar. Until you choose them, the Home screen shows no logo at all and the AI's replies carry the launcher's AI mark on your brand color — the widget never shows Yaplet's own logo in their place. See Branding, Menu & Dark Mode.

Your Public Pages Follow

The public knowledge base, documentation and roadmap pages on your brand's web address are painted from the same theme as the brand's chat widget, so a color changed here changes them too. Their header band is painted with the widget's Color layer. See Knowledge Base and Shareboard.