Product tours

Go to Product tours in the menu.

A product tour shows a bubble next to a real button, field or menu on your site, one step at a time. It is ideal for welcoming new users, explaining a new feature or walking someone through setup. It works on any website or web app where the Messenger is installed, including SaaS products for signed-in users.

Create a tour

1. Click New tour and give it a name.
2. Add your steps (up to 10). For each step:
   • Element — click the cursor in the field. Your site opens in a new window; click the element you want and its selector is filled in for you. You can also type a CSS selector by hand. Leave it empty for a step in the middle of the screen.
   • Page (optional) — the page this step is on, such as /settings. Leave it empty to stay on the current page.
   • Bubble position — automatic, or below, above, right or left of the element.
   • Title and text — short and clear. You can translate every step; an empty translation shows the text in your workspace language.
3. Choose your color and how the tour starts.

In the picker window, use Browse pages to move to another page first, then Pick.

Tours across pages

Give a step a Page and the tour takes the visitor there when they reach that step, then continues on the new page. Visitors can go back and forth between steps; the tour remembers where it was for 30 minutes in that browser tab. Pages must be on the same site as the Messenger.

How a tour starts

• By itself on matching pages — choose the pages under Who and when, and a delay. Each person sees it once: it does not start again after they finished or closed it, and at most once a day while unfinished.
• Only from your page — start it with JavaScript, for example from a “Show me around” link:

Shopxare('startTour', 'TOUR_ID')

The editor shows the exact line to copy. Started this way, a tour can always be replayed.

Try it before it goes live

Under On your site, enter your page address and click Preview on your site. The tour plays only for you, even as a draft, and is not counted. The preview link works for one hour.

Tips for stable selectors

Selectors based on IDs or your own attributes keep working when your design changes. Add a data-tour attribute to the elements you want to point at:

<button data-tour="new-project">New project</button>

and use [data-tour="new-project"] as the element. If an element is not found within 3 seconds, the step opens in the middle of the screen.

Results

Each tour shows how many people saw it, finished it and closed it — each person counted once. You can also choose an audience or segment and a start and end date.