API JavaScript Live Chat
Użyj API JavaScript onWebChat, aby dostosować widget chatu i automatyzować przepływy. Możesz przekazywać dane gościa, ustawiać język widgetu, maksymalizować lub ukrywać widget i inne.
Na przykład możesz wysłać szczegóły gościa do chatu, ustawić język dla konkretnej strony lub otworzyć widget programowo, gdy użytkownik kliknie przycisk.
Dodaj swój kod API tuż pod skryptem widgetu chatu, jak pokazano po prawej.
<script type='text/javascript'>
/* Paste your onWebChat widget installation snippet from the dashboard here. */
</script>
<script type='text/javascript'>
/* Add your JavaScript API calls below, for example onWebChat.set() or onWebChat.get() */
</script>
Ustawianie danych gościa
Możesz ustawiać dane gościa przed lub podczas sesji chatu. Ustawienie imienia pomaga zespołowi identyfikować kontakty na liście gości.
Użyj tych wywołań API, aby ustawić imię, e-mail, telefon i notatki gościa:
onWebChat.set("name","Sarah Chen");
onWebChat.set("email","sarah.chen@example.com");
onWebChat.set("phone","+1 555 010 0142");
onWebChat.set("notes","Returning visitor, requested an Enterprise trial");
Pobieranie danych gościa
Możesz odczytać imię, e-mail, telefon i notatki odwiedzającego, jeśli wartości te zostały podane za pośrednictwem tego API JavaScript, zebrane w formularzu pre-chat lub zaktualizowane przez agentów w panelu sterowania.
Wywołaj te funkcje po pełnym załadowaniu widgetu. Przykład:
onWebChat.set("onWebChatLoaded", function() { console.log("visitor name: " + onWebChat.get("name")); });
onWebChat.get("name");
onWebChat.get("email");
onWebChat.get("phone");
onWebChat.get("notes");
Ustawianie języka widgetu
Ustaw język widgetu używając kodu języka dla dowolnego języka włączonego w panelu.
Np. "pl" dla polskiego, "en" dla angielskiego i "de" dla niemieckiego. Jeśli kod nie jest włączony, widget używa domyślnego języka. Zmień domyślny w Ustawienia > Języki.
Dostępne kody języków:
onWebChat.set("language","es");
Ustawianie wyglądu widgetu
Możesz kontrolować główne ustawienia wyświetlania widgetu:
Użyj parametru max z 0 do minimalizacji lub 1 do maksymalizacji widgetu.
Aby ukryć widget, użyj funkcji set z parametrem show i wartością 0. Użyj 1, aby ponownie pokazać.
onWebChat.set("max",1);
onWebChat.set("show",0);
Ustaw rozmiar widgetu
Na wybranej stronie możesz pokazać widget w jednym z trzech rozmiarów z Ustawienia > Widget, bez zmiany rozmiaru na całym koncie.
Użyj parametru size z wartością "standard", "large" lub "xlarge". Przydaje się na stronach z małą ilością wolnego miejsca albo na landing page, gdzie chcesz większy widget.
Ważne: umieść to wywołanie tuż pod skryptem widgetu, zanim widget się załaduje. Widget jest budowany raz, przy ładowaniu, więc rozmiar ustawiony później jest ignorowany.
onWebChat.set("size","standard");
onWebChat.set("size","large");
onWebChat.set("size","xlarge");
Zmień teksty widgetu
Możesz zastąpić teksty widgetu na wybranej stronie, na przykład inne powitanie na stronie z cennikiem. Nowe teksty działają tylko na tej stronie i nie są zapisywane w panelu.
Użyj parametru texts z obiektem zawierającym pola, które chcesz zmienić, np. max_title, max_subtitle, min_online, min_offline, off_title, off_subtitle, off_msg lub prechat_msg.
Tekst podany jako ciąg znaków jest używany we wszystkich językach widgetu. Aby zmienić tylko jeden język, przekaż obiekt z kodami języków, jak w drugim przykładzie.
Możesz wywołać ją pod skryptem widgetu, zanim się załaduje, albo w dowolnym momencie później: widget zostanie przerysowany z nowymi tekstami.
onWebChat.set("texts",{
max_title: "Need help?",
max_subtitle: "We usually reply in a minute"
});
onWebChat.set("texts",{
min_online: { en: "Chat with us", es: "Chatea con nosotros" }
});
Ustawianie informacji o stronie
Możesz nadpisać aktualny adres URL i tytuł strony wysyłane do onWebChat:
Użyj parametru pageUrl, aby ustawić niestandardowy adres URL widoczny dla agentów w konsoli chatu. Przydatne dla aplikacji typu single-page (SPA) lub niestandardowego routingu.
Użyj parametru pageTitle, aby ustawić niestandardowy tytuł, który agenci zobaczą zamiast tytułu strony przeglądarki.
onWebChat.set("pageUrl","https://onwebchat.com/newPage");
onWebChat.set("pageTitle","New title");
Pobieranie statusu widgetu
Zwraca "online" lub "offline" w zależności od aktualnej dostępności czatu.
Wywołaj po załadowaniu widgetu. Przykład:
onWebChat.set("onWebChatLoaded", function() { console.log("chat status: " + onWebChat.get("status")); });
onWebChat.get("status");
Pobieranie statusu połączenia
Zwraca true, jeśli widget czatu ma aktywne połączenie socket z serwerem, lub false w przeciwnym razie. Przydatne do sprawdzania łączności przed wykonaniem akcji.
onWebChat.get("isConnected");
Stan otwarty/zamknięty widgetu
Zwraca true, jeśli widget czatu jest aktualnie zmaksymalizowany (otwarty), lub false, jeśli jest zminimalizowany (zamknięty).
onWebChat.get("isMaximized");
Pobieranie ID dialogu
Zwraca aktualny aktywny ID dialogu lub 0, jeśli nie ma aktywnego dialogu czatu. Przydatne dla integracji, które muszą powiązać sesję czatu z CRM lub systemem ticketów.
onWebChat.get("dialogId");
Wysyłanie wiadomości
Możesz programowo wysłać wiadomość czatu w imieniu gościa. Przydatne do tworzenia kontekstowych przepływów pomocy, np. wysłanie „Potrzebuję pomocy z zamówieniem" gdy gość kliknie przycisk pomocy.
Wiadomość pojawi się w czacie tak, jakby napisał ją gość. Widget musi być załadowany i połączony przed wysłaniem.
onWebChat.set("sendMessage","I need help with my order");
Ustawianie działu
Możesz wstępnie wybrać dział dla gościa na podstawie kontekstu strony. Na przykład automatycznie kierować gości na stronie cenowej do „Sprzedaży", a na stronie pomocy do „Wsparcia".
Możesz przekazać nazwę działu (string) lub ID działu (number). Nazwa musi odpowiadać jednemu z działów skonfigurowanych w panelu.
ID działu znajdziesz w panelu: przejdź do Ustawień > Zespół > Działy i kliknij dział. ID jest wyświetlane obok nazwy działu.
Nie musisz włączać opcji działów w formularzu pre-chat: ustawienie działu przez JavaScript API działa samodzielnie.
Jeśli żaden agent wybranego działu nie jest online, wiadomość trafia do wszystkich połączonych agentów. Ponadto, gdy dział jest ustawiony przez API, chatbot AI (jeśli włączony) nie odpowiada na ten czat.
Więcej informacji o działach znajdziesz w naszym przewodniku po działach.
onWebChat.set("department","Sales");
onWebChat.set("department",1333);
Funkcje callback
Możesz uruchamiać funkcje callback przy określonych zdarzeniach chatu:
onClick uruchamia się, gdy gość klika w widget chatu
onMaximize uruchamia się, gdy widget jest maksymalizowany
onMinimize uruchamia się, gdy widget jest minimalizowany
onTrigger uruchamia się, gdy wyzwalacz jest aktywowany
onStartWriting uruchamia się, gdy gość zaczyna pisać
onNewMessage uruchamia się, gdy nowa wiadomość zostanie wysłana lub odebrana. Callback otrzymuje dwa argumenty: tekst wiadomości i kto ją wysłał ("visitor", "agent" lub "bot")
onEndChat uruchamia się, gdy czat zostanie zakończony. Callback otrzymuje jeden argument: kto go zakończył ("visitor", "agent" lub "bot")
onChatStatusChange uruchamia się, gdy status widgetu czatu zmienia się na online lub offline. Callback otrzymuje jeden argument: nowy status ("online" lub "offline")
onWebChatLoaded uruchamia się, gdy widget chatu skończy ładowanie
onWebChat.set("onClick",function(){ alert('chat widget is clicked'); });
onWebChat.set("onMaximize",function(){ alert('chat maximized'); });
onWebChat.set("onMinimize",function(){ alert('chat minimized'); });
onWebChat.set("onTrigger",function(){ alert('trigger activated'); });
onWebChat.set("onStartWriting",function(){ alert('visitor is writing'); });
onWebChat.set("onNewMessage",function(msg, by){
console.log('new message by ' + by + ': ' + msg);
});
onWebChat.set("onEndChat",function(endedBy){
console.log('chat ended by ' + endedBy);
});
onWebChat.set("onChatStatusChange",function(status){
console.log('agents are now ' + status);
});
onWebChat.set("onWebChatLoaded",function(){ alert('chat widget is loaded'); });