A product tour walks a visitor through your product one step at a time, on your own pages. Use one to onboard new users, or to show existing users where something you just shipped actually lives.
Tours run through the AnnounceKit widget you already have installed. If the widget is on your site, you do not need to add anything else.
Create a tour
Go to Product Tours in the sidebar.
Click New tour.
Click the name at the top to rename it. Only your team sees this name.
A new tour starts as a Draft, so nobody sees it until you publish.
Add your steps
On the Steps tab, click Add step, then fill in the Title and Body. The panel on the right shows the step exactly as a visitor will see it, and updates as you type.
Each step is one of three types:
Modal — a card in the middle of the screen. It is not attached to anything on the page, so it works anywhere. Good for a welcome or a sign-off.
Pointer — a card attached to a specific element, with an arrow pointing at it. This is the one you will use most.
Hotspot — a small dot on an element that opens when the visitor clicks it.
A tour can have up to 40 steps. The counter under the step list shows where you are.
Click Save as you go. Saving after each step you finish is the safest habit, rather than building the whole tour and saving once at the end.
Point a step at something on your page
Pointer and Hotspot steps need to know which element to attach to. That goes in the Element field, as a CSS selector.
There are two ways to fill it in.
Pick it by clicking. Click Edit on your site and your site opens with the builder attached. Click the element a step should point at and we work out the selector for you. While that tab is open, the tour editor shows a note saying you are building on your site, with a Refresh steps button to pull in what you added.
Type it yourself. You can edit the Element field directly, and it is worth doing. A selector picked by clicking describes where the element sits in your page structure, so it breaks the next time somebody reorders that part of the page. A selector pinned to a stable attribute does not.
So prefer something like [data-testid="inbox"] or a[href="/settings"] over a long chain of tag and class names. If your developers can add a dedicated attribute to the elements your tours rely on, your tours stop breaking when the page is restyled.
The element has to exist on the page at the moment the step runs. If a step points at something inside a menu that has to be opened first, the step before it needs to be the one that opens the menu.
Choose how each step advances
Under Buttons, How it advances decides what moves the visitor on:
When they press the button — the card shows a button and the visitor clicks it. Use this when the step is just explaining something.
When they click the element — there is no button, and the step advances when the visitor clicks the thing it is pointing at. Use this when you want them to actually do it.
Pick the second one whenever clicking the element takes the visitor to a different page. If the step advances on a button instead, they move on while still standing on the old page, and the next step has nothing to attach to.
You can also add a Back button and a Skip link, and set Placement for which side of the element the card sits on. Placement is set to Auto by default, which picks whichever side fits.
Decide who sees it and when
Open the Targeting tab.
How it starts — whether the tour begins on its own once the targeting matches.
When it runs — optional Starts at and Ends at dates.
Frequency — Once per user, Until completed (it comes back until they finish it), or Every time it matches.
Priority — which tour wins when more than one could start.
User Segmentation — limit it to a segment. With no rules, every visitor the page rules match will see it.
Page Rules — limit where it can start. With no rules, it can start on any page of your site.
Set a goal
Finishing a tour is not the same as doing the thing the tour was about. The Goal tab lets you measure the second one.
No goal — you only track completion.
They reach a page — enter the path the visitor should get to.
Your code reports it — give the event a name and call it from your own code when the action succeeds:
announcekit.trackGoal("invited_teammate")
Both goal types have an attribution window in days, set to 7 by default. If the visitor reaches the goal later than that, it is not counted, on the grounds that the tour can no longer claim credit for it.
Publish it
Click Publish when you are ready. A published tour can be paused at any time with Pause, and started again with Resume. Pausing stops new visitors entering the tour; it does not delete anything.
Duplicate copies the whole tour, which is the quickest way to build a variant. Archive takes it out of the list without deleting it.
See how it is doing
The tour list shows Started, Completion rate and Goal rate for each tour, and the Results tab inside a tour breaks it down step by step, so you can see which step people drop out on.
If a step does not appear
Check the tour is published, not a draft or paused.
Check the element is on the page. A Pointer step with a selector that matches nothing will not show. This is the most common cause, and it usually means the page changed after the selector was picked.
Check your page rules allow the page you are testing on.
Check the frequency. If it is set to Once per user and you have already seen it, it will not come back. Test in a private window.