You can listen to Webchat events within your website’s source code. This is useful if you want to:

  • Make your website more responsive to Webchat
  • Adjust UI elements depending on Webchat’s status
  • Handle Webchat errors on your website

To listen any of the events on this page, just copy and paste the code snippet into your source code. Then, you can add whatever code you want — it’ll execute whenever the event fires.

You will need:

  • A website with an embedded bot
  • Familiarity with JavaScript

​
Webchat is ready

This event fires when Webchat is initialized and ready:

index.js
window.botpress.on('webchat:ready', () => {
	console.log('Webchat is ready.');
    // Insert your code here
});

​
Webchat opens

This event fires when the Webchat window is opened:

index.js
window.botpress.on('webchat:opened', () => {
    console.log('Webchat was opened.');
    // Insert your code here
});

​
Webchat closes

This event fires when the Webchat window is closed:

index.js
window.botpress.on('webchat:closed', () => {
    console.log('Webchat was closed.');
    // Insert your code here
});

​
New conversation starts

This event fires when a new conversation starts in Webchat:

index.js
window.botpress.on('conversation', (conversationId) => {
	console.log('Conversation ID: ', conversationId);
    // Insert your code here
});

​
Message is sent

This event fires when either the user or the bot sends a message:

index.js
window.botpress.on('message', (message) => {
	console.log('Message received: ', message);
    // Insert your code here
});

​
Error occurs

This event fires when the bot raises an error:

index.js
window.botpress.on('error', (error) => {
	console.log('Error: ', error);
    // Insert your code here
});

​
Custom event

This event fires when the bot triggers a custom event:

index.js
window.botpress.on('customEvent', (event) => {
    console.log('Custom event triggered: ', event);
	// Insert your code here
});