If your brand requires styling control beyond what the Console design settings offer, Rep AI can enable direct CSS customization for your chat widget. This lets your team — or your agency's developers — apply custom stylesheets to match the widget's appearance to your exact brand guidelines.
This feature is available to select enterprise merchants by request. Once enabled, your website's CSS can style the chat widget directly, giving you full control over fonts, colors, spacing, borders, and layout.
How It Works
By default, the Rep AI chat widget runs inside a Shadow DOM — a browser technology that isolates the widget's styles from the rest of your site. This prevents style conflicts, but it also means your site's CSS cannot reach into the widget.
When CSS customization is enabled for your store, the Shadow DOM is removed. The widget renders as part of your page's normal DOM, so your stylesheets can target and override any widget element.
Who Can Use This
This feature is available to enterprise merchants only. It is not visible in the Console for self-serve accounts.
To get CSS customization enabled for your store, contact your Rep AI account manager or reach out to our support team. Once enabled, only admin users on your account can turn this setting on or off.
Enabling CSS Customization
Go to Settings > Chat Widget in your Rep AI Console.
Look for the Disable Shadow DOM toggle. (This option only appears if your account has been approved for CSS customization.)
Toggle it ON.
Click Save and Preview.
The change takes effect on the next page load for your shoppers — no code deployment is needed.
Applying Custom CSS
Once Shadow DOM is disabled, you can target the widget's elements using standard CSS on your website. Here are some tips for getting started:
Inspect the widget elements — Use your browser's developer tools (right-click > Inspect) on the chat widget to see the HTML structure and class names. With Shadow DOM disabled, all widget elements are visible in the page's DOM tree.
Add CSS to your theme — Place your custom styles in your site's main stylesheet or in a dedicated CSS file. Your styles will apply to the widget just like any other element on your page.
Use specific selectors — Target widget elements using their class names to avoid accidentally styling other parts of your site. Be as specific as possible with your CSS selectors.
Test thoroughly — After applying styles, test the widget across different pages, screen sizes, and browsers to ensure everything looks correct.
Example Use Cases
Changing the widget's font to match your site's typography
Adjusting border radius, shadows, or spacing to fit your design system
Applying custom colors that go beyond the Console's color picker options
Repositioning or resizing internal widget elements for a unique layout
Matching accessibility requirements specific to your brand
Important Considerations
CSS conflicts are possible. When Shadow DOM is removed, your site's global styles can affect the widget — and vice versa. If you notice unexpected styling on your site or the widget after enabling this feature, check for overlapping CSS rules.
Updates may require maintenance. Rep AI periodically updates the widget's internal HTML structure and class names. After a widget update, some of your custom CSS selectors may need adjustment. We recommend using resilient selectors and testing after updates.
You can always revert. If you encounter issues, simply toggle Disable Shadow DOM back to OFF in your Console settings. The widget will return to its default isolated behavior on the next page load — no code changes needed.
Troubleshooting
My custom styles aren't applying — Confirm that Shadow DOM is disabled in your Console settings. Then verify your CSS selectors match the widget's current class names using browser dev tools.
The widget looks broken after I added CSS — Check for broad CSS rules on your site (e.g., rules targeting all div or button elements) that may be unintentionally affecting the widget. Add more specificity to your site's global rules or to your widget overrides.
My site's styles changed after enabling this — The widget's own styles are now part of your page's cascade. Look for any widget CSS rules that may conflict with your theme, and add specificity to resolve them.
Styles disappeared after a Rep AI update — Widget class names may have changed. Re-inspect the widget's DOM and update your selectors accordingly.