Launcher Button
Style the floating chat button independently from your widget theme — pick a solid color or a linear gradient with up to three stops, set an angle, and choose the icon color.
Overview
The launcher button is the floating button on your visitor's site that opens the widget. It has its own dedicated section at the top of Appearance → Theme & Colors so you can style it independently of the chat panel.
Solid vs Gradient
A toggle at the top of the section switches between two modes:
- Solid — one color fills the entire button.
- Gradient — a linear gradient between 2 or 3 color stops at an angle of your choosing.
When you switch to Gradient, a second stop is added automatically so you have something to start with. Switching back to Solid clears the gradient — your primary color stays.
Color Stops
In Gradient mode you can have up to three stops. The first stop is always the primary color (also used by older widget installations as the solid fallback). Add a stop with the + Add stop button; remove a stop with the small × next to it.
| Stops | Result |
|---|---|
| 1 | Solid color (mono mode) |
| 2 | Two-color linear gradient |
| 3 | Three-color linear gradient |
Angle
The angle controls the direction of the gradient sweep, in degrees, from 0° (bottom-to-top) clockwise around to 360°.
You can set it three ways:
- Type a value directly into the number field
- Drag the slider
- Click one of the preset buttons under the slider:
0°,90°,180°,270°,360°
90° produces a left-to-right gradient — usually the most natural for buttons. 135° is a popular diagonal.Icon Color
The SVG icon inside the launcher (the chat bubble or AI symbol) has its own color picker so it stays readable on any background.
Click Generate next to the icon color picker to auto-pick a contrasting color:
- 1 stop (solid) — contrast is computed against that color.
- 2 stops — contrast is computed against the first stop.
- 3 stops — contrast is computed against the middle stop.
Templates with Gradients
Two of the built-in color templates ship with launcher gradients out of the box:
| Template | Launcher style |
|---|---|
| Sunset Gradient | Orange → yellow at 135° |
| Aurora | Violet → cyan → green at 110° |
Applying a template overwrites the launcher color, gradient, and icon color with the template's values. Apply a solid template to clear an existing gradient.
Position & Icon Style
The launcher's screen position (Bottom Right or Bottom Left) and icon style (chat bubble or AI icon) are configured separately in the Launcher section further down the Appearance tab. See Branding, Menu & Dark Mode for those settings.
Legacy Widgets
Existing widgets are unchanged by this feature — they continue to render as a solid color using the pre-existing palette. Switch on Gradient mode whenever you're ready to opt in.