Steppr
Themes & presets

One default, plus presets you pick per flow.

Set a workspace default that every tour, checklist, and announcement inherits. Want a campaign-specific look on a single announcement, or a different palette on one tour? Save it as a preset and pick it from a dropdown on the editor - no global theme edits, no churn.

Theme presets
  • Workspace defaultDefault
  • Spring campaign
  • Onboarding tours
  • Pricing announcement
On a tour: Theme → Spring campaign
What ships
  • Workspace default: primary colour, corner radius, font family, font size, text alignment, button alignment
  • Up to 20 named presets stored on the workspace; picked per tour, checklist, or announcement
  • Resolved at publish time - the SDK reads a frozen theme from the snapshot, no preset lookup on the hot path
  • "Match site font" inherits from the customer’s page so flows feel native; or pick the system sans stack
  • Three font-size scales (compact, default, roomy) - the whole card scales off one base value
  • Plan-aware branding: Growth+ removes the "Powered by Steppr" badge
  • Renders inside a Shadow DOM root - your CSS can’t leak in, ours can’t leak out
How it works

Themes, in detail.

01

Set it once, inherit everywhere.

The workspace default covers the things that make a widget look like yours: primary colour, corner radius, font family, font size scale, text and button alignment. Every tour, checklist and announcement picks it up automatically. Change the default and every flow that uses it updates on its next publish.

02

Presets for the exceptions.

A spring campaign announcement in a different colour. A tour for a white-labelled customer. Save the variation as a named preset, up to twenty per workspace, and pick it from a dropdown in the editor. The default is untouched and nothing else changes.

03

Frozen at publish, isolated at render.

Themes are resolved when you publish and stored in the snapshot, so the SDK never looks up a preset at runtime. Everything renders inside a Shadow DOM root: your site’s CSS cannot restyle a tooltip by accident, and ours cannot restyle your page. "Match site font" reads the font from your page so the widget feels native.

Plans. Theming is on every plan. The "Powered by Steppr" badge is removed on Growth and above. See pricing

Common questions

Themes FAQ.

Straight answers. If yours isn't here, email hello@steppr.io and a founder replies.

Choose "Match site font" and Steppr inherits whatever font your page uses, so the widgets feel native. Or pick the system sans stack for a neutral look.

No. Everything renders inside a Shadow DOM root, which isolates styles in both directions.

Upgrade to Growth or above. The badge is removed automatically on those plans.

Goes well with

Related features.

Everything in the box
In-app announcements

Banner or modal. One message, once per user.

Learn more
Onboarding checklists

A floating widget whose items tick themselves off.

Learn more
JavaScript SDK

One snippet, ~23 KB, Shadow DOM, any stack.

Learn more

Try themes free for 7 days.

No card to start. The trial unlocks Growth-tier features so you can evaluate the whole product, not a stripped-down preview.