Po załadowaniu widżet udostępnia obiekt window.ChatWidgetAPI i kilka zdarzeń, którymi możesz sterować nim z kodu strony.
ChatWidgetAPI
| Metoda | Opis |
|---|---|
ChatWidgetAPI.init(config) | Uruchamia widżet z podanymi ustawieniami. Klucze jak atrybuty, w formie camelCase: widgetToken, widgetId, theme, widgetMode, widgetTitle, widgetSubtitle, widgetQuestions, widgetColor, widgetLanguage, widgetLink. |
ChatWidgetAPI.setTheme('dark') | Zmienia motyw. Uruchamia widżet ponownie z ustawieniami ze skryptu. |
ChatWidgetAPI.destroy() | Usuwa widżet ze strony. |
window.addEventListener('chat-widget-ready', () => {
window.ChatWidgetAPI.setTheme('dark');
});
Zdarzenia
| Zdarzenie | Kierunek | Opis |
|---|---|---|
chat-widget-ready | widżet → strona | Widżet się załadował i można używać ChatWidgetAPI. |
prosecaptain-open-chat | strona → widżet | Otwiera czat. Jeśli detail.message jest ustawione, od razu wysyła tę wiadomość. |
prosecaptain-chat-response-received | widżet → strona | Asystent odpowiedział. Przydaje się np. do analityki. |
// Otwórz czat i zadaj pytanie z własnego przycisku
window.dispatchEvent(new CustomEvent('prosecaptain-open-chat', {
detail: { message: 'Pokaż mi ofertę dla e-commerce' }
}));
// Zlicz odpowiedzi asystenta
window.addEventListener('prosecaptain-chat-response-received', () => {
console.log('Asystent odpowiedział');
});
Linki z pytaniem
Każdy link z atrybutem pc-ask-question otwiera czat i wysyła podane pytanie. Nie potrzeba żadnego kodu JavaScript:
<a href="#" pc-ask-question="Jak wygląda wdrożenie krok po kroku?">Jak to wdrożyć?</a>