Themes
Customize the messenger widget to match your brand. Themes are configured in the dashboard under Settings > Messenger > Themes.
Creating a theme
Section titled “Creating a theme”Each theme has the following options:
| Option | Description |
|---|---|
| Name | Theme identifier |
| Mode | Light or Dark |
| Primary color | Brand color used for the launcher, message bubbles, and buttons |
| Launcher position | Bottom offset and left/right placement |
| Launcher icon | Optional custom image for the launcher button |
| Auto activation | When this theme should activate: Always, Light only, Dark only, or Never |
Light and dark themes
Section titled “Light and dark themes”You can assign a light theme and a dark theme for your workspace. When both are configured, the widget automatically switches based on the user’s system preference.
Switching themes at runtime
Section titled “Switching themes at runtime”Use the JavaScript SDK to switch between named themes:
optlo.setTheme("dark");This switches to the theme with the matching name from your dashboard configuration.
You can also force a theme using the data-theme attribute on the container element. See Installation.