# 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).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.annoto.net/developers/dashboard/course-embed.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.