Producttours en ‘Laat het zien’

Tonen in plaats van uitleggen: een producttour begeleidt uw bezoekers stap voor stap over uw eigen pagina. De pagina wordt iets verduisterd, een ring markeert het betreffende element en ernaast staat een ballon met uw tekst en de knoppen Zurück (terug), Weiter (volgende) en Beenden (beëindigen).

Tours maken

Onder /app/projects/{id}, tabblad Teksten & formulieren, sectie Producttours, voert u uw tours als JSON in. Leeg laten en opslaan verwijdert alle 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" }
    ]
  }
]

Een tour heeft:

• id – verplicht, uniek. Kleine letters, cijfers, - en _, begint met een letter of cijfer, maximaal 48 tekens. Hiermee start u de tour.
• name – een naam voor uzelf.
• steps – 1 tot 30 stappen.

Een stap heeft:

• selector – verplicht. Een CSS-selector voor het element op uw pagina, maximaal 300 tekens.
• text – verplicht. De tekst in de ballon.
• title – optioneel, een kop.
• placement – bottom (standaard) of top. Het is een verzoek, geen garantie: als de ballon bovenaan niet past, verschuift deze naar onderen.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – optionele eigen opschriften voor de knoppen Volgende, Terug, Klaar en Beëindigen.

Limieten: maximaal 20 tours per project en in totaal 32 KB. Bij het opslaan controleert uw account de JSON en noemt het de fout als er iets mis is.

Een tour starten

U start tours vanuit uw code, bijvoorbeeld via een knop ‘Tour starten’ of na de eerste keer inloggen:

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

De aanroep geeft true terug als de tour start, anders false. U kunt de tour beëindigen met:

ReactiveChat('tourStop');

De bezoeker beëindigt een tour met Beenden, bij de laatste stap met Fertig (klaar) of met de Escape-toets. Een teller toont bij welke stap de bezoeker is.

Als een element ontbreekt

Als de widget het element van een stap niet kan vinden, bijvoorbeeld omdat het op deze pagina niet bestaat of verborgen is, wordt de stap overgeslagen. Als alle elementen ontbreken, start de tour niet en geeft de aanroep false terug. Controleer uw selectors daarom op precies de pagina waarop u de tour start.

Ontwerp

Tours hebben een vast, neutraal ontwerp, onafhankelijk van uw merkkleuren en eigen CSS. De ballon is maximaal 320 px breed. Zonder eigen opschriften heten de knoppen in elke taal ‘Beenden’, ‘Zurück’, ‘Weiter’ en ‘Fertig’. Voor tours op Engelse of Poolse pagina's stelt u daarom de velden i18n_* in elke stap in.

‘Laat het zien’

In het antwoord kan de AI-assistent naar een bedieningselement op uw pagina wijzen, bijvoorbeeld de knop ‘In winkelwagen’. Hiervoor leest de widget, nadat de chat voor het eerst is geopend, de zichtbare bedieningselementen van de huidige pagina.

• Als het element duidelijk zichtbaar is, markeert een ring het, met de eerste zin van het antwoord ernaast. Het chatvenster blijft open.
• Als het bedekt is of de bezoeker een telefoon gebruikt, verschijnt bij het bericht een knop Laat het zien. Pas na een klik daarop wordt het element getoond.
• Elke aanraking, de Escape-toets of wegscrollen beëindigt de weergave.

De chat sluit hiervoor nooit vanzelf.

U kunt het lezen van de pagina en daarmee ‘Laat het zien’ op het fragment uitschakelen:

data-rc-dom-spiegel="false"

U sluit afzonderlijke gedeelten uit door ze met data-rc-private of data-rc-ignore te markeren. Meer hierover in Kennis en bronnen.