Przewodniki po produkcie i „Pokaż mi”

Pokazywać zamiast tłumaczyć: przewodnik po produkcie prowadzi twoich odwiedzających krok po kroku po twojej stronie. Strona zostaje lekko przyciemniona, pierścień wyróżnia dany element, a obok pojawia się dymek z twoim tekstem i przyciskami Zurück, Weiter i Beenden.

Tworzenie przewodników

Pod /app/projects/{id} w zakładce Teksty i formularze, sekcja Przewodniki po produkcie, wpisujesz swoje przewodniki jako JSON. Zapisanie pustego pola usuwa wszystkie przewodniki.

[
  {
    "id": "erste-schritte",
    "name": "Pierwsze kroki",
    "steps": [
      { "selector": "#konto", "title": "Twoje konto", "text": "Tutaj zmienisz swoje dane." },
      { "selector": ".rechnung", "text": "A tutaj są faktury.", "placement": "top" }
    ]
  }
]

Przewodnik ma:

• id – wymagane, unikalne. Małe litery, cyfry, - i _, zaczyna się od litery albo cyfry, najwyżej 48 znaków. Tym identyfikatorem uruchamiasz przewodnik.
• name – nazwa dla ciebie.
• steps – od 1 do 30 kroków.

Krok ma:

• selector – wymagany. Selektor CSS elementu na twojej stronie, najwyżej 300 znaków.
• text – wymagany. Tekst w dymku.
• title – opcjonalny nagłówek.
• placement – bottom (domyślnie) albo top. To prośba, a nie gwarancja: jeśli dymek nie mieści się w oknie u góry, przesuwa się pod element.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – opcjonalne własne napisy na przyciskach Dalej, Wstecz, Gotowe i Zakończ.

Limity: najwyżej 20 przewodników na projekt i łącznie 32 KB. Przy zapisie konto sprawdza JSON i wskazuje błąd, jeśli coś się nie zgadza.

Uruchamianie przewodnika

Przewodniki uruchamiasz z twojego kodu, np. przyciskiem „Rozpocznij przewodnik” albo po pierwszym zalogowaniu:

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

Wywołanie zwraca true, gdy przewodnik się uruchomi, a w przeciwnym razie false. Zakończysz go przez:

ReactiveChat('tourStop');

Odwiedzający kończy przewodnik przyciskiem Beenden, w ostatnim kroku przyciskiem Fertig albo klawiszem Escape. Licznik pokazuje, na którym jest kroku.

Gdy brakuje elementu

Jeśli widget nie znajdzie elementu danego kroku, np. dlatego, że na tej stronie go nie ma albo jest ukryty, pomija ten krok. Jeśli brakuje wszystkich elementów, przewodnik się nie uruchomi, a wywołanie zwróci false. Dlatego sprawdzaj selektory dokładnie na tej stronie, na której uruchamiasz przewodnik.

Wygląd

Przewodniki mają stały, neutralny wygląd, niezależny od kolorów twojej marki i twojego własnego CSS. Dymek ma najwyżej 320 px szerokości. Bez własnych napisów przyciski w każdym języku brzmią „Beenden”, „Zurück”, „Weiter” i „Fertig”. Dlatego dla przewodników na stronach angielskich albo polskich ustaw pola i18n_* w każdym kroku.

„Pokaż mi”

Asystent AI może w swojej odpowiedzi wskazać element sterujący na twojej stronie, np. przycisk „Do koszyka”. W tym celu widget po pierwszym otwarciu odczytuje widoczne elementy sterujące bieżącej strony.

• Jeśli element jest swobodnie widoczny, wyróżnia go pierścień, a obok pojawia się pierwsze zdanie odpowiedzi. Okno czatu pozostaje otwarte.
• Jeśli element jest zasłonięty albo odwiedzający korzysta z telefonu, przy wiadomości pojawia się przycisk Pokaż mi. Element zostanie pokazany dopiero po jego kliknięciu.
• Każde dotknięcie, klawisz Escape albo przewinięcie strony kończy wskazywanie.

Czat nigdy nie zwija się przy tym sam.

Odczytywanie strony, a tym samym także „Pokaż mi”, wyłączysz we fragmencie osadzenia:

data-rc-dom-spiegel="false"

Pojedyncze obszary wyłączysz, oznaczając je atrybutem data-rc-private albo data-rc-ignore. Więcej w Wiedza i źródła.