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>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 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> {}Browser Compatibility
Annoto is compatible with all major evergreen browsers (Edge, Chrome, Mozilla, Safari).
Last updated
Was this helpful?