Customizing Widget Styling

Last updated: August 11, 2026

Use Docket’s widget appearance settings to match the Marketing Agent widget to your website brand. The supported styling controls include the widget theme, primary color, secondary color, widget position, button text, welcome text, and widget sounds.

Overview

The widget is styled through Docket’s saved appearance configuration. These settings are applied when the widget loads on your website, so you do not need to edit your website CSS to change the core widget branding. Use the Widget tab in Docket to update the supported appearance options, then save and test the deployed widget on your site.

What You Can Customize

Setting

What it controls

Theme

The widget’s light or dark visual mode.

Primary color

The main brand color used for key widget accents.

Secondary color

The supporting brand color used alongside the primary color.

Widget position

Where the widget appears on the page.

Widget primary text

The call-to-action text visitors see before opening the widget.

Widget default welcome text

The greeting or prompt shown when the widget opens.

Widget sounds

Whether the widget plays interaction sounds.

Before You Start

  • You need access to Docket.

  • You need an existing Marketing Agent.

  • The widget must be installed on the website where you want to test the styling.

  • Confirm your brand colors before updating the widget.

Update Widget Styling

  1. Log in to Docket.

  2. Open Marketing Agent Configuration.

  3. Select the agent you want to update.

  4. Open the Widget tab.

  5. In Customize Widget, update the theme, colors, position, text, welcome message, or sounds.

  6. Review the live preview.

  7. Click Save.

  8. Refresh the deployed website and confirm the widget reflects the saved styling.

About Custom CSS

Docket supports widget styling through the appearance settings in the product. Custom CSS overrides are not the recommended setup path for the widget. If the widget does not match your site after updating the supported appearance controls, adjust the saved widget settings first instead of targeting widget internals from your website stylesheet.

Best Practices

  • Use brand colors with enough contrast for readability.

  • Keep the primary widget text short so it fits on desktop and mobile.

  • Test the widget on pages that already have fixed elements, such as cookie banners or chat tools.

  • Use a consistent widget style across agents unless each agent has a specific page or audience.

  • Refresh the deployed page after saving changes to confirm the live widget matches the preview.

Troubleshooting

Issue

What to check

Saved colors do not appear

Confirm the changes were saved, then refresh the deployed page.

Widget overlaps another page element

Change the widget position or adjust the other fixed element.

Button text is clipped

Shorten the widget primary text.

Styling looks different on mobile

Test the widget on a narrow viewport and adjust position or text.

Website CSS does not affect the widget

Use Docket’s widget appearance settings instead of custom page CSS.