Using Widget API

In Customise Widget Configuration we've setup the Widget, similar to onSetup hook the Iframe Client API provides onReady hook. Once onReady is called, Annoto API actions can be performed:

<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...',
        });
    });
    annoto.onReady(function(api) {
        // recomended, so notifications will have URL to valid pages
        api.registerOriginProvider({
            getPageUrl: function() {
                return location.href;
            },
        });
        var token = 'eyJhbGciO...';
        api.auth(token, function(err) {
            if (err) {
                console.error('sso auth error: ', err);
            }
        });
    });
</script>

The api can be used to accomplish various tasks such as dynamically hide/show the widget, load new configuration and maybe the most common task to perform Single Sign On (SSO) authentication as demonstrated above.

For full API documentation, please refer to the AnnotoApi Reference.

The api object provided by the Iframe Client annoto.onReady has limited capabilities:

1. It does not support Promise based usage. It supports only callbacks.

2. It support only the following methods: auth, load, close, show, hide, registerOriginProvider, logout.

3. registerOriginProvider supports only getPageUrl.

For more information regarding SSO, please refer to the Annoto SSO Technical Guide or contact us at [email protected].