# Button

<figure><img src="/files/NFrjL3SntgbyDESbWveU" alt=""><figcaption></figcaption></figure>

## Actions

### Custom action

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

<figure><img src="/files/TWFcN77whrQhNoxD7jFi" 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="/files/3bCtoBmTMNw6Ai1blvoA" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.storysdk.com/tutorial/widgets/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
