Advanced Workflows

Search…
Advanced Workflows
Annoto application container
Annoto widget position is set as absolute meaning it doesn't influence the website layout. By default the application is contained inside a single DIV that is appended to the BODY.
If you require different behavior, you can put the following DIV anywhere in your DOM:
<div id="annoto-app"></div>
Once this DIV element is present in the DOM, when Annoto.boot() is called, it would be detected automatically by Annoto and serve as container for the Annoto app.
This is especially useful if BODY is not your main scrollable layout.
As a rule of thumb always place the container in the same scrollable element as your video.
Custom Widget Fab Button
When the Annoto widget is closed a small Fab button with comments icon is positioned next to the player to allow users to open the widget.
In some cases you might want to implement your own open/close UI and functionality.
To hide the default Fab button set the fabDisable Ux property to true:
var config = {
    ux: {
      widget: {
        fabDisable: true
      }
    }
    // ...
  };
​
To show/hide the widget, use the IAnnotoApi show() and hide() methods. For more details on how to obtain the api object please refer to Using the API.
Annoto Timeline
Annoto Timeline allows users to spot points of interest. The timeline can be embedded in the player or it can be positioned below the player. Lets explore the timeline configuration options:
By default, the timeline will be positioned under the player:
If overlay is true, the timeline will be positioned inside the controls of the player:
timeline: {
    overlay: true
}
LTI Outcomes
Annoto supports reporting grading to LMS (Learning Management System) using the IMS LTI Outcomes standard.
If Annoto is integrated in a custom platform and the LTI launch request is processed by this custom platform, Annoto still supports taking care of reporting outcomes directly to the LMS.
The above setup requires the below configurations.
Once setup, Annoto backend services will take care of always keeping the grades up to date, including retries (in case of LMS rate limiting).
LTI tool provider credentials
When the custom platform is integrated as a tool provider in the LMS, the following authentication credentials where configured in the LMS:
Consumer Key
Secret
Same credentials need to be provided to Annoto Admin and configured in LTI Integration for the site.
LTI Launch Outcome properties
During LTI launch the LMS provides the following payload properties:
lis_result_sourcedid
lis_outcome_service_url
ext_outcome_data_values_accepted
Those parameters need to be provided to the mediaDetails of the widget: 
const annotoConfig: IConfig = {
  hooks: {
    mediaDetails: () => {
      return {
        outcomes: {
          lti: {
            sourcedid: '...', // lis_result_sourcedid
            serviceUrl: '...', // lis_outcome_service_url
            extDataAccepted: '...', // ext_outcome_data_values_accepted (optional - not always available)
          }
        },
        title: 'Quick Start',
        // id: '7245-asfa', // (optional) unique media identifier
        // description: 'Quick start for setup on custom platform', // (optional)
      };
    }
  },
  // rest of the widget configuration
};
Custom Video Player
Annoto providers ends users, advanced interaction with video content. In order to do it Annoto requires access to video player API. Before Annoto can perform any action it must obtain the media source and the duration of the media.
We already support a variety of widely used player types, and constantly adding new ones. If you are using a custom player or player we don't support yet, you have 2 options:
1.Implement a PlayerAdaptorApi and set it in Widget's player configuration. Contributions are very welcome and appreciated :)
2.​Contact us, we are happy to help.
Analytics Events
Annoto widget exposes api to subscribe to analytics events so that can be used in custom integrations, for example ingested and analyzed by custom BI systems.
To listen to the events use the familiar Annoto.on() api.
The widget provides two types of events:
Stats Events
Discrete events of user actions such as submit a comment, vote, read a reply, click on timestamp, first video play, etc.
Annoto.on('stats_events', function (ev) {
    console.log(ev);
});
For more details on the event callback please refer to the AnnotoStatsEventCallback interface. For full list of event types, please refer to StatsTypeEnum.
Video Benchmark Events
Video analytics events that provides details about the current and historical accumulated video consumption of the user.
Annoto.on('video_benchmark', function (ev) {
    console.log(ev);
});
For more details on the event callback please refer to the AnnotoVideoBenchmarkCallback definition.
Interactions Stats Events
Interactions events of user actions that provide details about interactions consumed and the results of the activity.
Annoto.on('cta_stats_events', function (ev) {
    console.log(ev);
});
For more details on the event callback please refer to the AnnotoCtaStatsEventCallback definition.
Widget - Previous
Getting Started
Next - Widget
Theming
Last modified 29d ago
Export as PDF
Copy link
On this page
Annoto application container
Custom Widget Fab Button
Annoto Timeline
LTI Outcomes
LTI tool provider credentials
LTI Launch Outcome properties
Custom Video Player
Analytics Events
Stats Events
Video Benchmark Events
Interactions Stats Events