LogoLogo
Home
  • Introduction
  • Widget
    • Getting Started
    • Advanced Workflows
    • Theming
    • API Reference
    • Playground
  • dashboard
    • Course Dashboard Embed
  • Annoto Player
    • Getting Started
    • Advanced Workflows
    • API Reference
    • Playground
  • Kaltura Plugin
    • Getting Started
    • Setup the Plugin
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
  • Kaltura Plugin (V2 Legacy)
    • Getting Started
    • Setup using Universal Studio (KMC)
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
    • Setup using Javascript (Optional)
  • Wistia Plugin
    • Getting Started
    • Setup Annoto Plugin
    • Customise Widget Configuration
    • Using Widget API
  • Integrations
    • SSO (Single Sign On)
    • Webhook
Powered by GitBook
On this page
  • Setup
  • Quick Start
  • Configuration
  • Using the API
  • Browser Compatibility

Was this helpful?

Export as PDF
  1. Widget

Getting Started

If you are looking to integrate Annoto as a widget without influencing website layout, as an overlay on top your existing video player, you are in the right place :)

At the moment we support the following players:

  • FlowPlayer

  • H5P

  • HTML5

  • JwPlayer

  • Kaltura V2/V7

  • OpenEdx

  • Plyr

  • VideoJS

  • Vimeo

  • Wistia

  • YouTube

  • Page Embed

  • Custom Player

Setup

Simply add the following script:

<script src="https://cdn.annoto.net/widget/latest/bootstrap.js"></script>

And bootstrap Annoto with the desired Application configuration:

<script>
  // Minimal Application configuration
  var config = {
    /* set to your client id after registration. */
    clientId: '',
    widgets: [
      {
        player: {
          /* type of the player */
          type: 'youtube',
          /* DOM element or DOM query selector of the player */
          element: '#player-element'
        }
      }
    ],
  };

  window.Annoto.boot(config);
</script>
requirejs(["https://cdn.annoto.net/widget/latest/bootstrap.js"], function(Annoto) {
    //This function is called when annoto-bootstrap.js is loaded.
    Annoto.boot(config);
});

Quick Start

The code snippet below provides a quick start for:

  • Widget setup

  • How to provide media details metadata (such as title, description, custom identifier)

  • How to provide group (course) details (identifier, title, description). This allows to build site hierarchy of courses/channels/etc. Once provided the discussion is scoped to the group, allowing reuse of same video in multiple groups.

  • User SSO (Single Sign On) authentication.

  • Dynamically load/destroy the widget for SPA (Single page applications)

import { Annoto, IAnnotoApi, IConfig } from '@annoto/widget-api';
  
interface Global extends Window {
  Annoto: Annoto;
}
const global = window as Global;

const annotoConfig: IConfig = {
  clientId: 'eyJhbGciOiJIUzI1...', // ClientId provided by Annoto
  group: {
    id: '2613a9a5-7245', // custom group/course/channel identifier
    title: 'Annoto Getting Started Course',
    // description: '...', // (optional)
  },
  hooks: {
    mediaDetails: (): IMediaDetails | Promise<IMediaDetails> => {
      return {
        title: 'Quick Start',
        // id: '7245-asfa', // (optional) unique media identifier
        description: 'Quick start for setup on custom platform', // (optional)
      };
    }
  },
  widgets: [
    {
      player: {
        type: 'videojs', // type of the player
        element: '.video-js' // DOM element or DOM query selector of the player
      }
    }
  ],
};

let annotoAPI: IAnnotoApi; // api object placeholder

/**
 * call to authenticate the user using SSO
 * @param token - JWT user token
 */
const authAnnoto = async (token: string) => {
  if (annotoApi) {
    return await annotoApi.auth(token);
  }
  console.log('Annoto api or sso token not ready yet');
}

/**
 * boot Annoto or loaded a new configuration (for example on DOM change)
 */
const loadOrBootAnnoto = async (config: IConfig) => {
  if (annotoApi) {
    return annotoApi.load(config);
  }
  
  global.Annoto.on('ready', (api: IAnnotoApi) => {
    annotoApi = api;
    authAnnoto();
  });
  return global.Annoto.boot(config);
}

/**
 * Destroy the widget and remove from DOM
 * Can be used by single page applications when leaving the page
 */
const destroyAnnoto = async () => {
  if (annotoApi) {
      return annotoApi.destroy();
  }
}
 
// Somewhere on the page with video where annoto needs to be loaded
loadOrBootAnnoto(annotoConfig);

Configuration

Using the API

Annoto application exposes an API. To get access to the API use the "ready" event:

// Application configuration
const annotoConfig = {
  /* ... */
};
  
let annotoAPI;
window.Annoto.on('ready', function (api) {
  annotoAPI = api;
  // Authenticate SSO User
  annotoApi.auth(userToken);
});

window.Annoto.boot(config);

Browser Compatibility

Annoto is compatible with all major evergreen browsers (Edge, Chrome, Mozilla, Safari).

PreviousIntroductionNextAdvanced Workflows

Last updated 28 days ago

Was this helpful?

If you are using a javascript module loader such as RequireJS. Annoto exposes a standard . For example for requireJS:

Annoto application providers flexibility in how it integrates in the website. For full configuration options, please refer to the . Annoto API Typescript interfaces is available via the .

For full documentation, please refer to the .

For more elaborate example of api usage, please refer to the .

UMD
Config Reference
@annoto/widget-api package
AnnotoApi Reference
Quick Start