Customizing Tour Branding

Your hint bubbles should feel native to your product. The Branding editor lets you customize everything with a live preview.

Accessing the Branding Editor

On the Sites page, click Branding in the top toolbar. A modal opens with all customization options and a live preview at the bottom.

Customization Options

Colors

Primary Color — Main button and highlight color (e.g., #f59e0b)

Secondary Color — Supporting accent color (e.g., #d97706)

Background Color — Tooltip background (e.g., #ffffff for white)

Text Color — Title and description text (e.g., #1f2937 for dark gray)

Click the color swatch to pick a color, or type a hex code directly.

Border Radius

Use the slider to adjust corner roundness from sharp (0px) to fully rounded. The default 12px gives a modern, friendly look.

Font Family

Choose from the dropdown or select Default (inherit from site) to automatically match your website's typography.

Button Style

Three options for the Next/Back/Finish buttons:

Filled — Solid background with your primary color

Outline — Transparent with a colored border

Ghost — Minimal, text-only buttons

Live Preview

The preview section at the bottom shows exactly how your hint bubbles will look. Every change updates in real time — no guessing, no surprises.

Per-Site Branding

Each website has its own isolated branding configuration. If you manage multiple sites, each one can have completely different colors, fonts, border radius, and button styles.

For example:

yourapp.com — Orange primary, filled buttons, 12px radius

docs.yourapp.com — Blue primary, outline buttons, 8px radius

admin.yourapp.com — Dark theme, ghost buttons, 4px radius

Switching between sites in the sidebar automatically loads that site's branding. No conflicts, no overrides.

Saving and Resetting

Save Branding — Apply your customizations to all hints on this site

Reset — Revert to default styling

Cancel — Close without saving changes

Tips

Start with your brand's primary color. Set Primary Color to match your product's main button color for instant consistency.

Keep background and text high-contrast. White background with dark text is the safest choice for readability.

Try all three button styles. Filled works for most products, but Outline or Ghost can look cleaner on minimal UIs.

Use "inherit from site" for fonts. This ensures your hints match your product's typography automatically.

---

Next: Standalone hints vs. tour steps