telybot Trochę mniej zwyczajnie.
Dużo inteligentniej.
PolandEnglish Zaloguj się Porozmawiajmy Zacznij za darmo
Dokumentacja TelybotDokumentacja techniczna

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://telybot.com/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:

ZadzwońCo to robi
KeydaBot.open()Otwiera panel czatu
KeydaBot.close()Zamyka go
KeydaBot.toggle()Otwiera lub zamyka
KeydaBot.expand()Sprawia, że panel ma wysokość okna i szerokość do 760 px
KeydaBot.shrink()Powrót do standardowej karty
KeydaBot.isOpentrue kiedy czat jest widoczny
KeydaBot.isExpandedtrue, gdy panel jest rozwinięty
KeydaBot.clientIdIdentyfikator klienta (client id) używany przez tę stronę

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

<button onclick="KeydaBot.open()">Chat with us</button>
Skrypt ładuje się asynchronicznie, więc window.KeydaBot może przez chwilę nie istnieć po załadowaniu strony. Przypisuj obsługę zdarzeń do kliknięcia zamiast wywoływać ją w trakcie parsowania strony.

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.
  • Czat otwiera się Twoim powitaniem i maksymalnie czterema sugerowanymi pytaniami w postaci przycisków — napisz własne w Zainstaluj → Sugerowane pytania albo zostaw domyślne. Nic więcej nie pada, dopóki odwiedzający nie kliknie jednego lub nie napisze, a karty z Twojego katalogu pojawiają się, gdy pyta o ceny lub produkty, nie wcześniej.
  • Gdy Informuj, że to asystent AI jest włączone, nagłówek na każdym ekranie pokazuje „Asystent AI” pod nazwą Twojego bota.
  • Czat trwa tak długo jak karta przeglądarki odwiedzającego. Przechodzenie między Twoimi stronami go zachowuje, a ponowne otwarcie panelu przywraca rozmowę — razem z plikami i pytaniem ze scenariusza powitalnego, które wciąż czekało na odpowiedź. Zamknięcie karty go kończy, a następna wizyta otwiera nowy czat. Odpowiedź Twojego zespołu nadal dotrze do odwiedzającego, który poprosił o człowieka, w jego następnym czacie, przez dwa tygodnie.
  • Czaty z tej samej przeglądarki są połączone w Czaty („Odwiedzający · czaty: 3”), dzięki czemu możesz czytać rozmowy jednego odwiedzającego obok siebie. Połączenie to losowy identyfikator przechowywany w przeglądarce odwiedzającego; nie powstaje, gdy przeglądarka prosi o nieśledzenie.
  • 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.

Na iOS systemowy panel oferuje opcję Zrób zdjęcie zawsze, gdy akceptowane są obrazy, a jej wybranie powoduje awarię aplikacji, która nie ma NSCameraUsageDescription w swoim pliku Info.plist. Dodaj ten klucz, zanim wypuścisz build z czatem.
Next: App SDKs →