Produkt-Touren und „Zeig's mir“

Zeigen statt erklären: Eine Produkt-Tour führt deine Besucher Schritt für Schritt über deine eigene Seite. Die Seite wird leicht abgedunkelt, ein Ring hebt das jeweilige Element hervor, daneben steht eine Blase mit deinem Text und den Knöpfen Zurück, Weiter und Beenden.

Touren anlegen

Unter /app/projects/{id} im Reiter Texte & Formulare, Abschnitt Produkt-Touren, trägst du deine Touren als JSON ein. Leer lassen und speichern entfernt alle Touren.

[
  {
    "id": "erste-schritte",
    "name": "Erste Schritte",
    "steps": [
      { "selector": "#konto", "title": "Dein Konto", "text": "Hier änderst du deine Daten." },
      { "selector": ".rechnung", "text": "Und hier liegen die Rechnungen.", "placement": "top" }
    ]
  }
]

Eine Tour hat:

• id – Pflicht, eindeutig. Kleinbuchstaben, Ziffern, - und _, beginnt mit Buchstabe oder Ziffer, höchstens 48 Zeichen. Mit ihr startest du die Tour.
• name – ein Name für dich.
• steps – 1 bis 30 Schritte.

Ein Schritt hat:

• selector – Pflicht. Ein CSS-Selektor für das Element auf deiner Seite, höchstens 300 Zeichen.
• text – Pflicht. Der Text in der Blase.
• title – optional, eine Überschrift.
• placement – bottom (Vorgabe) oder top. Das ist eine Bitte, keine Zusage: Passt die Blase oben nicht ins Fenster, rutscht sie darunter.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – optional eigene Beschriftungen für die Knöpfe Weiter, Zurück, Fertig und Beenden.

Grenzen: höchstens 20 Touren je Projekt und insgesamt 32 KB. Beim Speichern prüft das Konto das JSON und nennt den Fehler, wenn etwas nicht stimmt.

Eine Tour starten

Touren startest du aus deinem Code, etwa über einen Knopf „Tour starten“ oder nach der ersten Anmeldung:

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

Der Aufruf gibt true zurück, wenn die Tour startet, sonst false. Beenden kannst du sie mit:

ReactiveChat('tourStop');

Der Besucher beendet eine Tour mit Beenden, am letzten Schritt mit Fertig oder mit der Escape-Taste. Ein Zähler zeigt, bei welchem Schritt er ist.

Wenn ein Element fehlt

Findet das Widget das Element eines Schritts nicht, etwa weil es auf dieser Seite nicht existiert oder versteckt ist, überspringt es den Schritt. Fehlen alle Elemente, startet die Tour nicht, und der Aufruf gibt false zurück. Prüfe deine Selektoren deshalb auf genau der Seite, auf der du die Tour startest.

Gestaltung

Touren haben eine feste, neutrale Gestaltung, unabhängig von deinen Markenfarben und deinem eigenen CSS. Die Blase ist höchstens 320 px breit. Ohne eigene Angabe heißen die Knöpfe in jeder Sprache „Beenden“, „Zurück“, „Weiter“ und „Fertig“. Für Touren auf englischen oder polnischen Seiten setzt du deshalb die i18n_*-Felder in jedem Schritt.

„Zeig's mir“

Der KI-Assistent kann in seiner Antwort auf ein Bedienelement deiner Seite zeigen, etwa auf den Knopf „In den Warenkorb“. Dafür liest das Widget nach dem ersten Öffnen die sichtbaren Bedienelemente der aktuellen Seite.

• Ist das Element frei sichtbar, hebt ein Ring es hervor, daneben steht der erste Satz der Antwort. Das Chatfenster bleibt offen.
• Ist es verdeckt, oder ist der Besucher auf dem Handy, steht an der Nachricht ein Knopf Zeig's mir. Erst ein Klick darauf zeigt das Element.
• Jede Berührung, die Escape-Taste oder Wegscrollen beendet die Anzeige.

Der Chat klappt dafür nie von selbst zu.

Abschalten kannst du das Lesen der Seite, und damit auch „Zeig's mir“, am Schnipsel:

data-rc-dom-spiegel="false"

Einzelne Bereiche nimmst du aus, indem du sie mit data-rc-private oder data-rc-ignore markierst. Mehr dazu unter Wissen und Quellen.