Docs
HomeSupportDashboard
DocsStyling

Styles

Make tours match your brand: launcher, cards, type, buttons, beacons, spotlight and carousel.

Styles are set once per site and apply to every tour on it. Open Your Tours → your site → Styles. A live preview on the right — a browser window for web sites, a phone for app sites — updates as you change things. Click Save styles when you’re happy.

Note
The same styles drive the web embed and the iOS, Android and React Native SDKs, so an app and a website can share one look. A few options only apply to one platform; they’re marked below.

Launcher button

  • Position — Web top or bottom, left / centre / right (default bottom-left). Apps left or right (default right).
  • Icon — choose from 24 flat icons (question, compass, map, lightbulb, sparkle, rocket, chat, flag, gift, trophy and more) or, on the web and React Native, any emoji.
  • Background colour — the hover colour is derived from it automatically.
  • Border radius — from square up to a full pill/circle.
  • Size and Bottom offset — iOSAndroid button size 32–72 px (default 44) and distance from the bottom 0–200 px (default 40), so it can clear a tab bar.

The minimised tab (see Start minimised) uses the same colours.

Tooltip card

  • Background colour of the step cards and welcome card.
  • Border radius, 0–24 px.

Typography

  • Title colour and Body text colour.
  • Inactive dot colour — the progress dots for steps not yet reached. The active dot uses your launcher colour.

Tours inherit your site’s font on the web, and the system font in apps.

Action buttons

  • Background and text colour of the primary buttons (Next, Finish, the welcome card’s call to action). Hover is derived automatically.
  • Border radius, 0–24 px.

Step beacons

The pulsing marker on each step’s target.

  • Style — Numbered (shows the step number), Dot or Ring.
  • Background colour — defaults to the launcher colour.
  • Text / number colour — only visible on the Numbered style.

Spotlight & overlay Web

  • Overlay colour dims the whole page while a tour runs. Use rgba() for transparency, e.g. rgba(0,0,0,0.45).
  • Spotlight shadow colour adds extra dimming around the highlighted element. On dark sites, a light tint like rgba(255,255,255,0.25) makes the spotlight stand out.
  • Background and text colour of the carousel slides.
  • Max width Web 400–1400 px (default 600). On the web the carousel is a centred modal; in apps it’s full screen.

Other ways to change styles

An AI agent can read and update styles through the update_styles MCP tool — e.g. “match the tour colours to our Tailwind theme”. The full shape is in the Styles JSON reference.

Something missing or unclear? Tell us and we’ll fix the page.