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

# Custom and Third‑Party JavaScript Integration

The **Miso Answers SDK** provides hooks that you can use to trigger and integrate with your own or third‑party JavaScript functions. These hooks allow you to extend how answers behave, whether by listening to API responses, intercepting answer links, or integrating with external systems like Piano.

***

## Data Hooks

The SDK provides a series of **data hooks** that your code can listen to.

Reference: [Miso SDK — Answers Events](https://misoai.github.io/miso-client-js-sdk/answers/ask/events/)

### Example: Data Event

```javascript theme={null}
const context = client.ui.asks;

context.on('data', ({ status, value }) => {

  if (!value) return;

  console.log('API response', value);

});
```

This event fires whenever the SDK receives a response from the Miso API.

***

## Answer Link Clicking Hook

Another way to trigger custom logic is by listening to **link click events** inside answers.

This is especially useful when Miso responses contain messages such as:

* *You've reached your usage limit, please *[*sign in*](https://example.com/#miso-signin-click)* or *[*register*](https://example.com/#miso-reg-click)* to continue.*
* Conditional messages with static URLs like `https://example.com/#miso-reg-click`.

By intercepting these links, you can override default navigation and trigger your own logic.

***

## Example Integration: Piano Registration Redirect (Inside Link Listener)

Below is a complete example where clicking a `#miso-reg-click` link triggers **Piano's loginRequired handler** automatically:

```javascript theme={null}
const targetHash = "#miso-reg-click";

document.addEventListener('click', function(event) {

  const link = [event.target](http://event.target).closest('a');

  if (\!link) return;

  const href = link.getAttribute('href');

  if (\!href) return;

  if (href.endsWith(targetHash)) {

    event.preventDefault();

    // Initialize Piano if not already

    tp = window.tp || [];

    tp.push([

      "addHandler",

      "loginRequired",

      function (params) {

        // Save Piano state in a cookie for the redirect page

        document.cookie =

          "\__pianoParams=" \+

          encodeURIComponent(JSON.stringify(params)) \+

          "; expires=" \+

          new Date(new Date().getTime() \+ 60 _60 _  1000).toGMTString() \+

          "; path=/; domain=.[example.com](http://example.com)";

        // Redirect to a dedicated login/registration page

        location.href = "http://example.com/login";

      }

    ]);

    // Trigger Piano login flow

    tp.push(["showLogin"]);

  }

});
```

***

## Summary

* **Data hooks** let you monitor API responses in real time.
* **Answer link clicking hooks** let you intercept links such as *sign in* or *register*.
* **Piano integration inside the listener** allows you to seamlessly redirect users into a dedicated login or registration flow when they click inside an Answer.