API widżetu

Dla deweloperów lub każdego, kto chce, aby czat otwierał się po kliknięciu własnego przycisku.

Instalacja

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

Znacznik skryptu potrzebuje tylko src i data-key. Wszystko inne — kolory, pozycja, powitanie, język — pochodzi z Twojego panelu, więc nigdy nie musisz ponownie wdrażać strony, aby to zmienić.

Widget jest wyświetlany w języku ustawionym w sekcji Instalacja → Język, którym mówi Twój bot: jego przycisk, pola i komunikaty oraz kierunek układu (arabski i urdu są od prawej do lewej). Teksty docierają razem z konfiguracją widgetu, więc nie ma drugiego zapytania ani niczego do tłumaczenia po Twojej stronie.

Tryby

Pływający (domyślnie). Przycisk uruchamiający w rogu, otwierający panel czatu.

Wbudowany. Umieść pusty kontener na stronie, a czat wypełni go zamiast wyświetlać się w dymku:

<div data-keyda-bot style="height:520px"></div>

Kontener potrzebuje wysokości. W trybie wbudowanym czat jest stale widoczny, więc nie ma nic do otwierania ani zamykania.

JavaScript API

Dostępne na window.KeydaBot po załadowaniu skryptu:

Przykład — otwórz czat za pomocą własnego przycisku „Porozmawiaj z nami”:

<button onclick="KeydaBot.open()">Chat with us</button>

Jak zachowuje się na Twojej stronie

• Panel otwiera się nad przyciskiem uruchamiania, który pozostaje na swoim miejscu i staje się elementem zamykającym. Ponowne dotknięcie, symbol ✕ w nagłówku lub naciśnięcie klawisza Escape zamyka czat.
• Odwiedzający może rozwinąć panel za pomocą nagłówka – rośnie on do wysokości okna i szerokości do 760 px, a ten wybór jest zapamiętywany w przeglądarce. W telefonach panel zajmuje już cały ekran, więc ten element sterujący nie jest tam wyświetlany.
• Ustawienie Rozmiar logo zmienia logo, nie przycisk: przycisk czatu zachowuje swój rozmiar, a logo w jego wnętrzu się powiększa. To Rozmiar przycisku (Instalacja → Wygląd) zmienia rozmiar samego przycisku — małego, średniego lub dużego — niezależnie od jego kształtu.
• Cztery kształty przycisku: pigułka z Twoją etykietą, okrągły dymek, zaokrąglony kwadrat oraz dymek czatu z ogonkiem. Ogonek znajduje się po stronie zwróconej ku Twojej stronie.
• Wszystko renderuje się wewnątrz shadow root, więc Twoje CSS nie uszkodzi widgetu, a CSS widgetu nie wpłynie na Twoją stronę.
• Panel ładuje się dopiero po otwarciu przez odwiedzającego, więc nie spowalnia strony.
• Rozmowa odwiedzającego jest kontynuowana przez 24 godziny, jeśli wróci, a potem zaczyna się od nowa. Ponowne otwarcie panelu przywraca wątek — łącznie z plikami i pytaniem ze scenariusza powitalnego, na które wciąż czekano na odpowiedź.
• Spinacz w polu wpisywania pozwala odwiedzającemu dołączyć do wiadomości do trzech zdjęć lub dokumentów (rozmiary i typy w sekcji Limity i bezpieczeństwo). Zdjęcia są pomniejszane w przeglądarce przed wysłaniem, więc 12-megapikselowe zdjęcie opuszcza stronę jako zaledwie kilkaset kilobajtów. Wyłącz pliki w sekcji Instalacja, a przycisk zniknie.
• Scenariusz powitalny działa jak zwykłe dymki: opcje stają się przyciskami pod dymkiem, przycisk Pomiń pojawia się, gdy krok jest opcjonalny, a placeholder pola wpisywania zamienia się w pytanie. Ukończony scenariusz jest zapamiętywany w przeglądarce odwiedzającego przez 30 dni.
• Jeśli asystent jest niedostępny, widżet wyświetla krótką wiadomość i nigdy nie zgłasza błędu na stronie.

W pakietach SDK dla aplikacji

Ten sam czat działa w każdym SDK, więc załączniki i scenariusze powitalne trafiają do Twojej aplikacji bez nowego wydania — z jednym wyjątkiem. Otwarcie selektora plików z poziomu widoku webowego to zadanie aplikacji hosta. Pakiety iOS, React Native i Ionic już to robią; Android i Flutter wymagają SDK 0.1.4 lub nowszego. W starszych wersjach widget rozpoznaje powłokę i ukrywa spinacz zamiast pokazywać przycisk, który nic nie robi.