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.

The Annoto plugin is provided via our CDN at:

https://cdn.annoto.net/playkit-plugin/latest/plugin.js

For resolving issues or testing (not production) in some cases the staging version might be beneficial at:

https://cdn.annoto.net/staging/playkit-plugin/latest/plugin.js

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.

This is the most flexible approach and supports any form of embed type except IFrame

Making sure that Annoto plugin script is executed after the Kaltura Player script can be simply achieved by adding the defer attribute to the plugin script tag as demostrated in the examples below. Once added, the Annoto plugin script tag can be placed anywhere on page regardless of Kaltura Player embed.

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>

Notice the defer attribute. It's optional, but if provided, will make sure the browser executes the plugin's script only after page content (including Kaltura Player) is loaded on page.

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.

Notice that (unlike the Legacy V2 Kaltura player) adding the Annoto plugin script tag to the page is strill required.

In this approach the Annoto plugin script MUST come right after the Kaltura player cdn script tag (see the examples below) and MUST NOT contain the defer attribute. Automatic Embed is not supported using this approach, please seet Setup using script tag with Auto Boot

Dynamic Player Embed

Notice the placement of the Annoto plugin script tag must be between the src="https://cdnapisec.kaltura.com/... script tag and the second kaltura player embed script tag and calls for KalturaPlayer.setup()

<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

Notice the placement of the Annoto plugin script tag must be anywere after src="https://cdnapisec.kaltura.com/... script tag, so can be at the end after the embed code copy past.

<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

The Automatic Embed is not supported via this approach please use Setup using script tag with Auto Boot

KMC Player advanced settings

Please notice this is required only for this approach and SHOULD NOT be defined for the Setup using script tag with Auto Boot approach.

Please refer to Kaltura documentation for guide on how to use the Player studio 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).

In fact the configuration object is passed directly to the Annoto widget as is, so all Annoto widget configuration options are supported.

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"
    }
}