Prohlídky produktu a „Ukažte mi to“

Místo vysvětlování ukažte: prohlídka produktu provede návštěvníky krok za krokem po vaší stránce. Stránka se mírně ztmaví, kroužek zvýrazní příslušný prvek a vedle něj je bublina s vaším textem a tlačítky Zurück (zpět), Weiter (další) a Beenden (ukončit).

Vytváření prohlídek

Na adrese /app/projects/{id} na kartě Texty a formuláře, oddíl Prohlídky produktu, zadáváte prohlídky jako JSON. Ponechání prázdného pole a uložení odstraní všechny prohlídky.

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

Prohlídka má:

• id – povinné, jedinečné. Malá písmena, číslice, - a _, začíná písmenem nebo číslicí, nejvýše 48 znaků. Pomocí něj prohlídku spouštíte.
• name – název pro vás.
• steps – 1 až 30 kroků.

Krok má:

• selector – povinné. Selektor CSS pro prvek na vaší stránce, nejvýše 300 znaků.
• text – povinné. Text v bublině.
• title – volitelné, nadpis.
• placement – bottom (výchozí) nebo top. Jde o požadavek, nikoli příslib: pokud se bublina nevejde nad prvek, přesune se pod něj.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – volitelné vlastní popisky tlačítek Další, Zpět, Hotovo a Ukončit.

Limity: nejvýše 20 prohlídek na projekt a celkem 32 KB. Při ukládání účet kontroluje JSON a při problému uvede chybu.

Spuštění prohlídky

Prohlídky spouštíte ze svého kódu, například tlačítkem „Spustit prohlídku“ nebo po prvním přihlášení:

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

Volání vrátí true, pokud se prohlídka spustí, jinak false. Ukončíte ji pomocí:

ReactiveChat('tourStop');

Návštěvník ukončí prohlídku pomocí Beenden, v posledním kroku pomocí Fertig (hotovo) nebo klávesou Escape. Počítadlo ukazuje, ve kterém kroku se nachází.

Když prvek chybí

Pokud widget nenajde prvek kroku, například protože na této stránce neexistuje nebo je skrytý, krok přeskočí. Pokud chybí všechny prvky, prohlídka se nespustí a volání vrátí false. Proto selektory ověřujte přesně na té stránce, na které prohlídku spouštíte.

Design

Prohlídky mají pevný, neutrální design nezávislý na barvách vaší značky a vlastním CSS. Bublina je nejvýše 320 px široká. Bez vlastních popisků se tlačítka ve všech jazycích jmenují „Beenden“, „Zurück“, „Weiter“ a „Fertig“. Pro prohlídky na anglických nebo polských stránkách proto nastavte pole i18n_* v každém kroku.

„Ukažte mi to“

Asistent AI může v odpovědi ukázat na ovládací prvek na vaší stránce, například na tlačítko „Přidat do košíku“. K tomu widget po prvním otevření chatu načte viditelné ovládací prvky aktuální stránky.

• Pokud je prvek jasně viditelný, kroužek ho zvýrazní a vedle něj se zobrazí první věta odpovědi. Okno chatu zůstává otevřené.
• Pokud je zakrytý nebo je návštěvník na telefonu, u zprávy se objeví tlačítko Ukažte mi to. Teprve kliknutí na něj prvek ukáže.
• Jakýkoli dotyk, klávesa Escape nebo odrolování zobrazení ukončí.

Chat se kvůli tomu nikdy sám nezavírá.

Čtení stránky a tím i funkci „Ukažte mi to“ můžete vypnout ve vkládacím kódu:

data-rc-dom-spiegel="false"

Jednotlivé oblasti vyloučíte označením data-rc-private nebo data-rc-ignore. Více v části Znalosti a zdroje.