> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](https://botpress.com/docs/webchat/get-started/quick-start.md), follow the steps below to send custom events:
> [!NOTE]
>
> You will need:
>
> * A website with an [embedded bot](https://botpress.com/docs/webchat/get-started/quick-start.md)
> * Familiarity with JavaScript
> [!TIP]
>
> Visual learner? Check out our [YouTube guide](https://www.youtube.com/watch?v=dDGY_wHFt3s\&pp=0gcJCY0JAYcqIYzv) 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`](https://botpress.com/docs/webchat/interact/reference#sendevent) method:
```javascript index.js theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
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](https://botpress.com/docs/studio/concepts/triggers.md#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**.
> [!WARNING]
>
> 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](https://botpress.com/docs/studio/concepts/emulator.md).
> [!TIP]
>
> 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](https://botpress.com/docs/webchat/react-library/get-started.md), follow the steps below to send custom events:
> [!NOTE]
>
> You will need:
>
> * A working React app that [implements Webchat](https://botpress.com/docs/webchat/react-library/get-started.md#step-2%3A-build-a-component)
**1. Add the useWebchat hook**
At the top level of your React component that renders Webchat, add the [`useWebchat`](https://botpress.com/docs/webchat/react-library/hooks/use-webchat-client) hook and destructure the `client` object:
```jsx Hook by itself theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
const { client } =
useWebchat({
clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
// Replace with your actual client ID
})
```
```jsx Example in a full React app expandable lines highlight={13-16} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
import { Fab, Webchat, useWebchat } from '@botpress/webchat'
import { useState } from 'react'
function App() {
const clientId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
// Replace with your actual client ID
const [isWebchatOpen, setIsWebchatOpen] = useState(false)
const toggleWebchat = () => {
setIsWebchatOpen((prevState) => !prevState)
}
const { client } =
useWebchat({
clientId: clientId
})
return (
<>
toggleWebchat()}
style={{
position: 'fixed',
bottom: '20px',
right: '20px',
width: '64px',
height: '64px'
}}
/>
)
}
export default App
```
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:
```jsx theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
const customPayload = {
"test": "test"
}
```
Then, send the event using `client.sendEvent(customPayload)`. For example, in a button:
```jsx Send event button theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
```
```jsx Example in a full React app expandable lines highlight={17-19, 23-25} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
import { Fab, Webchat, useWebchat } from '@botpress/webchat'
import { useState } from 'react'
function App() {
const clientId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
// 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 (
<>
toggleWebchat()}
style={{
position: 'fixed',
bottom: '20px',
right: '20px',
width: '64px',
height: '64px'
}}
/>
)
}
export default App
```
**3. Add a Custom Trigger**
Next, add a [Custom Trigger](https://botpress.com/docs/studio/concepts/triggers.md#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**.
> [!WARNING]
>
> 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](https://botpress.com/docs/studio/concepts/emulator.md).
> [!TIP]
>
> Once you've re-published your bot, it'll respond to custom events.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.