Send custom events from your website to Webchat

You can send custom events from your website to Webchat. This is useful if you want your bot to transition to a certain Node or Workflow when something happens on your website.

With embedded Webchat

If you added Webchat to your website using the embed code, follow the steps below to send custom events:

You will need:

• A website with an embedded bot
• Familiarity with JavaScript

Visual learner? Check out our YouTube guide on sending custom events.

1. Send an event to Webchat

   First, set up an event to send Webchat from your website’s source code. Use the window.botpress.sendEvent method:

   index.js

   const customPayload = {
       "test": "test"
   }
   
   window.botpress.sendEvent(customPayload)
   

   You can replace the data in customPayload with anything you like.

2. Add a Custom Trigger

   Next, add a Custom Trigger to your bot’s Workflow:

   1. In your Workflow, right-click and select Trigger, then Custom Trigger:

   

   2. In the Event Filter field, enter {{event.payload}}. This will capture the most recent event you send.
   3. Select Test, then Show last received events. This will display any events you’ve sent from your website.
   4. If you’ve already sent your event, it should show up here. Select Add as Test, then Save.

   This step is mandatory. The Custom Trigger won’t work until you’ve successfully tested it.

3. Test your trigger

   Now you can test your Custom Trigger:

   1. Add a transition from the Custom Trigger to another Node. For example:

   

   2. Select the button to test the Custom Trigger’s behaviour in the Studio’s Emulator.

Once you’ve re-published your bot, it’ll respond to custom events.

With the Webchat React library

If you’re using the Webchat React library, follow the steps below to send custom events:

You will need:

• A working React app that implements Webchat

1. Add the useWebchat hook

   At the top level of your React component that renders Webchat, add the useWebchat hook and destructure the client object:

   Hook by itself

   const { client } =
     useWebchat({
       clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
       // Replace with your actual client ID
   })
   

   Remember to replace the placeholder clientId with your bot’s actual client ID.

2. Send an event to Webchat

   Now, use the client instance to send an event to Webchat. First, define a payload object with any data you’d like. For example:

   const customPayload = {
       "test": "test"
   }
   

   Then, send the event using client.sendEvent(customPayload). For example, in a button:

   Send event button

   <button onClick={() => client.sendEvent(customPayload)}>
     Send custom event
   </button>
   

3. Add a Custom Trigger

   Next, add a Custom Trigger to your bot’s Workflow:

   1. In your Workflow, right-click and select Trigger, then Custom Trigger:

   

   2. In the Event Filter field, enter {{event.payload}}. This will capture the most recent event you send.
   3. Select Test, then Show last received events. This will display any events you’ve sent from your website.
   4. If you’ve already sent your event, it should show up here. Select Add as Test, then Save.

   This step is mandatory. The Custom Trigger won’t work until you’ve successfully tested it.

4. Test your Custom Trigger

   Now you can test your Custom Trigger:

   1. Add a transition from the Custom Trigger to another Node. For example:

   

   2. Select the button to test the Custom Trigger’s behaviour in the Studio’s Emulator.

Once you’ve re-published your bot, it’ll respond to custom events.