Spacing and custom CSS
Some themes put their own bar in the widget's corner — a mobile navigation, a cookie banner, a back-to-top button. Spacing from the edges (Appearance → Button) moves the whole widget family together: the button, the chat window it opens, and the greeting bubble all shift as one, so nothing detaches from anything. Set Bottom to roughly the height of whatever is in the way — a typical mobile nav bar needs 80–90px.
Custom CSS (the last card on the Appearance page) is the escape hatch for everything the settings do not cover: different spacing on mobile only, a shadow, an animation, a z-index fight with another app. Your rules are added after the widget's own stylesheet, so at equal specificity your declaration wins. The field checks that what you paste is actually CSS — prose and HTML are rejected with a reason, because a browser would swallow them silently and you would never learn why nothing changed.
For example, to lift the button on phones only:
@media (max-width: 768px) {
.ww-btn { bottom: 84px; }
.ww-chat { bottom: 150px; }
}Common questions
Which classes can I target?
These hooks are stable:
.ww-btn — the launcher button. Modifiers: .ww-btn--left / .ww-btn--right (position), .ww-btn--sm / .ww-btn--md / .ww-btn--lg (size), .ww-btn--offline (outside business hours), and .ww-btn__label (the pill text).
.ww-chat — the chat window. Inside it: .ww-chat__header, .ww-chat__name (your store name), .ww-chat__greeting, and .ww-chat__cta (the green send button).
.ww-teaser — the greeting bubble, with .ww-teaser__text and .ww-teaser__x (its close button).
Deeper internals exist but may change between releases — style the hooks above and your CSS keeps working.
I moved the button with CSS — why didn't the chat window follow?
CSS rules move only what they name. The Spacing settings move the family together; with custom CSS, set .ww-btn and .ww-chat (and .ww-teaser if you use the greeting bubble) yourself — the chat window usually wants the button's bottom plus about 72px.
My rule doesn't seem to apply.
Check specificity: the widget styles elements with a single class, so a single class on your side is enough. If a theme rule with higher specificity is in the way, add !important — in this field, that is a legitimate tool, not a smell.
Can CSS here break my store?
It only ships to your storefront inside one style tag, and the widget ignores it entirely if it is empty. Styling .ww- classes affects only the widget; you can also target your own theme's elements from here, though the theme editor is usually the better home for that.