Тури продуктом і «Покажіть»

Показуйте замість пояснювати: тур продуктом крок за кроком проводить відвідувачів сторінкою. Вона трохи затемнюється, кільце виділяє елемент, а поруч — хмаринка з текстом і кнопками Zurück (назад), Weiter (далі) та Beenden (завершити).

Створення турів

У /app/projects/{id} на вкладці Тексти й форми, розділ Тури продуктом, ви вводите тури як JSON. Порожнє поле після збереження видаляє всі тури.

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

Тур має:

• id — обов’язковий, унікальний. Малі літери, цифри, - та _, починається з літери чи цифри, щонайбільше 48 символів. За ним запускається тур.
• name — назва для вас.
• steps — від 1 до 30 кроків.

Крок має:

• selector — обов’язковий. CSS-селектор елемента сторінки, щонайбільше 300 символів.
• text — обов’язковий. Текст у хмаринці.
• title — необов’язковий заголовок.
• placement — bottom (стандартно) або top. Це побажання, не обіцянка: якщо хмаринка не вміщається вгорі, переміститься вниз.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende — необов’язкові власні підписи кнопок «Далі», «Назад», «Готово» й «Завершити».

Ліміти: щонайбільше 20 турів на проєкт і загалом 32 КБ. Під час збереження обліковий запис перевіряє JSON і називає помилку.

Запуск туру

Тури запускаються з коду, наприклад кнопкою «Почати тур» або після першого входу:

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

Виклик повертає true, якщо тур почався, інакше false. Завершити його можна через:

ReactiveChat('tourStop');

Відвідувач завершує тур кнопкою Beenden, на останньому кроці — Fertig (готово) або клавішею Escape. Лічильник показує поточний крок.

Якщо елемента немає

Якщо віджет не знаходить елемент кроку, наприклад його немає на сторінці або він прихований, крок пропускається. Якщо немає всіх елементів, тур не починається, виклик повертає false. Тому перевіряйте селектори саме на сторінці запуску.

Оформлення

Тури мають фіксоване нейтральне оформлення, незалежне від кольорів бренду й власного CSS. Хмаринка завширшки до 320 пікс. Без власних підписів кнопки всіма мовами називаються «Beenden», «Zurück», «Weiter» та «Fertig». Тому для турів на англійських чи польських сторінках задавайте поля i18n_* у кожному кроці.

«Покажіть»

У відповіді ШІ-асистент може вказати на елемент керування сторінкою, наприклад кнопку «Додати до кошика». Для цього після першого відкриття чату віджет читає видимі елементи керування поточної сторінки.

• Якщо елемент добре видно, його виділяє кільце з першим реченням відповіді поруч. Вікно чату залишається відкритим.
• Якщо елемент закритий іншим або відвідувач на телефоні, у повідомленні з’являється кнопка Покажіть. Лише натискання показує елемент.
• Будь-який дотик, Escape або віддалення прокручуванням завершує показ.

Чат ніколи не закривається для цього сам.

Читання сторінки та «Покажіть» можна вимкнути у фрагменті:

data-rc-dom-spiegel="false"

Окремі області виключаються позначками data-rc-private або data-rc-ignore. Докладніше — Знання й джерела.