> For the complete documentation index, see [llms.txt](https://docs.annoto.net/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.annoto.net/developers/kaltura-plugin-v2/customise-annoto-widget-configuration.md).

# 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 %}