Customizing Widget Styling
Last updated: September 29, 2026
The Docket widget picks up its appearance from settings saved on the agent, so you can match it to your brand without touching your website CSS. Everything lives on the Widget tab, with a live preview beside the controls.
Changes apply the next time the page loads on your site, so save first and then refresh the deployed page to check the result.
What can you customize?
Setting | What it controls |
|---|---|
Widget mode | Whether the widget overlays the page (Classic) or sits as a right side panel (Co-browsing). |
Theme | Light or dark appearance. |
Primary color | The main brand color used for key widget accents. |
Secondary color | The supporting brand color used alongside the primary color. |
Widget Halo | A glow around the launcher that makes it stand out against busy pages. |
Widget Position | Bottom Left, Bottom Center, or Bottom Right. |
Widget Primary Text | The call-to-action text on the launcher, up to 40 characters. |
Widget Default Welcome Text | The greeting shown when the widget opens, up to 40 characters. |
Widget sounds | Whether the widget plays interaction sounds. |
What do you need before you start?
Access to Docket and an existing Marketing Agent.
The widget installed on the site where you want to check the styling.
Your brand colors to hand.
How do you update the widget styling?
Sign in to app.docketai.com and open Marketing Agent Configuration.
Select the agent you want to update.
Open the Widget tab.
In Customize Widget, choose the Widget mode, Theme, Colors and Widget Halo settings you want.
Set Widget Primary Text and Widget Default Welcome Text. The counter beside each field shows how much of the 40 character limit you have used.
Choose a Widget Position under the preview, and turn Widget sounds on or off.
Review the live preview.
Select Save.
Refresh the deployed page and confirm the live widget matches the preview.
What is the difference between Classic and Co-browsing mode?
Classic is the standard mode. The widget overlays your page, the way a chat launcher normally does.
Co-browsing puts the widget in a panel pinned to the right side of the page, so it stays present while the visitor keeps browsing. It suits guided journeys where the agent and the page are used together.
Co-browsing applies on desktop. On mobile there is not enough width for a side panel, so the widget falls back to Classic automatically. Plan the mobile experience around Classic even when you have chosen Co-browsing.
Can you style the widget with your own CSS?
Use the settings on the Widget tab. They are the supported way to style the widget, and they are applied when the widget loads on your site.
Custom CSS that targets the widget's internals is not supported. The widget renders inside its own shadow DOM and its internal class names can change between releases, so a stylesheet written against them can stop working after an update. If the supported controls do not get you close enough to your brand, tell your Docket contact what is missing rather than overriding the widget from your site.
What is worth checking after a styling change?
Pick brand colors with enough contrast to stay readable in both themes.
Keep the primary text short so it fits on narrow screens, well inside the 40 character limit.
Test pages that already have fixed elements, such as cookie banners or another chat tool.
Check a phone-width layout, where the launcher and other fixed elements compete for the same corner.
Keep styling consistent across agents unless an agent serves a distinct audience.
Frequently asked questions
I saved my changes but the widget looks the same.
Refresh the deployed page. The widget reads the saved settings when it loads, so an open tab keeps the previous appearance. If it still looks unchanged after a refresh, confirm you edited the same agent that is deployed to that domain.
Does styling apply per domain or per page?
Per agent. One agent uses the same appearance everywhere it is deployed. Use separate agents when you need different styling.
Can I change the button text on the widget?
Widget Primary Text controls the launcher text. Labels inside the conversation are not customizable.
Why does my widget look different on mobile?
Narrow screens have less room, and Co-browsing mode falls back to Classic. Check the position and text length on a phone-width layout.
The widget overlaps my cookie banner.
Change the Widget Position, or move the other fixed element. Both sit at the bottom of the viewport by default.
Does Widget Halo affect performance?
It is an animated glow around the launcher. If you are tuning a page for performance, it is a reasonable setting to turn off.