Create product tours

Product tours are multi-step walkthroughs that highlight elements in your UI. You build them visually using the PostHog toolbar directly on your site.

Launch the toolbar

1. Go to Product tours in PostHog
2. Click New tour and select Product tour
3. Enter the URL where you want to build the tour and click Open toolbar

Select elements

Click elements on your page to create steps. PostHog generates a CSS selector for each element automatically.

Note: If your target elements do not have stable selectors like id or data-*, the tour may fail to correctly identify them. We're working on a new element-finding algorithm, stay tuned!

Edit step content

After defining your tour structure in the toolbar, edit step content (text, formatting, images) in the main PostHog app.

Tour-wide settings like styling and display conditions are available in the right panel. You can also do basic editing in the toolbar while selecting elements on your site.

Step progression

Steps can progress via buttons or when the user clicks the target element. Guide users through real interactions, not just info.

Step types

Element steps

The default. Highlights a specific element with a tooltip. Positioning is automatic based on available viewport space.

Modal steps

Screen-positioned dialogs not anchored to any element. Useful for welcome messages or summary screens.

Survey steps

Embed a survey question mid-tour (open text or rating scale). Responses are captured as events.

Save and launch

Click Save in the toolbar to save your tour as a draft. When ready, launch the tour.