Launcher Button

Overview

The launcher is the floating bubble visitors click to open the widget. It has its own Launcher section at the bottom of the Design tab — "Configure how the widget launcher appears on your site." — with six rows: Position, Icon, Bubble color, Bubble shape, Icon color and Highlight ring.

The bubble has a look of its own. It is the one piece of Yaplet that sits on your website rather than inside the chat panel, so it should match your page — which is not always what the inside of the widget wants. That is why it has its own colors and its own shape, and why you can have square panel corners with a round bubble, or a bubble in a color that appears nowhere inside the widget.

Bubble Color

"Follows your brand colors until you set it, so it can match your site." By default the row reads "Following your brand colors." — the bubble takes your brand colors the way Buttons & messages paints them: your main brand color with One color, a gradient of your brand colors in the order you listed them with Gradient. Change a brand color and the bubble follows.

Copy my brand colors takes the colors the bubble has at that moment, puts them in the row and hands them to you to edit: one, two or three colors — "One color is a plain bubble. Two or three become a gradient." Add one with Add a color (up to three), drop one with Remove. The gradient's angle is fixed; there is no angle control. The row then reads "Set by hand.", and the bubble keeps those colors even when you change your brand colors later. Follow my brand again releases it.

A Starting point sets the bubble's own colors as part of its look. Redesign with AI with Replace it releases a bubble you had set by hand, so it follows the new brand colors.

Bubble Shape

How round the bubble is — "Separate from the widget's corners, so it can match your website."

Shape	What it looks like
Circle	A full circle. What almost every site uses.
Soft	A squircle: round, but with a hint of a corner.
Rounded	A rounded square. What a new widget starts with.
Square	Barely rounded, close to a true square.

New widgets start with a Rounded bubble; a widget with no shape saved shows a Circle.

Icon Color

"The color of the icon drawn on the bubble." The icon is colored automatically: the widget picks the color that reads best against every stop of the bubble, preferring a light icon wherever one is readable, and never accepting less than 3:1 contrast. The row shows the color in use and, under it, the result — "Reaches 4.8:1 on the bubble — comfortably visible."

Pick your own color and it is used exactly as you set it, even when it is hard to see; the row then warns you in so many words: "Only reaches 1.9:1 on the bubble, so it will be hard to see. It is used exactly as you set it." The arrow button beside the picker (Match automatically) returns to the calculated color.

Highlight Ring

"A thin line that travels slowly around the bubble's edge, to draw the eye to it." A switch turns it on and off:

Off — "Off. The bubble has no ring."
On — "On — the line runs in the color below." A color picker appears. The ring starts in a color that shows up on your bubble — the first of your brand colors that stands out against it, otherwise the icon color — and you can change it.

If the ring's color is too close to the bubble's own, the row warns you: "This color is almost the same as the bubble's own, so the ring will barely show. Pick something lighter or darker if that was not deliberate."

Visitors who have asked their device for reduced motion see the bubble without the ring. New widgets start with the ring on, in white, and every starting point turns it on in a color of its own.

The Panel's Corner

The bubble does not follow the widget's Corners setting, but the outer corner of the panel it opens does, so the panel agrees with the cards, buttons and chips inside it — tightest with Square, roundest with Pill.

A widget whose Corners were never set keeps the panel's standard corner. Choosing any preset, Rounded included, makes the panel follow it.

Position & Icon Style

Position — "Screen corner for the button" — puts the bubble in the Bottom Right (default) or Bottom Left corner of the page. Icon — "Icon shown on the launcher" — chooses the glyph drawn on it: Message Bubble or AI Icon; each option button shows the glyph it stands for. New widgets start with the AI Icon.

The Loading Screen

While the widget is loading for the very first time, the panel is painted with the same color as the Home screen's background — flat or gradient — with a small spinner on it, so nothing jumps when the widget takes over. Returning visitors open straight into their last Home screen.

The Dashboard Preview

The preview beside the designer draws the bubble itself, in the same colors, with the same icon, the same shape and the same highlight ring as the page will, so what you see there is what visitors get.