> ## 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 Webchat to your website

> Let your website know when something happens in your user's conversation.

You can send custom events from Webchat to your website. This is useful if you want your website to perform an action when your user reaches a certain point in its conversation with your bot.

> [!NOTE]
>
> You will need:
>
> * A website with an [embedded bot](webchat/get-started/quick-start)
> * Familiarity with JavaScript

### 1. Add a Send Custom Event Card

In Botpress Studio, add a **Send Custom Event** Card to the Node you want to trigger the event from:

![Send Custom Event Card](https://mintcdn.com/botpress/q8S__MXzNBiXVmVj/webchat/interact/send-custom-events/assets/send-custom-event.png?fit=max\&auto=format\&n=q8S__MXzNBiXVmVj\&q=85\&s=3b8600c0c095c64a4181a11ad3373332)

Set the **Conversation ID** to `{{event.conversationId}}`. Then, add any [valid JSON](https://www.w3schools.com/js/js_json_syntax.asp) to the **Event** field.

The contents of the **Event** field should clearly identify the action you want your website to perform. For example, if you want to checkout with the user's current shopping cart, you could add something like `{"action": "checkout"}`.

> [!TIP]
>
> You can also use [variables](https://botpress.com/docs/studio/concepts/variables/) to dynamically insert the contents of the **Event** field.

### 2. React to the event on your website

Now, you can react to the event in your website's source code using a [custom event listener](https://botpress.com/docs/webchat/interact/listen-to-events.md#custom-event).

```javascript index.js {3} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
window.botpress.on('customEvent', (event) => {
    console.log('Custom event triggered: ', event);
    // Insert your code here
});
```

Here, `event` contains whatever data you put in the **Event** field of the **Send Custom Event** Card. You can read its contents if you want your website to react differently depending on which custom event you send. For example:

```javascript index.js {3-8} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
window.botpress.on('customEvent', (event) => {  
    console.log('Custom event triggered: ', event);
    if (event.action === "action1") {
        // Handle the first kind of event
    }
    else if (event.action === "action2") {
        // Handle the second kind of event
    }
});
```

> [!TIP]
>
> You can [listen to other kinds of Webchat events](https://botpress.com/docs/webchat/interact/listen-to-events.md), too.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.