Otwieranie czatu z Twojej strony

Czat nie musi startować z przycisku w rogu. Może go otworzyć Twoje menu, Twoja strona pomocy albo Twój własny przycisk. Ta strona pokazuje, jak to zrobić: od linku bez kodu po kilka linii skryptu. Przykłady korzystają z kodu ze strony Instalacja czatu.

Najprostszy sposób: link

Ustaw w linku adres #konrado-chat. Kliknięcie w taki link otwiera czat. Bez kodu.

W edytorze menu swojej strony (WordPress, Webflow, Wix lub inny) dodaj własny link i ustaw jego URL na #konrado-chat. W HTML wygląda to tak:

<a href="#konrado-chat">Chat with us</a>

Działa też link z innej strony, z e-maila albo z artykułu pomocy. https://your-site.com/support#konrado-chat otwiera Twoją stronę pomocy z otwartym czatem. Czat usuwa potem #konrado-chat z adresu, więc odświeżenie strony nie otwiera go ponownie.

Na stronie jednostronicowej (zbudowanej na przykład w Next.js, Nuxt lub Turbo) link do innej podstrony z #konrado-chat zmienia podstronę bez przeładowania i czat się nie otwiera. Użyj linku na tej samej podstronie albo skryptu opisanego niżej.

Element <button> nie ma adresu URL. Dla przycisku użyj skryptu opisanego niżej.

Z własnego skryptu

Skrypt czatu udostępnia Twojej stronie window.KonradoChat. Wywołaj go po kliknięciu w swój przycisk lub link. Dodaj skrypt za przyciskiem, na przykład tuż przed </body>:

<a href="/contact" id="support-link">AI Support Assistant</a>

<script>
  document.getElementById('support-link').addEventListener('click', function (event) {
    if (!window.KonradoChat) return; // The chat has not loaded: the link opens /contact.
    event.preventDefault();
    window.KonradoChat.open();
  });
</script>

window.KonradoChat pojawia się, gdy skrypt czatu się załaduje, chwilę po Twojej stronie. Do tego czasu powyższe sprawdzenie pozwala linkowi działać jak zwykły link. Potem link otwiera czat. Jeśli czat jest wstrzymany albo Twojej domeny nie ma na liście Dozwolone domeny, czat się nie ładuje, a kliknięcie w link nic nie robi.

Dostępnych jest pięć wywołań:

Wiadomość może mieć do 1000 znaków. Dłuższy tekst zostaje obcięty. Pusta wiadomość nie zostaje wysłana, a konsola przeglądarki pokazuje ostrzeżenie.

Wywołanie wykonane, zanim czat jest gotowy, uruchamia się, gdy tylko czat będzie gotowy. Jeśli w tym czasie wykonasz kilka wywołań, uruchomi się tylko ostatnie.

Dwie dobre praktyki, dzięki którym wszystko działa płynnie:

• Zamknij swoje menu w tej samej obsłudze kliknięcia. Czat otwiera się nad wszystkim na Twojej stronie, także nad Twoim menu.
• Wywołuj send tylko po kliknięciu odwiedzającego, nigdy przy ładowaniu strony. Każde send to prawdziwa wiadomość od odwiedzającego. Pojawia się na stronie Skrzynka, a odpowiedź Konrado kosztuje 1 kredyt.

Ukryj przycisk czatu

Gdy do czatu prowadzi Twój własny link lub przycisk, możesz ukryć nasz przycisk czatu. Dodaj data-konrado-chat-launcher="hidden" do tagu skryptu czatu:

<script async src="https://app.konrado.ai/website-chat/v1/loader.js"
        data-konrado-chat-id="wgt_9808d383733f4e62925c14e2e876eb3a"
        data-konrado-chat-launcher="hidden"></script>

Gdy przycisk jest ukryty:

• W rogu nie pojawia się przycisk czatu.
• Nie pojawia się dymek powitalny ani wiadomość wyzwalacza, bo nie ma przycisku, nad którym mogłyby się pokazać.
• Twój własny link lub przycisk to jedyny sposób na otwarcie czatu.
• Zamknięty czat nie zajmuje miejsca na Twojej stronie i nie przechwytuje kliknięć.

Czat otwiera się w swoim zwykłym rogu, a po zamknięciu znika. To ustawienie jest w tagu skryptu, a nie w konsoli, więc dwie strony mogą korzystać z jednego czatu: jedna z przyciskiem, druga bez.

Sprawdzaj, kiedy czat się otwiera i zamyka

Czat informuje Twoją stronę o zmianach. Wysyła trzy zdarzenia na window:

Każde zdarzenie występuje raz na jedną zmianę. Czat, który nigdy się nie otworzył, nie wysyła close. event.detail.chatId to ID czatu z tagu skryptu, więc strona z dwoma czatami może rozróżnić ich zdarzenia.

Ten przykład oznacza Twój link jako otwarty lub zamknięty, więc Twój CSS może go ostylować przez #support-link[data-state='open']:

<script>
  window.addEventListener('konrado-chat:open', function () {
    document.getElementById('support-link').dataset.state = 'open';
  });
  window.addEventListener('konrado-chat:close', function () {
    document.getElementById('support-link').dataset.state = 'closed';
  });
</script>

konrado-chat:ready występuje raz, gdy czat się ładuje. Nasłuchiwanie dodane później go nie odbierze. Umieść swoje nasłuchiwania w zwykłym <script> nad tagiem skryptu czatu. Twój przycisk nie musi czekać na ready: wywołanie wykonane, zanim czat jest gotowy, uruchamia się, gdy tylko czat będzie gotowy.

Fokus klawiatury

Czat sam przenosi fokus klawiatury. Nie trzeba nic ustawiać.

• Gdy Twoja strona otwiera czat (jednym z wywołań powyżej, linkiem #konrado-chat albo adresem kończącym się na #konrado-chat), fokus przechodzi do czatu, gdy tylko czat się pokaże. Na komputerze kursor jest w polu wiadomości, więc odwiedzający może od razu pisać. Po open({ message }) kursor stoi za Twoim tekstem. Na telefonie lub tablecie fokus dostaje zamiast tego okno czatu, więc klawiatura ekranowa nie zasłania Twojej strony.
• Gdy czat się zamyka, fokus wraca do linku lub przycisku, który go otworzył, jeśli ten wciąż jest na stronie. Jeśli w międzyczasie odwiedzający przeszedł do innego pola na Twojej stronie, fokus zostaje w tym polu.

Safari nie daje fokusu przyciskowi ani linkowi klikniętemu myszą, a Firefox na Macu nie daje fokusu przyciskowi. Po takim kliknięciu nie ma dokąd wrócić i po zamknięciu czatu fokus zostaje na stronie. Z klawiatury (Tab do przycisku, potem Enter) działa to w obu przeglądarkach. Te przeglądarki traktują tak każdy przycisk i link na każdej stronie.

Poczekaj na zgodę na pliki cookie

Jeśli Twoi odwiedzający muszą najpierw zgodzić się na pliki cookie, dodaj data-konrado-chat-consent="wait" do tagu skryptu czatu:

<script async src="https://app.konrado.ai/website-chat/v1/loader.js"
        data-konrado-chat-id="wgt_9808d383733f4e62925c14e2e876eb3a"
        data-konrado-chat-consent="wait"></script>

Przeglądarka pobiera skrypt czatu i nic więcej się nie dzieje. Na urządzeniu odwiedzającego nic nie jest zapisywane, nic nie trafia do Konrado i nie pokazuje się przycisk czatu. Czat startuje, gdy:

• Twoje narzędzie do zgód na pliki cookie wywoła KonradoChat.init() po zgodzie odwiedzającego albo
• odwiedzający poprosi o czat: przez Twój link lub przycisk (open, send lub toggle), link #konrado-chat albo adres kończący się na #konrado-chat.

close() nigdy nie uruchamia czatu. Drugie init() nic nie robi. Zgoda dotyczy całej strony: czat, który pojawi się na niej później, startuje od razu.

Narzędzie do zgód często zgłasza zapisaną zgodę powracającego odwiedzającego jeszcze w trakcie ładowania strony, zanim skrypt czatu się uruchomi. W tym momencie window.KonradoChat jeszcze nie istnieje. Wywołaj tę funkcję w funkcji zwrotnej "zgoda udzielona" swojego narzędzia do zgód. Działa w dowolnym momencie:

<script>
  function konradoChatConsentGiven() {
    if (window.KonradoChat) {
      window.KonradoChat.init();
      return;
    }
    // The chat's script has not run yet: let it start as soon as it loads.
    var tag = document.querySelector('script[data-konrado-chat-consent]');
    if (tag) {
      tag.removeAttribute('data-konrado-chat-consent');
    } else {
      // The chat's tag is further down the page: try again once the page is read.
      document.addEventListener('DOMContentLoaded', konradoChatConsentGiven);
    }
  }
</script>

Gdy czat wystartuje, zapisuje na Twojej stronie, w przeglądarce odwiedzającego, te dane:

Samo okno czatu przechowuje otwartą rozmowę dla danej zakładki w pamięci sesji na app.konrado.ai, a informację, które wyzwalacze już się pokazały, w tamtejszej pamięci lokalnej.

Dobrze wiedzieć

• window.KonradoChat należy do czatu. Nie używaj tej nazwy do niczego innego na swojej stronie.
• Po zmianie w czacie przeglądarka odwiedzającego może trzymać poprzednią wersję mniej więcej do godziny.
• Gdy na jednej stronie są dwa czaty, KonradoChat steruje tym, który załadował się pierwszy.
• Własne opcje czatu są w konsoli, a nie w tagu skryptu: dymek powitalny i jego opóźnienie, tekst i ikona przycisku czatu, kolory. Zmień je w sekcji Marka i styl. Dopasuj czat do wyglądu swojej strony w sekcji Zaawansowany wygląd: kształt i obramowanie przycisku, kolory, narożniki, czcionka i rozmiar tekstu.

Stabilność

Wszystko na tej stronie to wersja 1: adres skryptu /website-chat/v1/, window.KonradoChat i jego wywołania, atrybuty data-konrado-chat-*, link #konrado-chat i zdarzenia konrado-chat:*.

Wersję 1 tylko rozszerzamy. Nie zmieniamy ani nie usuwamy tego, co opisuje ta strona. Zmiana, która zepsułaby Twoją stronę, pojawi się jako wersja 2, pod nowym adresem, i powiadomimy Cię o niej przed wydaniem. Twój kod w wersji 1 nadal działa.