Produktrundturer och ”Visa mig”

Visa i stället för att förklara: en produktrundtur guidar besökarna steg för steg över din egen sida. Sidan tonas ned något, en ring markerar det aktuella elementet och bredvid finns en bubbla med din text och knapparna Zurück (tillbaka), Weiter (nästa) och Beenden (avsluta).

Skapa rundturer

Under /app/projects/{id} på fliken Texter och formulär, i avsnittet Produktrundturer, anger du rundturerna som JSON. Om du lämnar det tomt och sparar tas alla rundturer bort.

[
  {
    "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" }
    ]
  }
]

En rundtur har:

• id – obligatoriskt, unikt. Gemener, siffror, - och _, börjar med en bokstav eller siffra, högst 48 tecken. Du startar rundturen med det.
• name – ett namn för dig.
• steps – 1 till 30 steg.

Ett steg har:

• selector – obligatorisk. En CSS-selektor för elementet på sidan, högst 300 tecken.
• text – obligatorisk. Texten i bubblan.
• title – valfri, en rubrik.
• placement – bottom (standard) eller top. Det är ett önskemål, inget löfte: om bubblan inte får plats ovanför flyttas den nedanför.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – valfria egna etiketter för knapparna Nästa, Tillbaka, Klart och Avsluta.

Gränser: högst 20 rundturer per projekt och totalt 32 KB. Vid sparande kontrollerar kontot JSON och anger felet om något är fel.

Starta en rundtur

Du startar rundturer från din kod, till exempel via en knapp ”Starta rundtur” eller efter den första inloggningen:

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

Anropet returnerar true om rundturen startar, annars false. Du kan avsluta den med:

ReactiveChat('tourStop');

Besökaren avslutar en rundtur med Beenden, vid sista steget med Fertig (klart), eller med Escape-tangenten. En räknare visar vilket steg hen är på.

Om ett element saknas

Om widgeten inte hittar elementet för ett steg, till exempel för att det inte finns på sidan eller är dolt, hoppar den över steget. Om alla element saknas startar rundturen inte och anropet returnerar false. Kontrollera därför selektorerna på exakt den sida där du startar rundturen.

Utseende

Rundturer har ett fast, neutralt utseende, oberoende av profilfärgerna och egen CSS. Bubblan är högst 320 px bred. Utan egna etiketter heter knapparna ”Beenden”, ”Zurück”, ”Weiter” och ”Fertig” på alla språk. För rundturer på engelska eller polska sidor anger du därför i18n_*-fälten i varje steg.

”Visa mig”

I sitt svar kan AI-assistenten peka på ett reglage på sidan, till exempel knappen ”Lägg i varukorg”. Därför läser widgeten den aktuella sidans synliga reglage efter att chatten öppnats första gången.

• Om elementet är tydligt synligt markeras det med en ring, med svarets första mening bredvid. Chattfönstret förblir öppet.
• Om det är täckt eller besökaren använder en telefon visas knappen Visa mig på meddelandet. Först ett klick på den visar elementet.
• All beröring, Escape-tangenten eller rullning bort avslutar visningen.

Chatten stängs aldrig av sig själv för detta.

Du kan stänga av läsningen av sidan, och därmed ”Visa mig”, i kodsnutten:

data-rc-dom-spiegel="false"

Du undantar enskilda områden genom att märka dem med data-rc-private eller data-rc-ignore. Mer om detta i Kunskap och källor.