Customizing Your Widget Appearance and Branding

The Marketing Agent widget is the first thing visitors see on your website. Customizing its appearance ensures it matches your brand identity and uses the right messaging to encourage interaction.

This guide walks you through the core widget appearance settings available in Docket.

Prerequisites

• Access to app.docketai.com

• At least one agent created

Accessing Widget Customization

1. Log in to app.docketai.com.

2. Click Marketing Agent Configuration in the left sidebar.

3. Select the agent you want to configure.

4. Click the Widget tab.

The page header reads Widget Behavior and Access with the description: "Customize your widget's appearance, behavior, and domain access."

The first section is Customize Widget with the description: "Match your widget to your brand colors and messaging."

Live Preview

The left side of the Customize Widget section displays a live preview panel showing how the widget button will look on your site. As you make changes to colors, text, and position, the preview updates in real time so you can see the result before saving.

Widget Settings

Widget Position

Choose where the widget button appears on your website.

Common positions include left, center, or right placement near the bottom of the page.

Select the position that works best with your website layout. Avoid placing the widget where it might overlap with other fixed elements like cookie banners or chat buttons.

When choosing a position, test the deployed page on desktop and mobile. The best placement is visible without covering primary CTAs, form fields, cookie banners, or existing chat tools.

Colors

Set two brand colors to style the widget:

• Primary — The main widget color (button background, header, accents). Click the color swatch to open the color picker.

• Secondary — Supporting color for contrast elements. Click the color swatch to set.

Choose colors that match your brand identity while maintaining good contrast for readability.

Use the theme and color controls together: start with the theme that best matches your site, then adjust primary and secondary colors for brand fit.

Widget Primary Text

The main call-to-action label displayed on the widget button. This is the text visitors see before they click.

Choose text that is action-oriented and relevant to your visitors. Examples:

• "Talk to AI Agent"

• "Ask us anything"

• "Get a demo"

• "Chat with sales"

Keep the label short enough to fit inside the widget button on mobile.

Widget Default Welcome Text

The initial greeting text shown when the widget first appears or before the visitor starts a conversation.

Use this to set expectations or create urgency. Examples:

• "Hi! How can I help today?"

• "Ask about our latest features"

• "Let's find the right plan for you"

The welcome text should match the page context. A pricing page can use a more direct prompt, while a product page can invite questions about features or use cases.

Widget Sounds

Toggle audio feedback on or off:

• On — The widget plays subtle sound effects during interactions.

• Off — No audio feedback from the widget.

Consider your audience. B2B websites targeting professionals in office environments may want sounds off by default.

If your website is used in quiet work environments, disable sounds unless audio feedback is part of the experience you want visitors to have.

Saving Changes

After making your customizations:

1. Review the live preview to confirm the appearance.

2. Click Save to apply changes.

3. To undo unsaved changes, click Discard.

Changes apply after they are saved. Test the deployed widget after changing appearance settings.

Verify Widget Appearance

1. Reload the Widget tab and confirm the saved position, colors, text, welcome text, and sound setting persist.

2. Open Preview and confirm the widget matches the saved controls.

3. Open a deployed page on desktop and mobile.

4. Confirm the button text fits, the widget does not cover important page controls, and text remains readable against the selected colors.

The configuration is ready when the preview and deployed widget match the saved appearance on both viewport sizes.

Per-Agent Widget Customization

Each agent has its own widget appearance settings. This means you can style different agents differently — for example:

• A homepage agent with your primary brand colors and a welcoming CTA.

• A pricing page agent with a different color accent and a CTA like "Get pricing help."

• A product page agent with a CTA like "See a demo" and product-specific welcome text.

Best Practices

• Keep button text short and action-oriented. "Talk to AI Agent" or "Get help" outperform generic text like "Click here."

• Use your brand colors. The widget should feel like a natural part of your website, not an overlay from a third-party tool.

• Test on mobile. The widget position and text may render differently on smaller screens. Preview on mobile devices before going live.

• Avoid overlap. If you have other fixed elements (cookie banners, live chat, back-to-top buttons), position the widget where it won't conflict.

• A/B test your CTA text. Small changes to button text can significantly impact engagement rates. Try different messages across different agents and compare results.

Troubleshooting

Related Articles

• Understanding Widget Behavior and Access

• Whitelisting Domains for Your Marketing Agent Widget

• Configuring Widget Behavior and Page Targeting Rules

• Troubleshooting Widget Not Loading or Displaying