---
title: "Embedded learning building blocks: Single asset player widget"
slug: "embedded-learning-building-blocks-single-asset-player-widget"
updated: 2026-03-20T14:26:04Z
published: 2026-03-20T14:26:04Z
canonical: "developer.docebo.com/embedded-learning-building-blocks-single-asset-player-widget"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://developer.docebo.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embedded learning building blocks: Single asset player widget
## Introduction
Embedded learning allows you to start an instance of your Docebo platform on any external web page, as long as you have access to its HTML and JavaScript code.
The Docebo platform instance opens as a pop-up activated either when the user clicks on a button or interacts with an element - such as a link, or a string - on the external web page. When the pop-up opens, the platform instance shows the training content you, as the Superadmin, have selected for the user on the basis of the action they are performing, in order to provide the best learning on the fly experience, enriching it with ad hoc training.
Embedded learning is available as a web-based application on desktop and mobile platforms.
The single asset player widget allows you to play specific assets from the Docebo platform as if you were using the Docebo platform itself. As such, all statistics that would be produced when using the Docebo platform are also reproduced by using the widget, allowing the platform to keep track of the learners in the usual manner.
If the training material you have selected is a downloadable file, you will be presented with a download button that you can press to save the file locally. In the event that you have already downloaded this file previously, you will be advised of this fact by the single asset player widget, while still being given the option to download it again.
The configuration of features like, closed captioning, playback speed controls and the ability to skip ahead or back are managed in the platform.
## Activating embedded learning
To activate embedded learning, reach out to Docebo via the Help Center, or by contacting your Account Manager (if your plan includes this option).
## HTML tag
The single asset player requires the following tag to be inserted into the web page to display:
```xml
```
## List of tag attributes
The `dcbo-asset-player` tag can accept the following list of attributes, all values associated with the attributes should be encapsulated in double-quotation marks. All parameters are optional, unless stated otherwise in the description.
> [!TIP]
> Tip:
>
> All boolean values in the tag attributes can accept the following values to denote `false`:
>
> - `false` (Example: `showfullscreen="false"`)
> - `0` (Example: `showfullscreen="0"`)
> - An empty value (Example: `showfullscreen=""`)
>
> Any other provided value is interpreted as true.
### `id`
The HTML ID of the given web component element. This attribute is required.
**Type**: String
> [!NOTE]
> Please note:
>
> If this attribute is not supplied then the widget becomes non-interactive via JavaScript or other widgets in the page.
### `assetid`
The asset’s ID number in the platform.
**Type:** String
If an incorrect value is provided the widget displays the following error:
.png)
If the required permissions to view the asset are not present, the following error will be displayed to the learner:
.png)
> [!NOTE]
> Please note:
>
> This attribute is required.
### `showfullscreen`
Shows the *Show Fullscreen* button in the viewer view if set to `true`. Otherwise hides the *Show Fullscreen* button if set to `false`.
**Type**: boolean
**Default value**: `true`
### `showtoc`
Shows the *Overview* button in the preview and viewer view if set to `true`. Otherwise hides the *Overview* button if set to `false` and prevents the learner from navigating manually to these pages.
**Type**: boolean
**Default value**: `true`
> [!TIP]
> Tip:
>
> If `showtoc` is set to `false`, the *overview* page remains accessible with commands.
### `showthumbsintoc`
If set to `true`, shows the preview-like information section in the *overview*.
**Type**: boolean
**Default value**: `false`
### `forcefullscreen`
If set to `true`, forces the viewer view to display in fullscreen mode.
**Type**: boolean
**Default value**: `false`
> [!TIP]
> Tip:
>
> If `forcefullscreen` is set to `true`, the simple view becomes unavailable.
### `showpreview`
If set to `true`, redirects the user to the viewer view automatically by skipping the preview.
**Type**: boolean
**Default value**: `true`
### `downloadmode`
Sets the asset download mode.
**Type:** String
**Possible values**:
- `blob`
- `link`
**Default value**: `blob`
> [!TIP]
> Tip:
>
> If the value is set to `blob` then every asset will be downloaded. If the value is set to `link` then any asset that can be displayed in the browser (for example, pdf or mp4 files) will open in a new tab but all assets that can not be displayed in the browser will be downloaded.
### `autoplay`
If set to `true`, video-type assets will start playing automatically when the learner navigates to the *viewer* view.
**Type:** boolean
**Default value**: `false`
### `showpip`
If set to true, enables the picture-in-picture feature for uploaded videos.
**Type:** boolean
**Default value**: `false`
> [!NOTE]
> Please note:
>
> This attribute does not change the behavior of YouTube, Vimeo and Wistia videos.
### `showstatus`
If set to `true`, shows the status of the user relative to the asset in the *preview*.
**Type:** boolean
**Default value**: `true`
## Widget views
The asset player widget contains the usual three views as the course player: *preview*, *overview*, and *viewer*. These views are described in greater detail here.
### Preview view
The initial view of the asset player widget is the *preview* view. The preview may be skipped by setting the `showpreview` attribute to `false`. In this case, the initial view becomes the viewer:
```xml
```
The preview view has three main areas:
1. **The container**:
Displays the asset thumbnail as a background if it has an assigned or the asset-type dependent default thumbnail.
2. **The general information area**:
A subsection of the container, it provides the general information about the asset such as title, type, and whom it was shared by. It also shows if the learner has opened the asset, using the labels *New* or *Watched*. The **View Content** button navigates the user to the *viewer*.
3. **The navigation area**:
A subsection of the container, it only contains the **Overview** button that navigates the user to the *overview*. This button is not displayed if the integrator sets the `showtoc` attribute to `false`.
.png)
```xml
```
### Overview
The overview details various asset information.
1. **The header section**:
Contains the asset title and the back button to help the user navigate to the previous view.
2. **The main content section**:
Displays the asset description, and by whom, when, and on which channels it was shared.
3. **The main action button**:
Navigates the user to the viewer view.
.png)
A more detailed display is also available for this view if the integrator sets the `showthumbsintoc` attribute to `true`. In this display, the *header* also contains the asset type and the thumbnail as background.
.png)
```xml
```
### Viewer view
The main role of the viewer is to display the asset. It contains three main areas:
1. **The title of the header**:
Displays the *asset title* and a *back button* to navigate to the previous view.
2. **The control buttons in the header**:
Contains two buttons. The first one navigates the user to the overview and the second toggles between the fullscreen and normal view.
3. **The main content**:
Holds the actual asset.
.png)
If the integrator sets the `showtoc` attribute to `false`, the overview button does **not** appear.
```xml
```
If the `showfullscreen` attribute is `false` the *fullscreen* button is **not** displayed, this prevents the user from toggling between the view modes.
```xml
```
### Fullscreen
The view mode changes to fullscreen when the **Fullscreen** button is pressed. By default, the right-hand side *overview* tab is hidden but when pressing the **Overview** button it opens instead of navigating the user away from this view. By pressing the **Fullscreen** button again it returns to the *widget view* mode.
.png)
## Commands accepted by the single asset player widget
The following JavaScript commands can be issued to interact with the widget embedded in your page. The commands are dependent on the ID of the player being stated as an attribute when embedding the widget. In the following list, replace the term `ID OF WIDGET` with the actual ID of your widget.
### Change widget view
This command changes the widget view.
**Command**:
```javascript
DSDK.getCommandBus().send(
'change_view',
'ID OF WIDGET',{
view: string;
}
)
```
**Possible values**:
- `preview`
- `toc`
- `viewer`
After the command is received, the promise is resolved with:
```javascript
{}
```
### Activate fullscreen in the viewer
Turns on fullscreen mode in the *viewer*.
**Command**:
```javascript
DSDK.getCommandBus().send(
'go_fullscreen',
'ID OF WIDGET',
{}
)
```
> [!TIP]
> Tip:
>
> This command only works in the *viewer* view.
When triggered the *fullscreen* mode activates. If the widget is in the *viewer* view, it returns:
```javascript
{
fullscreen: true
}
```
Otherwise, it returns:
```javascript
{
fullscreen: false
}
```
### Turn off fullscreen in viewer
Turns off fullscreen mode in the *viewer*.
**Command**:
```javascript
DSDK.getCommandBus().send(
'exit_fullscreen',
'ID OF WIDGET',
{}
)
```
> [!TIP]
> Tip:
>
> This command only works in the *viewer* view.
When triggered the *fullscreen* mode deactivates. After the command is received, the promise is resolved with:
```javascript
{
fullscreen: false
}
```
### Open *overview* view
If the learner is in the *preview* or *viewer* view, this command navigates the user to the *overview* view.
**Command**:
```javascript
DSDK.getCommandBus().send(
'open_toc',
'ID OF WIDGET',
{}
)
```
After the command is received, the promise is resolved with:
```javascript
{
opened: true
}
```
If the initial view was already *overview* then no navigation happens and returns:
```javascript
{
opened: false
}
```
If the *fullscreen* mode is **on**, this command opens the overview on the right-hand side.
If it was originally closed it returns with:
```javascript
{
opened: true
}
```
Otherwise it returns with:
```javascript
{
opened: false
}
```
### Close overview
If the learner was in the *overview*, navigates the user back.
**Command**:
```javascript
DSDK.getCommandBus().send(
'close_toc',
'ID OF WIDGET',
{}
)
```
After the command is received, the promise is resolved with:
```javascript
{
closed: true
}
```
Otherwise it returns:
```javascript
{
closed: false
}
```
If the *fullscreen* mode is active, and if the *overview* was already closed it returns:
```javascript
{
closed: false
}
```
Otherwise, the promise is resolved with:
```javascript
{
closed: true
}
```
### Set volume level
Sets the volume level of a video player. The level value must be between `0` and `100`. The returned payload contains a level value that returns the set volume.
**Command:**
```javascript
DSDK.getCommandBus().send(
'set_volume_level',
'ID OF WIDGET',
{
level: number
}
)
```
If the level value is between `0` and `100` then the returned payload is:
```javascript
{
success: true;
level: 0-100;
}
```
Otherwise, if the command payload level is outside of the limits or there is no video present it returns:
```javascript
{
success: false;
}
```
### Mute player
Mutes the video player if present.
**Command:**
```javascript
DSDK.getCommandBus().send(
'mute_player',
'ID OF WIDGET',
{}
)
```
After the command is received, the promise is resolved with:
```javascript
{
muted: true
}
```
If no video is present returns:
```javascript
{
muted: false
}
```
### Unmute player
Unmutes the video player if present.
**Command:**
```javascript
DSDK.getCommandBus().send(
'unmute_player',
'ID OF WIDGET',
{}
)
```
After the command is received, the promise is resolved with:
```javascript
{
muted: false
}
```
### Play video asset
Starts playing the video asset, if present.
**Command:**
```javascript
DSDK.getCommandBus().send(
'play',
'ID OF WIDGET',
{}
)
```
If present, returns:
```javascript
{
playing: true
}
```
Otherwise returns:
```javascript
{
playing: false
}
```
### Pause video asset
Pauses playing the video asset, if present.
**Command:**
```javascript
DSDK.getCommandBus().send(
'pause',
'ID OF WIDGET',
{}
)
```
If present, returns:
```javascript
{
paused: true
}
```
Otherwise returns:
```javascript
{
paused: false
}
```
## Events generated by the asset player widget
Events are generated by the asset player widget usage, allowing you to listen to and monitor the behavior of the user during the navigation of the widget and the consumption of the asset with JavaScript to add extra functionality to your page.
To listen the to the events, embedded learning provides the proper listener, which is used as follows:
```javascript
DSDK.getEventManager().on(
'event_name',
(e, p) => {console.log('Event Name => ', p)}
);
```
> [!TIP]
> Tip:
>
> In the event listener, the following variables are used:
>
> - `event_name` is the name of the event
> - `e` is a string that indicates the emitter ID
> - `p` is the payload which is an object that depends on the events
### view_changed
The View Changed event is triggered, when the widget changes view.
**Possible values for view:**
- `preview`
- `toc`
- `viewer`
- `error`
**Payload:**
```javascript
{
view: NavigationContextView
}
```
### playback_started
The Playback Started event is triggered when a video-typed asset starts playing.
**Payload**:
```javascript
{
assetId: number,
name: string
}
```
### playback_paused
The Playback Paused event is triggered when a video-typed asset stops playing.
**Payload**:
```javascript
{
assetId: number,
name: string
}
```
### volume_level_changed
The Volume Level Changed event is triggered when the video volume changes.
**Possible values for level:**
The value in the payload is a number between `0` and `100`.
**Payload**:
```javascript
{
level: number
}
```
### asset_loaded
The Asset Loaded event is triggered when an asset is loaded from the Docebo platform.
**Payload**:
```javascript
{
assetId: number,
name: string
}
```
### warning_shown
The Warning Shown event is triggered when the asset has an error, either the user is authorized or the asset is not found.
**Possible values for type:**
- `user_unauthorized`
- `widget_no_content`
**Payload**:
```javascript
{
type: 'user_unauthorized' | 'widget_no_content'
}
```
### widget_fullscreen
The Fullscreen event is triggered when the fullscreen mode changes and the payload sends `true` if the fullscreen is open, and `false` if closed.
**Payload**:
```javascript
{
fullscreen: boolean
}
```
An asset is the term used to refer to any content, such as files or links, that is uploaded and published as a contribution for informal learning. Assets can be shared, organized into playlists, and viewed by other learners.