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.

Under the hood, we use postMessage for communicating with the widget in the Iframe.

Load the Iframe API Script

<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

<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, 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.

config.widgets[0].player.type and element are setup for Wistia internally by the plugin.

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 theconfig.widget[0].player.mediaSrc()for the Wistia player plugin.