Skip to main content

Create a Product Tour

This guide walks you through creating a product tour: starting from the Told app, adding steps in the visual editor on your live website, and saving. Editing step content (title, message, shape, target, buttons) is covered in Configure Steps.

Prerequisites​

Step 1 — Start a new product tour​

Navigate to your source and click Product tours in the left sidebar. You'll see the product tours list with a New Product tour button at the top right.

Click New Product tour. A modal opens: "Set the default language for your questionnaires".

"This language will be used by default. You can add or change other languages at any time."

Pick a language from the dropdown and click Create.

Two things happen:

  1. The current tab redirects to the source's Settings > Installation page (so you can verify the SDK is properly installed)
  2. A new browser tab opens on your live website with the visual editor overlay

Step 2 — The visual editor​

The visual editor is an overlay that appears on your live website. It has two parts:

  • Top bar — displays "All pins of the Product Tour" with Cancel and Save buttons
  • Bottom panel — the step manager with a + button and the message "Navigate to the page you want and add steps to your product tour"

The page border is highlighted in pink while the editor is active.

Navigate to the right page​

Before adding a step, navigate to the page where you want the step to appear. Each step records the URL of the page it was created on. You can add steps across multiple pages — each step remembers which page it belongs to.

Step 3 — Add steps​

Click the + button in the bottom panel. Two options appear:

TypeDescription
ModalA centered overlay that appears on the page, not attached to any specific element
PinA tooltip attached to a specific HTML element on the page

Adding a Pin step​

  1. Click Pin — the page darkens with a selection overlay and "Press "Esc" to cancel" appears
  2. Hover over the page to highlight elements
  3. Click on the element you want to target — Told captures the element's CSS selector, XPath, and page URL
  4. A screenshot of the page is taken automatically
  5. The step appears in the bottom panel as a numbered tab (e.g., "1") with the page URL and the element type (e.g., "DIV")

Adding a Modal step​

  1. Click Modal — a modal step is created immediately
  2. No element selection is needed since the modal is not attached to a specific element
  3. The step records the current page URL

Managing steps in the editor​

Once you have steps:

  • Each step appears as a numbered tab in the bottom panel (e.g., "1", "2", "3")
  • Click a tab to select a step — the page scrolls to show the selected element highlighted
  • Click the x on a tab to delete a step
  • Click + to add another step
  • A numbered badge appears on the page next to each pin's target element

Step 4 — Save​

Click the Save button in the top bar. A prompt appears: "Let AI create your content?" with two options:

OptionDescription
YesTold's AI (Cerebro) generates a title and message for each step based on the selected element and page context
NoSteps are saved with default placeholder text (lorem ipsum) that you can edit later in the Told app

After saving, the editor switches to Preview mode:

  • The top bar shows "This is a preview" (with an orange border)
  • A Replay button lets you replay the tour from the beginning
  • A Go to edition button reopens the visual editor to make further changes

Step 5 — Edit content in the Told app​

Go back to the Told app tab and navigate to your source's Product tours list. Click on the product tour you just created to open the step editor.

The editor has three top-level tabs: Content, Publish, and Results. Under Content, two sub-tabs: Steps and Customization.

From the Steps view, you can:

  • Edit the title, message, and media for each step
  • Configure the target, position, button action, and shape
  • Rename the product tour inline by clicking its name in the header

See Configure Steps for details on each option.

Editing an existing tour​

To modify steps, targets, or add new steps to an existing product tour:

  1. Open the product tour from your source
  2. Click Add or edit pin in the left sidebar — this opens the visual editor in a new tab on your website
  3. Make your changes and click Save

You can also click Edit pin in the right sidebar's Target section to reopen the editor.

warning

Always verify your tour after making changes to your website. CSS selectors can break if your site's HTML structure changes. See the Target section in Configure Steps for tips on stable targeting.