# Customise Annoto Widget configuration

When the Annoto plugin is loaded by the Kaltura player, it triggers custom events that allows you to get access to the [configuration](/developers/widget/getting-started.md#configuration) and the [API](/developers/widget/getting-started.md#using-the-api) for full customisation and control of the widget.

## Listen to Kaltura Player events

To subscribe to Kaltura player events please use Kaltura player API:

```javascript
kWidget.addReadyCallback(function (playerId) {
        var player = document.getElementById(playerId);
        player.kBind('annotoPluginSetup', function (params) {
                var config = params.config;
                // Modify the Annoto configuration
        });
        player.kBind('annotoPluginReady', function (annotoApi) {
                // Make use of the Annoto API
        });
});
```

{% hint style="success" %}
For detailed information on the Kaltura player API, please refer to <http://player.kaltura.com/docs/api>
{% endhint %}

## Modify Annoto configuration&#x20;

`annotoPluginSetup` is triggered first by the Annoto plugin and provides opportunity to modify the Annoto widget configuration before the [widget is bootstrapped](/developers/widget/getting-started.md#setup).

Once the widget is bootstrapped by the plugin `annotoPluginReady` is triggered and provides access to the [Annoto API](/developers/widget/getting-started.md#using-the-api).

Below is an example of modifying some basic widget options:

```javascript
player.kBind('annotoPluginSetup', function (params) {
    var config = params.config;

    config.clientId = 'eyJhbGciOiJ...';
    config.locale = 'en';

    config.hooks.getPageUrl = function() {
        return window.location.href;;
    };
    
    // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#mediaDetails
    config.hooks.mediaDetails = function(params) {
        return {
            ...params?.details,
            // Optionaly use your own video identifier
            // https://annoto.github.io/widget-api/interfaces/config_media_details.IMediaDetails.html#id
            // id: 'unique_video_identifier',
        };
    };
    
    config.hooks.ssoAuthRequestHandle = function() {
        // trigger user login
        // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#ssoAuthRequestHandle
        window.location.replace('https://example.com/login');
    };
});
```

{% hint style="warning" %}
config is already setup by the Kaltura Annoto plugin, so we need only to override the required configuration, such as clientId, getPageUrl hook, etc. **DO NOT CHANGE THE PLAYER TYPE OR PLAYER ELEMENT CONFIG**.
{% endhint %}

{% hint style="success" %}
For the default widget configuration used by the plugin please refer to: [https://github.com/Annoto/kaltura-plugin](https://github.com/Annoto/kaltura-plugin/blob/master/app/scripts/plugin/plugin.ts#L120)
{% endhint %}

## Single Sign On

The plugin exposes `annotoPluginReady` event that provides access to the [API](/developers/widget/getting-started.md#using-the-api) for implementing the [SSO](/developers/integrations/sso.md#introduction) functionality.

```javascript
player.kBind('annotoPluginReady', function (annotoApi) {
    // token is the generated user authentication JWT token
    annotoApi.auth(token);
});
```

## &#x20;Asynchronous Widget Bootstrap

{% hint style="success" %}
Advanced topic
{% endhint %}

In some cases you might not have the required configuration for the Annoto Widget when `annotoPluginSetup` is triggered, or would want to postpone the bootstrap of the widget until some condition is met.

```javascript
var delayDoneCallback;
var annotoConfig;
player.kBind('annotoPluginSetup', function (params) {
    
    // Set params.await to the following function:
    params.await = function (doneCb) {
        delayDoneCallback = doneCb;
    };
    annotoConfig = params.config;
});

// do some async work and when ready call the delayDoneCallback:

setTimeout(function() {
    // Modify the Annoto configuration asynchronously
    annotoConfig.clientId = 'eyJhbGciOiJ...';
    delayDoneCallback();
}, 200);
```

{% hint style="info" %}
Until `delayDoneCallback` is called, the widget won't be bootstrapped and `annotoPluginReady` won't be triggered.
{% endhint %}

{% hint style="success" %}
If doneCb is not called, the widget is not bootstrapped. This can be used to dynamically decide on which videos to load the annoto plugin.
{% endhint %}


---

# 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.annoto.net/developers/kaltura-plugin-v2/customise-annoto-widget-configuration.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.