Custom styling
Match the widget to your brand without forking it.
The widget renders inside a Shadow DOM so your site's CSS never bleeds in, and the widget's CSS never bleeds out. To customise the look, set a small number of CSS custom properties — they cascade through the Shadow boundary because Inboard's stylesheet declares them on :host.
Brand colours
Set these as data-style JSON on the script tag, or pass style to Inboard.init():
<script
src="https://app.inboard.dev/widget/inboard-widget.js"
data-embed-key="tpl_abc123"
data-target="#inboard"
data-style='{
"primary": "#4f76ff",
"primaryForeground": "#ffffff",
"radius": "12px",
"fontFamily": "Inter, sans-serif"
}'
defer
></script>Supported tokens
| Token | Default | Purpose |
|---|---|---|
primary | #4f76ff | Buttons, links, active step indicator. |
primaryForeground | #ffffff | Text on primary surfaces. |
accent | #dbe8ff | Subtle highlights and hover backgrounds. |
background | #ffffff | Widget surface. |
foreground | #0b1120 | Body text. |
muted | #f1f5f9 | Cards, code block backgrounds. |
mutedForeground | #475569 | Secondary text. |
border | #e2e8f0 | Dividers, input outlines. |
radius | 12px | Corner radius for all surfaces. |
fontFamily | Inter, system | Base font stack. |
Light vs dark
Set data-theme="dark" to flip the widget into dark mode using the same tokens (Inboard generates dark-mode pairs from your light-mode brand colour). Set data-theme="auto" (the default) to follow the visitor's OS preference.
If you need full control over both palettes, pass two sets:
Inboard.init({
embedKey: "tpl_abc123",
target: "#inboard",
style: {
light: { primary: "#4f76ff", background: "#ffffff" },
dark: { primary: "#7b9aff", background: "#0b1120" },
radius: "8px",
},
});Density and spacing
Set density to comfortable (default), compact, or spacious to scale internal padding without overriding individual tokens.
<script
...
data-style='{"density":"compact"}'
defer
></script>What you can't override
To keep guides accessible and consistent, a small set of values are fixed:
- Minimum tap target size (44px on mobile).
- Focus ring visibility — always shown on keyboard navigation.
- Step number contrast — always meets WCAG AA against the active background.
- The "Powered by Inboard" link on free-tier accounts.
Upgrade to a paid plan to remove the badge.