Product tours and “Show me”

Show rather than explain: a product tour guides your visitors step by step across your own page. The page is dimmed slightly, a ring highlights the element in question, and next to it is a bubble with your text and the buttons Zurück (back), Weiter (next) and Beenden (end).

Creating tours

Under /app/projects/{id} in the Texts & forms tab, section Product tours, you enter your tours as JSON. Leaving it empty and saving removes all tours.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

A tour has:

• id – required, unique. Lower-case letters, digits, - and _, starts with a letter or digit, 48 characters at most. You start the tour with it.
• name – a name for you.
• steps – 1 to 30 steps.

A step has:

• selector – required. A CSS selector for the element on your page, 300 characters at most.
• text – required. The text in the bubble.
• title – optional, a heading.
• placement – bottom (default) or top. It is a request, not a promise: if the bubble does not fit above, it moves below.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – optional labels of your own for the Next, Back, Done and End buttons.

Limits: 20 tours at most per project and 32 KB in total. On saving, your account checks the JSON and names the error if something is wrong.

Starting a tour

You start tours from your code, for example via a “Start tour” button or after the first sign-in:

ReactiveChat('tour', 'erste-schritte');

The call returns true if the tour starts, otherwise false. You can end it with:

ReactiveChat('tourStop');

The visitor ends a tour with Beenden, at the last step with Fertig (done), or with the Escape key. A counter shows which step they are at.

If an element is missing

If the widget cannot find the element of a step, for example because it does not exist on this page or is hidden, it skips the step. If all elements are missing, the tour does not start and the call returns false. So check your selectors on exactly the page where you start the tour.

Design

Tours have a fixed, neutral design, independent of your brand colours and your custom CSS. The bubble is at most 320 px wide. Without labels of your own, the buttons are called “Beenden”, “Zurück”, “Weiter” and “Fertig” in every language. For tours on English or Polish pages you therefore set the i18n_* fields in every step.

“Show me”

In its answer, the AI assistant can point to a control on your page, for example the “Add to cart” button. For this, after the chat is first opened, the widget reads the visible controls of the current page.

• If the element is clearly visible, a ring highlights it, with the first sentence of the answer next to it. The chat window stays open.
• If it is covered, or the visitor is on a phone, a Show me button appears on the message. Only a click on it shows the element.
• Any touch, the Escape key or scrolling away ends the display.

The chat never closes by itself for this.

You can switch off the reading of the page, and with it “Show me”, on the snippet:

data-rc-dom-spiegel="false"

You exclude individual areas by marking them with data-rc-private or data-rc-ignore. More on this in Knowledge and sources.