Once loaded, the widget exposes window.ChatWidgetAPI and a few events you can use to control it from your page code.
ChatWidgetAPI
| Method | Description |
|---|---|
ChatWidgetAPI.init(config) | Starts the widget with the given settings. Keys match the attributes in camelCase: widgetToken, widgetId, theme, widgetMode, widgetTitle, widgetSubtitle, widgetQuestions, widgetColor, widgetLanguage, widgetLink. |
ChatWidgetAPI.setTheme('dark') | Changes the theme. Restarts the widget with the settings from the script tag. |
ChatWidgetAPI.destroy() | Removes the widget from the page. |
window.addEventListener('chat-widget-ready', () => {
window.ChatWidgetAPI.setTheme('dark');
});Events
| Event | Direction | Description |
|---|---|---|
chat-widget-ready | widget → page | The widget has loaded and ChatWidgetAPI is ready. |
prosecaptain-open-chat | page → widget | Opens the chat. If detail.message is set, sends that message straight away. |
prosecaptain-chat-response-received | widget → page | The assistant answered. Useful for analytics. |
// Open the chat and ask a question from your own button
window.dispatchEvent(new CustomEvent('prosecaptain-open-chat', {
detail: { message: 'Show me the e-commerce offer' }
}));
// Count assistant answers
window.addEventListener('prosecaptain-chat-response-received', () => {
console.log('The assistant answered');
});Question links
Any link with the pc-ask-question attribute opens the chat and sends that question. No JavaScript needed:
<a href="#" pc-ask-question="What does onboarding look like?">How to get started?</a>