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 course player widget allows you to play content 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 course 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. For more information please see Configuring the course player.
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 Docebo course player requires the following tag to be inserted into the web page to display:
<dcbo-course-player
[LIST OF ATTRIBUTES]
>
</dcbo-course-player>
List of tag attributes
The dcbo-course-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.
Parameter | Type | Description |
---|---|---|
id |
string |
The ID of the course player. Please note: If this attribute is not supplied then the widget becomes non-interactive via JavaScript or other widgets in the page. |
type |
string |
The single course player type. This attribute can be Default value: |
sources |
string |
The ID of the widget providing the source material to be displayed. The IDs are separated by commas. |
courseid |
string |
The ID of the course that will be displayed in the player. Please note: This parameter is required. |
autoplay |
boolean |
If set to Default value: |
showfullscreen |
boolean |
If this value is set to Default value: |
showpip |
boolean |
If this value is set to Default value: Tip: This attribute is available only for video content |
showtoc |
boolean |
If this value is set to Default value: |
forcefullscreen |
boolean |
If this value is set to Default value: |
showthumbsintoc |
boolean |
If this value is set to Default value: |
showpreview |
boolean |
If this value is set to Default value: |
tmdownloadmode |
string |
A string value of either Default value: |
globalsearchfilter |
string |
Possible values:
Default value: Tip: This option is valid only when |
noresulttitle |
string |
A custom title shown in the slate when the search result is empty. Default value: Tip: This option is only valid when |
noresultdescription |
string |
A custom description shown in the slate when the search result is empty. Default value: Tip: This option is only valid when |
showcoursedeadline |
string |
If set to Default value: Tip: This attribute shows the course deadline, not the user's enrollment deadline for the course. |
Example
You can then add the following tag in the position you wish to place the widget:
<dcbo-course-player
id="player1"
courseid="insert valid course id"
autoplay="false"
forcefullscreen="false"
showfullscreen="true"
showpip="true"
showthumbsintoc="false"
sources="id_of_the_myC&LPs_widget"
>
</dcbo-course-player>
Please note that you can place this tag inside a <div>
</div>
tag in order to manipulate the position, size and behavior of the widget itself.
Back button
A CSS token is provided to change the back button icon:
--dcb-flow-course-player-back-button-icon: <icon>
To use it, wrap the CSS token inside dcbo-course-player{}
. For example:
dcbo-course-player {
--dcb-flow-course-player-back-button-icon: 'close';
}
Views
The course player widget has three main views: preview
, toc
and viewer
.
Unless the showpreview
tag attribute is set to FALSE
, the first view is preview
. From there, both toc
and viewer
can be reached. In every view, if a previous view was shown, a navigation back button is also displayed.
Before a view is shown, a series of prerequisites need to be fulfilled. If these prerequisites are not met then a redirect to a fallback view is executed until the correct view is shown.
Every time a user changes a view, the selected course is refreshed to keep the data up-to-date.
Commands accepted by the course 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.
Command | Description and response promise payload |
---|---|
DSDK.getCommandBus().send( |
Loads the current training material and if it is a video also starts playing it. After the command is received, the promise is resolved with: { |
DSDK.getCommandBus().send( |
Pauses the training material. Any further attempt to play the course will resume from the current training material. After the command is received, the promise is resolved with: { |
DSDK.getCommandBus().send( |
Stops the playback of the current training material and resets the start point to the first training material of the course. After the command is received, the promise is resolved with: { |
DSDK.getCommandBus().send( |
Moves the pointer of the course to the next available training material. After the command is received, if the command is accepted (Single course player is in the viewer) the promise is resolved with success: true otherwise success: false :
{ Tip: This has no effect if there is no further training material available. |
DSDK.getCommandBus().send( |
Moves the pointer of the course to the previous available training material. After the command is received, if the command is accepted (Single course player is in the viewer) the promise is resolved with success: true otherwise success: false :
{ Tip: This has no effect if there is no previous training material available. |
DSDK.getCommandBus().send( |
Sets the playback volume of the video player to the predefined volume percentage levels. Possible values: 1 to 100 If the value can not be set due to invalid parameters passed to the command: {If the command payload was sent in in the correct format: { |
DSDK.getCommandBus().send( |
Sets the playback volume of the video player to 0.
{ |
DSDK.getCommandBus().send( |
Sets the playback volume of the video player the previously set volume levels before muting.
{ Tip: This command has no effect if the video player is not muted. |
DSDK.getCommandBus().send( |
Switches to full-screen visualization.
{ |
DSDK.getCommandBus().send( |
Switches from full-screen to normal visualization.
{ |
DSDK.getCommandBus().send( |
Opens the Table of contents (the Table of contents starts in the Overview tab). Possible values:
{Otherwise: { Tip: This command is only available in full-screen mode. |
DSDK.getCommandBus().send( |
Closes the table of contents and reverts back to the player.
{ Tip: This command is only available in full-screen mode. |
DSDK.getCommandBus().send( |
Change the table of contents selected tab. Possible values:
{otherwise: { |
DSDK.getCommandBus().send( |
Hides itself from the page. |
DSDK.getCommandBus().send( |
Shows itself (if previously hidden) in the page. |
DSDK.getCommandBus().send( |
Loads the course specified by the course ID into the widget specified by its ID.
{ |
DSDK.getCommandBus().send( |
Search the keyword in the global search in order to retrieve and load the first playable course.
{ Tip: This command is accepted only if the |
DSDK.getCommandBus().send( |
Play the current training material.
{ |
DSDK.getCommandBus().send( |
Use this command to change the single course player view. The single course player will select the closest view regards the selected view. Possible values:
|
Events generated by the course player widget
Events are generated by the course player widget usage, allowing you to listen and monitor the behavior of the user during the navigation of the widget and the consumption of the course with JavaScript to add extra functionality to your page.
To listen the events, embedded learning provides the proper listener, which is used as follows:
DSDK.getEventManager().on('event_name', (e,p) => {console.log('Event Name => ',p);});
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
Event name | Description and payload type |
---|---|
widget_created |
The widget has been created Payload type: { |
widget_destroyed |
The widget has been destroyed Payload type: { |
course_loaded |
A course has been loaded by the player Payload type: { type parameter values:
status parameter values:
enrollment_status parameter values:
enter_status parameter values:
Example payload: { |
course_status_changed |
A course status has been changed (user enrolled in the course, start the course, etc.) Payload type: { type parameter values:
status parameter values:
enrollment_status parameter values:
enter_status parameter values:
Example payload: { |
playback_started |
Playback has started in the player Payload type: {Example payload: { |
playback_paused |
Playback has paused in the player Payload type: {Example payload: { |
playback_reset |
Playback has been reset in the player This event has no payload |
volume_level_changed |
The volume level in the player has changed Payload type: {Example payload: { |
switched_fullscreen |
The player has switched the full-screen mode This event has no payload |
view_changed |
The view has been changed either by a command or via the user interface Payload type: { view parameter values:
{ |
training_materials_list_loaded |
Training material list is loaded when content tab in the table of contents is opened Payload type: { type parameter values:
locked string parameter values:
{ |
warning_shown |
A blank slate is shown Payload type: { type parameter values when the emitter is a single course player:
Example payload: { |
training_material_status_changed |
The status of a training material is changed Payload type: { type parameter values:
status parameter values:
{ |
Course player widget handling of course visibility rules
Based on the course visibility settings in the Docebo platform, the course player widget restricts access to courses. Unlike in the platform, the courses will still remain visible in the player but will display a message explaining that the course can not be played. The following scenarios are possible:
Scenario | Outcome |
---|---|
The visibility of the course in the catalog is set to Show the course only to enrolled learners and the user is not enrolled | The course player will display a message denying access to the course |
The course self-enrollment setting in the catalog is set to Self-enrollments are not available | The course player will present the course's preview page with the Start Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
The course enrollment policy in the catalog is set to Only Admins can enroll learners | The course player will present the course's preview page with the Start Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
The course has filled its maximum quota for enrollments and is configured without a waiting list | The course player will present the course's preview page with the Start Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
The course has filled its maximum quota for enrollments and is configured without a waiting list and is set to require admin approval for enrollments | The course player will present the course's preview page with the Start Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
The course is set to self-enrollment with pre-set dates | The course player will present the course's preview page with the Start Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
The course is set to self-enrollment with a waiting list and pre-set deadline times not met | The course player will present the course's preview page with the Resume Learning button disabled, it will also display a message denying access to the course when clicking on the Table of Contents |
Supported training material
At this time only the following types of training material are supported:
Tip: Only e-learning courses are supported
- Video
- Imported Video
- YouTube
- Vimeo
-
Wistia
Please note: Your Wistia administrator needs to add the domain where embedded learning is being hosted to the allow list in Wistia to ensure that the video can be properly viewed by your learners. Not adding the domain to the allow list can result in the following error being displayed in the widget:
- SCORM
- TinCan (xAPI)
- AICC
- VILT sessions
- HTML
- Slides Converter
- Survey
- Test
- Central Repository
- Observation Checklist
-
Google Drive
Best practice: Docebo recommends viewing Google Drive training materials in full-screen mode.
- LTI
- Elucidat
Important notes:
- Please make sure you allow third party cookies. This is particularly important when using SCORM objects as some course providers make use of cookies in packages and without allowing them, their courses may encounter functionality issues.
- The SCORM, TinCan (xAPI) and AICC player might require a session cookie to be hosted by the external site. If this occurs, the hosting web site may need to adjust their own cookie policy to accept this behavior. These cookies are mandatory to allow for the correct usage of the Docebo content player.