Kod widżetu czatu AI: dodaj asystenta wsparcia do dowolnej strony
Skopiuj jeden tag script i umieść na stronie asystenta czatu AI z odpowiedziami na żywo. Poradnik omawia kod do osadzenia, jego opcje i to, co sprawdzić przed publikacją.
Opublikowano:
Widżet czatu AI odpowiada odwiedzającym na stronie, którą właśnie czytają. W api14 cała integracja to jeden tag script: projektujesz widżet w panelu, kopiujesz kod i wklejasz go do HTML. Nie trzeba instalować SDK ani pisać kodu po stronie serwera.
Co robi widżet czatu
Widżet czatu to małe okno rozmowy, w którym odpowiedzi wybranego przez Ciebie modelu pojawiają się na bieżąco. Model stosuje się do prywatnych instrukcji, które piszesz Ty i których odwiedzający nigdy nie widzą, więc może pełnić rolę konsultanta wsparcia, asystenta sprzedaży albo przewodnika po dokumentacji. Odpowiedzi obsługują podstawowe formatowanie (akapity, listy, pogrubienie, kod i linki), przycisk Zatrzymaj przerywa długą odpowiedź, a rozmowa zostaje zachowana, gdy odwiedzający przechodzi między stronami w tej samej karcie.
Kod widżetu
Po zapisaniu widżetu w sekcji Widżety edytor pokazuje jego kod do osadzenia:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Umieść tag wewnątrz <body> w miejscu, gdzie ma pojawić się czat. Dwa opcjonalne atrybuty zmieniają miejsce i sposób wyświetlania:
| Atrybut | Co robi |
|---|---|
data-target | Selektor CSS elementu, w którym widżet ma się wyświetlić, na przykład #support. |
data-height | Wysokość widżetu osadzonego w treści, na przykład 520px. Czat ma domyślnie 480px. |
Jeśli wolisz przycisk w rogu ekranu, wybierz w edytorze umiejscowienie Pływający przycisk. Kod pozostaje taki sam.
Cztery kroki do działającego asystenta czatu
- Wybierz model. Sprawdzi się każdy model czatu z katalogu. Selektor pokazuje cenę każdego modelu, więc możesz zacząć od szybkiego, taniego modelu i zmienić go później bez zmian na stronie.
- Wybierz klucz API. Każdy widżet działa na jednym z Twoich kluczy API. Wybierz istniejący klucz lub użyj ostatniej opcji na liście, Utwórz nowy klucz API, aby utworzyć klucz tylko dla tego widżetu. Limity klucza obowiązują widżet, a sam klucz nigdy nie trafia do przeglądarki.
- Napisz instrukcje i teksty. Ustaw tytuł, powitanie, tekst w polu wpisywania i etykietę przycisku. Dodaj prywatne instrukcje opisujące Twój produkt i oczekiwany ton.
- Zezwól na swoje domeny. W sekcji Ustawienia, Strony widżetów wpisz strony, na których widżet może działać. Żądania z innych stron są odrzucane.
Dlaczego nie psuje Twojej strony
Widżet wyświetla się w odizolowanym Shadow DOM. Twój CSS nie przenika do okna czatu, a widżet nie zmienia stylów Twojej strony. Ładuje się asynchronicznie, więc nie blokuje wyświetlania reszty treści.
Zanim opublikujesz
- Otwórz podgląd w edytorze i zadaj pytania, które naprawdę zadają Twoi klienci. Podgląd wysyła prawdziwe żądania z niezapisanymi ustawieniami.
- Ustaw dzienny limit wydatków widżetu, aby pracowity dzień Cię nie zaskoczył.
- Sprawdź, czy saldo pokryje spodziewany ruch. Żądania odwiedzających są pobierane z Twojego salda w USD według zwykłej ceny modelu.
Chcesz spróbować? Zaprojektuj widżet czatu bez zakładania konta na stronie widżetów, a potem przeczytaj pełny opis w dokumentacji widżetów.