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

{% hint style="success" %}
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`
{% endhint %}

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

{% hint style="success" %}
This is the most flexible approach and supports any form of embed type except IFrame
{% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

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:

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

{% hint style="warning" %}
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.
{% endhint %}

Full list of query paramaters

<table><thead><tr><th width="132.3828125">Query parameter</th><th width="83.38671875" data-type="checkbox">Required</th><th width="158.005859375">Supported value</th><th>Description</th></tr></thead><tbody><tr><td><code>auto_boot</code></td><td>true</td><td>'1', 'true'</td><td>informs the plugin to perform automatic setup and load the widget</td></tr><tr><td><code>api_key</code></td><td>true</td><td>JWT token string</td><td>provide the api key provided by Annoto</td></tr><tr><td><code>region</code></td><td>false</td><td><code>eu</code> , <code>us</code>  , <code>staging</code> </td><td>The region of the Annoto service for the API key. The default is <code>eu</code></td></tr><tr><td><code>theme</code></td><td>false</td><td><code>dark</code> , <code>default</code></td><td>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.</td></tr></tbody></table>

### 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:

```html
<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](https://knowledge.kaltura.com/help/advanced-settings).

{% hint style="warning" %}
Notice that (unlike the Legacy V2 Kaltura player) adding the Annoto plugin script tag to the page is strill required.
{% endhint %}

{% hint style="danger" %}
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](#setup-using-script-tag-with-auto-boot "mention")
{% endhint %}

### Dynamic Player Embed

{% hint style="warning" %}
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()`
{% endhint %}

```html
<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

{% hint style="warning" %}
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.
{% endhint %}

```html
<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

{% hint style="danger" %}
The Automatic Embed is not supported via this approach please use [#setup-using-script-tag-with-auto-boot](#setup-using-script-tag-with-auto-boot "mention")
{% endhint %}

### KMC Player advanced settings

{% hint style="warning" %}
Please notice this is required only for this approach and SHOULD NOT be defined for the [#setup-using-script-tag-with-auto-boot](#setup-using-script-tag-with-auto-boot "mention") approach.
{% endhint %}

{% hint style="success" %}
Please refer to [Kaltura documentation](https://knowledge.kaltura.com/help/advanced-settings) for guide on how to use the Player studio advanced settings.
{% endhint %}

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

<figure><img src="https://1835502244-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRcdkfwfM6OHgqpQaAa%2Fuploads%2FaV8Kyeev3Bv0K26GY7pM%2Fimage.png?alt=media&#x26;token=c5970e3e-6dca-4e77-a91e-fc9a2b43b17a" alt="" width="345"><figcaption></figcaption></figure>

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](https://docs.annoto.net/developers/widget/getting-started#configuration) options are supported.

To provide all the mentioned options for the [Auto Boot approach](#setup-using-script-tag-with-auto-boot) Please see the snippet below:

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