> ## Documentation Index
> Fetch the complete documentation index at: https://docs.explo.co/llms.txt
> Use this file to discover all available pages before exploring further.

# JS Event Button

> The JavaScript Event Button enables users to trigger custom JavaScript events.

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/js-event-button-1.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=fdb4e05b83dd659898a40780c775dc36" alt="" width="424" height="418" data-path="images/creating-dashboards/js-event-button-1.png" />

## What it does

The Javascript Event Button emits a custom JavaScript event, facilitating the execution of additional scripts in response.

## Configuration

<img src="https://mintcdn.com/explo/jiW-YLiBORwgUQTi/images/creating-dashboards/js-event-button-2.png?fit=max&auto=format&n=jiW-YLiBORwgUQTi&q=85&s=c8d636008ac6768e393271ac0d00c997" alt="" width="804" height="564" data-path="images/creating-dashboards/js-event-button-2.png" />

### Basic Configuration

| Configuration Option | Description                                                                                                 |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| Button Text          | This is the text displayed on the button on the dashboard. It defaults to "JS Event"                        |
| JS Event Name        | Specifies the custom JavaScript event name to emit. Note: Leaving this field blank will disable the button. |

The detail body that is passed with the javascript event contains the `customerName` and the `customerProvidedId` for the customer who clicked the button.

### Example Code

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      const messageListener = (e) => {
        console.log(e.detail);
      };
      window.addEventListener("EVENT_NAME", messageListener);
    </script>
  </head>
  <body>
    <explo-dashboard
      dash-jwt="<your-jwt>"
    />
  </body>
</html>
```
