Custom CSS

For full control, the Customize → Advanced section gives you two plain-CSS blocks: one for the toggle button and one for the explanation popup. They override the friendly options above and go live when you save.

Two scoped blocks #

You write declarations as if you were inside a rule's braces. Internally they're injected as:

.he-fab { /* your toggle button CSS */ }
.he-pop { /* your explanation popup CSS */ }

So a button block like this:

width: 56px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

&:hover {
  transform: scale(1.05);
}

…becomes .he-fab { … } with a nested &:hover. Native CSS nesting works, so you can style states and child elements.

It's safe by design #

• Scoped to the widget's Shadow DOM. Your selectors can't reach, or be reached by, the rest of your page. No leakage in either direction.
• Server-sanitized. Dangerous constructs (@import, javascript:, etc.) are stripped before anything is stored.
• Length-capped to keep things sane.

Useful hooks #

Inside the popup block you can target sub-elements with nesting, e.g. the heading:

& h4 {
  letter-spacing: 0.08em;
}