Setup the Plugin

Setup of the Annoto plugin requires the following conditions to be met:

  1. Kaltura player must be embedded using any form of embed except the IFrame embed.

  2. Annoto plugin script loaded on page after the Kaltura Player script.

  3. Annoto plugin configuration added to the Kaltura player.

There are 2 supported approaches to meet the conditions, each has it own cons/pros:

  1. Setup using script tag with Auto Boot - most flexible approach, but requires once to set the configuration parameters in plugin embed code, and can be copy past after.

  2. Setup using script tag and KMC - set the configuration parameters in the KMC Player studio advanced settings, but support for embed types is limited and requires careful placement of the Annoto plugin script tag.

Both aproaches are explained in detail below.

Setup using script tag with Auto Boot

This approach requires only adding the annoto plugin script tag on page and making sure it executes after the Kaltura Player script.

The annoto plugin configuration is provided via script query parameters or global variables.

In this approach the plugin picks up the parameters and automatically injects annoto plugin configuration into the Kaltura Player.

Script Tag query parameters

Below is the minimal required parameters:

  1. auto_boot=1

  2. api_key=eyJhbGciOiJIUzI1NiJ9...

For example:

<script defer src="https://cdn.annoto.net/playkit-plugin/latest/plugin.js?auto_boot=1&api_key=eyJhbGciOiJIUzI1NiJ9.ZjU4MTMyMzgtZTBiNS00NTM2LWE1ZTEtNTliMGZhMjYzZjVm.3vX2MeaEtjKS83Iqj9K_D-3-NWMXAJUoslpQEuTFVGk"></script>

Full list of query paramaters

Query parameter
Required
Supported value
Description

auto_boot

'1', 'true'

informs the plugin to perform automatic setup and load the widget

api_key

JWT token string

provide the api key provided by Annoto

region

eu , us , staging

The region of the Annoto service for the API key. The default is eu

theme

dark , default

The prefered widget theme. Please notice that the prefered place to setup is via the Annoto dashboard. This option allows to override for specific embed.

Global variables

In case the script tag parameters are hard to read or for some reason not work for your use case, an alternative approach is to use global variables as in the example below:

<script defer src="https://cdn.annoto.net/playkit-plugin/latest/plugin.js"></script>
<script type="text/javascript">
    window.NN_PLAYKIT_AUTO_BOOT = true;
    window.NN_PLAYKIT_API_KEY = 'eyJhbGciOiJIUzI1NiJ9.ZjU4MTMyMzgtZTBiNS00NTM2LWE1ZTEtNTliMGZhMjYzZjVm.3vX2MeaEtjKS83Iqj9K_D-3-NWMXAJUoslpQEuTFVGk';
    // window.NN_PLAYKIT_REGION = 'us'; // optional
    // window.NN_PLAYKIT_THEME = 'dark'; // optional
</script>

Setup using script tag and KMC

This alternative approach allows to provide the annoto plugin configurations using the Kaltura KMC Player studio advanced settings.

Dynamic Player Embed

<div id="kaltura_player_893609640" style="width: 560px;height: 395px"></div>
<script type="text/javascript" src="https://cdnapisec.kaltura.com/p/2302901/embedPlaykitJs/uiconf_id/56505062"></script>
<!-- annoto plugin script must be injected here in the middle of the Kaltura Player embed code -->
<script src="https://cdn.annoto.net/playkit-plugin/latest/plugin.js"></script>

<script type="text/javascript">
  try {
    var kalturaPlayer = KalturaPlayer.setup({
      targetId: "kaltura_player_893609640",
      provider: {
        partnerId: 2302901,
        uiConfId: 56505062
      }
    });
    kalturaPlayer.loadMedia({entryId: '1_y7gccl5f'});
  } catch (e) {
    console.error(e.message)
  }
</script>

Thumbnail Embed

<div id="kaltura_player_662715894" style="width: 560px;height: 395px"></div>
<script type="text/javascript" src="https://cdnapisec.kaltura.com/p/2302901/embedPlaykitJs/uiconf_id/56505062"></script>
<script src="https://static.kaltura.com/content/static/player-scripts/thumbnail-embed.js"></script>
<script type="text/javascript">
try {
  __thumbnailEmbed({
    config:  {
        provider: {
          partnerId: 2302901,
          uiConfId: 56505062
        },
        targetId: "kaltura_player_662715894"
    },
    mediaInfo: {entryId: '1_y7gccl5f'}
  });
} catch (e) {
  console.error(e.message)
}
</script>
<!-- annoto plugin script can be added after the Kaltura embed code -->
<script src="https://cdn.annoto.net/playkit-plugin/latest/plugin.js"></script>

Automatic Player Embed

KMC Player advanced settings

The Annoto plugin configuration must be added to the plugins section of the player configuration object:

Notice the manualBoot: false and the clientId: 'eyJh...' which is in fact the api key mentioned above (just named differently).

To provide all the mentioned options for the Auto Boot approach Please see the snippet below:

"annoto": {
    "clientId": "eyJh....",
    "manualBoot": false,
    "ux": {
        "theme": "dark"
    },
    "backend": {
        "domain": "us.annoto.net"
    }
}

Last updated

Was this helpful?