# Customise Widget Configuration

The Annoto Widget is loaded inside the wistia player iframe so direct access to the Widget API and configuration is not possible.

Luckily we provide a helper script that exposes API to configure the widget and perform API actions.

{% hint style="info" %}
Under the hood, we use [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) for communicating with the widget in the Iframe.
{% endhint %}

## Load the Iframe API Script

```markup
<iframe src="https://fast.wistia.net/embed/iframe/r440odi4pc?seo=false&videoFoam=true&&plugin%5Bannoto%5D%5Bsrc%5D=https%3A%2F%2Fcdn.annoto.net%2Fwistia-plugin%2Flatest%2Fplugin.js" title="Borrowed video: Welcome to Wistia!" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
```

## Setup the Iframe Client API

```markup
<iframe src="https://fast.wistia.net/embed/iframe/r440odi4pc?seo=false&videoFoam=true&&plugin%5Bannoto%5D%5Bsrc%5D=https%3A%2F%2Fcdn.annoto.net%2Fwistia-plugin%2Flatest%2Fplugin.js" title="Borrowed video: Welcome to Wistia!" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
<script>
    var annoto = new AnnotoIframeApi.Client(document.getElementById("wistia-player-id"));
    annoto.onSetup(function(next) {
        next({
            clientId: 'eyJhbGciOiJIUzI1NiJ9...',
        });
    });
</script>
```

The Iframe Client API requires the Wistia player Iframe embed element as constructor argument: `new AnnotoIframeApi.Client(document.getElementById("wistia-player-id"))`

`annoto.onSetup()` provides opportunity to config  set the [Widget Configuration](https://docs.annoto.net/developers/widget/getting-started#configuration), for example configure the `clientId` (Annoto API key).

Once configuration object is ready, call `next(config)` to bootstrap the widget inside the Wistia player iframe.

{% hint style="success" %}
`config.widgets[0].player.type and element` are setup for Wistia internally by the plugin.
{% endhint %}

{% hint style="warning" %}
If player configuration callbacks are provided:\
`config.widgets[0].player.mediaDetails()`\
`config.widget[0].player.mediaSrc()`\
They are called synchronously when next(config) is called. So the media details and the source should be already available at the time when next(config) is called.\
The callbacks are called once during the setup.\
It is NOT recommended to use the`config.widget[0].player.mediaSrc()`for the Wistia player plugin.
{% endhint %}