# Button

<figure><img src="https://1024951375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mj3mk8X1lr8iYBWypC-%2Fuploads%2FW8PKOi00iM7DD61rHv8E%2Fimage.png?alt=media&#x26;token=f81aed70-d488-42b6-b04c-c489b7c7b395" alt=""><figcaption></figcaption></figure>

## Actions

### Custom action

To add custom action select "**Custom"** in the **"Link\&action"** dropdown menu.

<figure><img src="https://1024951375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mj3mk8X1lr8iYBWypC-%2Fuploads%2FCP7Z4J0IyXodlx83bgxf%2FScreenshot%202025-02-07%20at%2015.48.27.png?alt=media&#x26;token=507bd469-16d2-4c67-a645-fd61563b9460" alt=""><figcaption></figcaption></figure>

#### Web

To use a custom action in the WebSDK, provide the necessary information in the **Web** field. For example, you can enter details such as the navigation path or screen name. Then, handle the button click event to capture this data.

To handle the event, get a container with the following HTML selector -`#storysdk`:

```javascript
const container = document.querySelector('#storysdk');
```

Add event listener to listen `'storysdk_custom_click'` event:&#x20;

```javascript
container.addEventListener('storysdk_custom_click', (event) => {
    console.log('my custom data', event.detail.data);
    // Wtrite your code here
});

```

To retrieve the data you entered, use the `event.detail.data` field inside the event listener.

<figure><img src="https://1024951375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mj3mk8X1lr8iYBWypC-%2Fuploads%2FuYqFi6IeoUkfkolTLSsT%2FScreenRecording2025-02-10at17.29.05-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=54bac383-80db-4e04-9243-83b022306ff4" alt=""><figcaption></figcaption></figure>
