> For the complete documentation index, see [llms.txt](https://docs.annoto.net/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.annoto.net/developers/dashboard/course-embed.md).
# Course Dashboard Embed
## Quick Start
The Annoto course dashboard can be embedded in any context as a web-component:
```html
```
{% hint style="info" %}
It's built using [StencilJS](https://stenciljs.com/).
{% endhint %}
## Setup
The Annoto course dashboard can be embedded in any context as a web-component. Simply add the following scripts:
```html
```
The following stylesheet:
```html
```
The course dashboard can now be embedded anywhere on the page using the html tag:
```html
```
## Configuration Properties
{% hint style="info" %}
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:
{% endhint %}
The dashboard supports various configuration options:
```typescript
/**
* 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:
```typescript
async authenticateSSO(token: string): Promise {}
async logout(): Promise {}
```
{% hint style="info" %}
'token' is same JWT token that is used for widget SSO. For more information please refer to [Single Sign On section](/developers/integrations/sso.md).
{% endhint %}
## Browser Compatibility
Annoto is compatible with all major evergreen browsers (Edge, Chrome, Mozilla, Safari).