Course Dashboard Embed

Quick Start

The Annoto course dashboard can be embedded in any context as a web-component:

<head>
    <link href="https://dashboard.annoto.net/build/annotodashboard.css" rel="stylesheet">
</head>
<body>
    <script type="module" src="https://dashboard.annoto.net/build/annotodashboard.esm.js"></script>
    <script nomodule defer src="https://dashboard.annoto.net/build/annotodashboard.js"></script>
    
    <nnd-course-root responsive='false' history-type='compose' compose-history></nnd-course-root>
    
    <script>
        var courseEl = document.querySelector('nnd-course-root');
        courseEl.clientId = 'eyJhbGciOiJIUzI1...';
        courseEl.courseDetails = {
            id: 'ba028414-56f8', // your course identifier
            title: 'How to ebmed Course Dashboard',
        };
        
        var ssoToken = 'eyJhbGciOiJIUzI1...'; // user jwt token
        courseEl.addEventListener('nndReady', function() {
            courseEl.authenticateSSO(ssoToken);
        });
    </script>

</body>

It's built using StencilJS.

Setup

The Annoto course dashboard can be embedded in any context as a web-component. Simply add the following scripts:

<script type="module" src="https://dashboard.annoto.net/build/annotodashboard.esm.js"></script>
<script nomodule defer src="https://dashboard.annoto.net/build/annotodashboard.js"></script>

The following stylesheet:

<link href="https://dashboard.annoto.net/build/annotodashboard.css" rel="stylesheet">

The course dashboard can now be embedded anywhere on the page using the html tag:

<nnd-course-root></nnd-course-root>

Configuration Properties

The dashboard web-component is built using StencilJS. Please refer to the official docs on more information on how web-components built using StencilJS can be integrated and used: https://stenciljs.com/docs/javascript

https://stenciljs.com/docs/properties

The dashboard supports various configuration options:

/**
 * The ClinetId key provided by Annoto (same key used for the Widget)
 */
@Prop() clientId: string;
/**
 * course details to load (same details used in 'group' configuration option of the widget).
 * https://annoto.github.io/widget-api/interfaces/Config.IConfig.html#group
 */
@Prop() courseDetails: {
  id: string;
  title: string;
  description?: string;
  thumbnails?: {
    default: string;
    mobile?: string;
  };
};
/**
 * Deployment domain to use for the backend api.
 * @default 'eu.annoto.net'
 */
@Prop() deploymentDomain: 'eu.annoto.net' | 'us.annoto.net';
/**
 * Language code
 * @default 'en'
 */
@Prop() locale: string;
/**
 * if set to true, the dashboard be responsive with height and width set to 100%
 * and will have internal vertical scroll for the content.
 * default true
 */
@Prop() responsive: boolean;
/**
 * Browser history strategy to use
 * 'hash' - push routing state as by adding '#' component to the browser url
 * 'compose' - Navigate without changing the browser path url or history.
 *             This navigation strategy does not interfer with the host site navigation.
 * @default 'hash'
 */
@Prop() historyType: 'hash' | 'compose';
/**
 * if enabled, the dashboard navigation push history will be saved.
 * @default false
 */
@Prop() composeHistory: boolean;
/**
 * has effect only if historyType is set to 'compose'
 * if enabled, the dashboard nav paths will be saved in 'nnd' url query parameter.
 * @default true
 */
@Prop() composeQueryParam: boolean;
/**
 * If set to true, only accomulated analytcs will be displayed.
 * Per user anylitics will not be available.
 * @default false
 */
@Prop() hidePersonalData: boolean;
/**
 * If enabled preferences will not be available to the user.
 * @default false
 */
@Prop() hidePreferences: boolean;
/**
 * Launch source credentials for integration via proxy.
 * For example when the dashboard is do be embedded in LTI IFrame.
 */
@Prop() launchSource: {
  consumerKey: string;
  origin: string;
};

SSO Authentication

To authenticate a user using SSO, the component exposes the following methods:

async authenticateSSO(token: string): Promise<AuthCredentials> {}
async logout(): Promise<void> {}

'token' is same JWT token that is used for widget SSO. For more information please refer to Single Sign On section.

Browser Compatibility

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

PreviousPlayground NextGetting Started

Last updated 3 years ago