Why your stylesheet cannot touch it, and what to use instead

A CSS rule targeting the widget has no effect, or the widget looks untouched by a global style that changes everything else on the page.

In rough order of how often each one turns out to be the answer. Work down rather than across: each carries a way to tell whether it is yours before you change anything.

• 1

  The launcher lives in a closed shadow root

  Why

  The loader attaches a shadow root in closed mode and puts the launcher inside it. Styles from the page do not cross that boundary, and script on the page cannot reach into it either.

  How to confirm it is this one

  Inspect the element. You will find a host element carrying a data attribute for the widget, and a shadow root you cannot open from the console.

  Fix

  Use the appearance settings, which are what the launcher is built from: colours, radius, launcher radius, icon, label, position and offsets. Anything you can express there will apply.

• 2

  The shadow root resets inherited styles on purpose

  Why

  The first rule inside the shadow root sets everything to its initial value, so the widget looks the same on a site with an aggressive global stylesheet as on a site with none.

  How to confirm it is this one

  Change a global font or colour on your page and note that the widget does not move with it.

  Fix

  This is the guarantee rather than the bug: the widget cannot collide with your interface and your interface cannot break it. Set the typography and colours in the appearance settings if you want it to match.

• 3

  The panel is a different document entirely

  Why

  The conversation runs in a frame from another origin, so your stylesheet is not merely blocked from it, it was never loaded in the same document.

  How to confirm it is this one

  Inspect the panel and note that it is an iframe rather than markup in your page.

  Fix

  Use the custom CSS field in the appearance settings, which is delivered with the panel and applies inside it.

• 4

  Custom CSS was rejected by validation

  Why

  The custom CSS field refuses a few constructs outright, including imports, javascript URLs, and url() references that are not https or an inline image. A background image URL is an exfiltration channel, which is why.

  How to confirm it is this one

  Saving the appearance returns an error naming a disallowed construct rather than saving silently.

  Fix

  Remove the construct it named. Inline an image as a data URL, or host it over https and reference it that way.

If you need the widget to sit somewhere other than a corner, the appearance settings control the side and both offsets, and nothing else about the position is adjustable. That is a limit rather than a bug: a launcher that can be placed anywhere is a launcher that can be placed on top of your checkout button.

Why a closed shadow root rather than an open one?

An open one would let any script on the page reach in and change the widget, including a script that got there without your knowing. Closed removes the whole category, and the cost is that you style it through settings rather than through CSS.

Can I change the launcher icon to my own?

Yes, through the appearance settings, which take an icon URL. Note that the image is subject to your page's own image policy, so a strict content policy needs the host allowed.

How much can custom CSS actually change?

It applies inside the panel, so the conversation surface is genuinely restylable. The launcher is built from the settings rather than from CSS, so it is adjustable rather than arbitrary.