# Getting started with product tours - Docs

**Product tours is in private alpha**

Product Tours is currently in private alpha. [Share your thoughts](https://app.posthog.com/external_surveys/019af5f5-a50e-0000-b10f-e8c30c0b73a0) and we'll reach out with early access.

**Currently only available on the web. Requires `posthog-js` >= v1.324.0.**

## Configure posthog-js

First, ensure you have the SDK configured correctly - otherwise, tours will not be shown on your site.

1.  Update to at least `posthog-js` v1.324.0 (we always recommend the latest)
2.  Explicitly enable product tours in your config

typescript

PostHog AI

```typescript
posthog.init('api-key', {
  api_host: 'api-host',
  defaults: '2025-05-24',
  disable_product_tours: false, // add this!
});
```

## Create your first tour

Product tours are multi-step walkthroughs that highlight elements in your UI and guide users through features. You build them visually using the PostHog toolbar.

### How it works

1.  Launch the toolbar on your site
2.  Click elements to create steps
3.  Add content with the rich text editor
4.  Configure buttons and actions
5.  Save and launch

Each step can highlight a specific element, show a modal, or even include an embedded survey question.

[Create a tour](/docs/product-tours/creating-product-tours.md)

## Or launch an announcement

Announcements are single-step messages for when you don't need a full tour. Choose between:

-   **Modals** - Centered popups for important messages, changelogs, or feature launches
-   **Banners** - Top or bottom page alerts for subtle notifications

![Modal announcement example](https://res.cloudinary.com/dmukukwp6/image/upload/Screenshot_2026_01_16_at_12_44_39_PM_b1e4fb4ce4.png)

Modal announcement

![Banner announcement example](https://res.cloudinary.com/dmukukwp6/image/upload/Screenshot_2026_01_16_at_12_44_14_PM_1614e763bf.png)

Banner announcement

Announcement buttons can open links or trigger a product tour, making them a great entry point for onboarding flows.

You can create announcements directly from the PostHog app without using the toolbar.

[Create an announcement](/docs/product-tours/creating-announcements.md)

## Target the right users

Control who sees your tours and when they appear:

-   **URL matching** - Show on specific pages (exact, contains, or regex)
-   **User properties** - Target specific user segments via built-in [feature flags](/docs/feature-flags.md)

Users who interact with a tour (complete or dismiss) won't see it again.

[Set up targeting](/docs/product-tours/targeting.md)

## Customize the look

Make tours match your brand:

-   **Colors** - Background, text, buttons, borders
-   **Layout** - Border radius, shadows, positioning
-   **Typography** - Custom font family
-   **Behavior** - Overlay, dismiss on click outside
-   **White-label** - Hide PostHog branding

[Customize appearance](/docs/product-tours/customization.md)

## Launch and measure

Once your tour is ready, set a start date to launch it. PostHog automatically tracks:

-   **Shown** - How many users saw the tour
-   **Completed** - How many finished all steps
-   **Dismissed** - How many closed early
-   **Tour funnel** - Shows step-by-step where users drop off

![Product tour analytics](https://res.cloudinary.com/dmukukwp6/image/upload/Screenshot_2026_01_16_at_12_07_08_PM_54e558bc6e.png)![Product tour analytics](https://res.cloudinary.com/dmukukwp6/image/upload/Screenshot_2026_01_16_at_12_08_05_PM_2f34b3d315.png)

### Integrate with product analytics

Tour events work with the rest of PostHog. Create funnels to see if tours improve activation, or use [cohorts](/docs/data/cohorts.md) to target users who haven't completed onboarding.

Person properties like `$product_tour_completed/{id}` are set automatically, so you can filter and segment based on tour interactions.

## Use for free

Product tours is completely free while in alpha. No usage limits, no credit card required.

We'll introduce pricing once we're out of beta – we'll give you plenty of notice before that happens.

---

That's it! You're ready to start guiding users.

[Create your first tour](/docs/product-tours/creating-product-tours.md)

1/7

[**Configure posthog-js** ***Required***](#quest-item-configure-posthog-js)[**Create your first tour** ***Required***](#quest-item-create-your-first-tour)[**Or launch an announcement** ***Optional***](#quest-item-or-launch-an-announcement)[**Target the right users** ***Required***](#quest-item-target-the-right-users)[**Customize the look** ***Recommended***](#quest-item-customize-the-look)[**Launch and measure** ***Required***](#quest-item-launch-and-measure)[**Use for free** ***No cost***](#quest-item-use-for-free)

**Configure posthog-js**

***Required***

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better