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.

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:

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

window.botpress.sendEvent(customPayload)

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

Add a Custom Trigger

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

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

In the Event Filter field, enter {{event.payload}}. This will capture the most recent event you send.
Select Test, then Show last received events. This will display any events you’ve sent from your website.
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.

Test your trigger

Now you can test your Custom Trigger:

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

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

Add the useWebchat hook

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

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.

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:

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

import { Fab, Webchat, useWebchat } from '@botpress/webchat'
import { useState } from 'react'

function App() {
  const clientId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  // Replace with your actual client ID
  const [isWebchatOpen, setIsWebchatOpen] = useState(false)
  const toggleWebchat = () => {
    setIsWebchatOpen((prevState) => !prevState)
  }

  const { client } =
    useWebchat({
      clientId: clientId
  })

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

  return (
    <>
      <button onClick={() => client.sendEvent(customPayload)}>
        Send custom event
      </button>
      <Webchat
        clientId={clientId}
        style={{
          width: '400px',
          height: '600px',
          display: isWebchatOpen ? 'flex' : 'none',
          position: 'fixed',
          bottom: '90px',
          right: '20px',
        }}
      />
      <Fab
        onClick={() => toggleWebchat()}
        style={{
          position: 'fixed',
          bottom: '20px',
          right: '20px',
          width: '64px',
          height: '64px'
        }}
      />
    </>
  )
}

export default App