Customize styles and layouts
Contents
Product tours is in private alpha
Product Tours is currently in private alpha. Share your thoughts and we'll reach out with early access.
Currently only available on the web. Requires posthog-js >= v1.324.0.
Customize the appearance of your tours to match your brand.
Colors
- Background color - Background of tour steps, modals, and banners
- Text color - Body text color
- Button color - Primary button background
- Button text color - Text on buttons
- Border color - Borders around steps and modals
Typography
Set a custom font family. The font must be available on your site.
Layout
- Border radius - Corner roundness (0 for sharp, higher values for rounded)
- Box shadow - Enable/disable shadow behind tour elements
- Width - Control modal and step width
Modal position
For modal steps and announcements, choose the screen position: center (default), corners, or edges.
Element step positioning is automatic based on available viewport space.
Behavior
- Show overlay - Dark overlay behind the tour to focus attention
White-label
Remove PostHog branding from tours.