--- title: "Embedded learning building blocks: Course player widget" slug: "embedded-learning-building-blocks-course-player-widget" updated: 2026-07-30T14:56:32Z published: 2026-07-30T14:56:32Z canonical: "developer.docebo.com/embedded-learning-building-blocks-course-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: Course 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 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 (opens in a new tab)](https://help.docebo.com/hc/en-us/articles/360020082620). ## Activating embedded learning To activate embedded learning, reach out to Docebo via the [Help Center (opens in a new tab)](https://help.docebo.com/hc/en-us/articles/360020082640), 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: ```xml ``` ### 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. #### id The ID of the course player **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. #### type The single course player type. This attribute can be static or dynamic. When type is set to static, the course player displays the course specified by the courseid attribute. The content is fixed at implementation time. When type is set to dynamic, the course player displays content based on the result of a search command or a selection passed from a connected source widget (such as a course list widget). In dynamic mode, the courseid attribute is ignored and the globalsearchfilter attribute controls which area of the platform's global search is used to determine the content. > [!NOTE] > Please note > > The globalsearchfilter, noresulttitle and noresultdescription attributes are only applicable when type is set to dynamic. Setting these attributes when type is static has no effect. **Type**: String **Default value**: static #### sources The ID of the widget providing the source material to be displayed. The IDs are separated by commas. **Type**: String #### courseid The ID of the course that will be displayed in the player. **Type**: String > [!NOTE] > Please note: > > This parameter is required. #### autoplay If set to true the video in the widget will start playing the content as soon as the *Start Learning* button is pressed, otherwise it will wait for user-interaction. **Type**: Boolean **Default value**: false #### showfullscreen If this value is set to true or omitted, this widget will be playable in full screen, which can be activated by pressing the *full-screen* button in the player. If this attribute is set to false, this option will not be displayed. **Type**: Boolean **Default value**: true #### showpip If this value is set to true, a button allowing this widget to be played in "picture-in-picture" mode is displayed. When pressed, the output of the player is overlaid on screen. If set to false the button is hidden and the functionality is removed. **Type**: Boolean **Default value**: true > [!TIP] > Tip: > > This attribute is available only for video content #### showtoc If this value is set to false then the *table of contents* button will not be displayed. **Type**: Boolean **Default value**: true #### forcefullscreen If this value is set to true, this widget will be started in full-screen mode, otherwise it will remain within the constraints of the widget’s dimensions in the page. **Type**: Boolean **Default value**: false #### showthumbsintoc If this value is set to true then a thumbnail preview of this content to be displayed in the table of contents. **Type**: Boolean **Default value**: false #### showpreview If this value is set to false then the preview will not be displayed. **Type**: Boolean **Default value**: true #### tmdownloadmode A string value of either blob or link. This attribute changes the training material download mode. **Type**: String **Default value**: blob #### globalsearchfilter Sets the filter value for the global search. **Type**: String **Possible values**: - courses_and_learning_plans - course_content - course_catalogs **Default value**: courses_and_learning_plans > [!TIP] > Tip: > > This option is only valid when type is set to dynamic. #### noresulttitle A custom title shown in the slate when the search result is empty. **Type**: String **Default value**: Whoops, there's nothing here > [!TIP] > Tip: > > This option is only valid when type is set to dynamic. #### noresultdescription A custom description shown in the slate when the search result is empty. **Type**: String **Default value**: Looks like there is nothing for you in this area right now > [!TIP] > Tip: > > This option is only valid when type is set to dynamic. #### showcoursedeadline If set to `true`, shows the applicable deadline in the course details tile. If set to `false`, no deadline is displayed. When a course has both a course deadline and a learner-specific enrollment deadline, embedded learning gives priority to the enrollment deadline and displays it instead of the course deadline. If the learner has no enrollment deadline, embedded learning displays the course deadline. If neither deadline applies, no deadline is shown. **Type**: Boolean **Default value**: `true` > [!TIP] > Tip: > > This attribute controls the display of both the course deadline and the learner's enrollment deadline. Embedded learning never displays both deadlines for the same course at the same time; enrollment deadline always takes priority over course deadline. ### Example You can then add the following tag in the position you wish to place the widget: ```xml ``` 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: ```css --dcb-flow-course-player-back-button-icon: ``` To use it, wrap the CSS token inside `dcbo-course-player{}`. For example: ```css 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. ### Load current training material and play if video Loads the current training material and if it is a video also starts playing it. **Command:** ```javascript DSDK.getCommandBus().send(  'play',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** After the command is received, the promise is resolved with: ```javascript {  playing: true } ``` ### Pause training material playback Pauses the training material. Any further attempt to play the course will resume from the current training material. **Command:** ```javascript DSDK.getCommandBus().send(  'pause',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** After the command is received, the promise is resolved with: ```javascript {  paused: true } ``` ### Stop training material playback Stops the playback of the current training material and resets the start point to the first training material of the course. **Command:** ```javascript DSDK.getCommandBus().send(  'reset',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** After the command is received, the promise is resolved with: ```javascript {  reset: true } ``` ### Move course pointer to next available training material Moves the pointer of the course to the next available training material. > [!TIP] > Tip: > > This command has no effect if there is no further training material available. **Command**: ```javascript DSDK.getCommandBus().send(  'select_next_tm',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** 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`: ```javascript {  success: true | false } ``` ### Move course pointer to previous training material Moves the pointer of the course to the previous available training material. > [!TIP] > Tip: > > This command has no effect if there is no previous training material available. **Command**: ```javascript DSDK.getCommandBus().send(  'select_prev_tm',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** 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`: ```javascript {  success: true | false } ``` ### Set the playback volume of the video player Sets the playback volume of the video player to the predefined volume percentage levels. **Command:** ```javascript DSDK.getCommandBus().send(  'set_volume_level',  'ID OF WIDGET',  {    level: VALUE BETWEEN 1 AND 100  } ) ``` **Possible values:** 1 to 100 **Promise response payload:** If the value can not be set due to invalid parameters passed to the command: ```javascript {  success: false } ``` If the command payload was sent in in the correct format: ```javascript {  volume: [VALUE BETWEEN 1 AND 100] } ``` ### Mute the video player Sets the playback volume of the video player to 0. **Command:** ```javascript DSDK.getCommandBus().send(  'mute_player',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** ```javascript {  muted: true } ``` ### Unmute the video player Sets the playback volume of the video player the previously set volume levels before muting. > [!TIP] > Tip: > > This command has no effect if the video player is not already muted. **Command:** ```javascript DSDK.getCommandBus().send(  'unmute_player',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** ```javascript {  muted: false } ``` ### Open the table of contents Opens the Table of contents. > [!TIP] > Tip: > > This command is only available in full-screen mode. **Possible values for** `tab`**:** - `overview` - `content` **Default value:** - `overview` **Command:** ```javascript DSDK.getCommandBus().send(  'open_toc',  'ID OF WIDGET',  {    tab: 'overview' | 'content' // optional  } ) ``` **Promise response payload:** If the table of contents cannot be opened: ```javascript {  opened: false } ``` Otherwise: ```javascript {  opened: true,  tab: 'overview' | 'content' } ``` ### Close the table of contents Closes the table of contents and reverts back to the player. > [!TIP] > Tip: > > This command is only available in full-screen mode. **Command:** ```javascript DSDK.getCommandBus().send(  'close_toc',  'ID OF WIDGET',  {} ) ``` **Promise response payload:** ```javascript {  closed: false | true } ``` ### Change the table of contents tab Changes the selected tab of the table of contents. > [!TIP] > Tip: > > This command is only effective if: > > - the table of contents is already open in either the `overview` or `content` tabs > - the widget is in full-screen mode **Possible values:** - `overview` - `content` **Command:** ```javascript DSDK.getCommandBus().send(  'change_toc_tab',  'ID OF WIDGET',  {    'tab': 'overview' | 'content'  } ) ``` **Promise response payload:** If the table of contents cannot be accessed: ```javascript {  changed: false } ``` Otherwise: ```javascript {  changed: true,  tab: 'overview' | 'content' } ``` ### Hide course player widget This commands hides the course player widget from the page (if visible). **Command:** ```javascript DSDK.getCommandBus().send(  'hide',  'ID OF WIDGET',  {} ) ``` ### Show course player widget This command shows the course player widget in the page (if hidden). **Command:** ```javascript DSDK.getCommandBus().send(  'show',  'ID OF WIDGET',  {} ) ``` ### Load a course into the course player Loads the course specified by the course ID into the widget specified by its ID. **Command:** ```javascript DSDK.getCommandBus().send(  'load_course',  'ID OF WIDGET',  {    'id': 'Insert valid course ID here'  } ) ``` > [!TIP] > Tip: > > You can retrieve the ID of a course using the GET `/course/v1/courses` API call. For more information on retrieving IDs, please see [API essentials - Retrieving IDs](/v1/docs/api-essentials-retrieving-ids). **Promise response payload:** ```javascript {  loaded: true | false } ``` ### Search by keyword Search the keyword in the global search in order to retrieve and load the first playable course. **Command:** ```javascript DSDK.getCommandBus().send(  'search',  'ID OF WIDGET',  {    'keyword': 'Insert a valid string'  } ) ``` > [!TIP] > Tips: > > - This command is accepted only if the value of the type tag attribute value is dynamic. > - The keyword searches the platform's global search and loads the first playable course from the results. Use the globalsearchfilter attribute to control which search area (`courses_and_learning_plans`, `course_content` or `course_catalogs`) is queried. Structuring your keyword to match the naming conventions used in the platform improves the accuracy of the result. **Promise response payload:** ```javascript {  loaded: true | false } ``` ### Play current training material This command plays the currently loaded training material. **Command:** ```javascript DSDK.getCommandBus().send(  'play_current',  'ID OF WIDGET',  {    'keyword': 'Insert a valid string'  } ) ``` **Promise response payload:** ```javascript {  playing: true } ``` ### Change player view 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:** - `preview` - `toc` - `viewer` **Command:** ```javascript DSDK.getCommandBus().send(  'change_view',  'ID OF WIDGET',  {    'view': 'preview' | 'toc' | 'viewer'  } ) ``` ## 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: ```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 ### widget_created The widget has been created **Payload type:** ```javascript {  id: string;  type: WidgetType;  view: FlowView; } ``` ### widget_destroyed The widget has been destroyed **Payload type:** ```javascript {  id: string;  type: WidgetType;  view: FlowView; } ``` ### course_loaded A course has been loaded by the player **Payload type:** ```javascript {  id: string,  name: string,  type: string,  status: string,  enrollment_status: string,  enter_status: string,  emitter: string } ``` `type` parameter values: - `elearning` - `classroom` - `webinar` - `learning_plan` `status` parameter values: - `max_quota` - `expired` - `validity_in_future` - `user_unauthorized` `enrollment_status` parameter values: - `in_progress` - `waiting_list` - `completed` - `suspended` - `overbooked` - `enrolled` - `not_started` `enter_status` parameter values: - `in_waiting_list` - `in_waiting_list_play` - `in_waiting_list_enroll` - `locked` - `buy` - `enroll` - `play` **Example payload:** ```javascript {  id: '189',  name: 'Course Example',  type: 'elearning',  status: null,  enrollment_status:'in_progress',  enter_status: 'enroll'  emitter: 'player1' } ``` ### course_status_changed A course status has been changed (user enrolled in the course, start the course, etc.) **Payload type:** ```javascript {  id: string,  name: string,  type: string,  status: string,  enrollment_status: string,  enter_status: string,  emitter: string } ``` `type` parameter values: - `elearning` - `classroom` - `webinar` - `learning_plan` `status` parameter values: - `max_quota` - `expired` - `validity_in_future` - `user_unauthorized` `enrollment_status` parameter values: - `in_progress` - `waiting_list` - `completed` - `suspended` - `overbooked` - `enrolled` - `not_started` `enter_status` parameter values: - `in_waiting_list` - `in_waiting_list_play` - `in_waiting_list_enroll` - `locked` - `buy` - `enroll` - `play` **Example payload:** ```javascript {  id: '189',  name: 'Course Example',  type: 'elearning',  status: null,  enrollment_status:'in_progress',  enter_status: 'enroll'  emitter: 'player1' } ``` ### playback_started Playback has started in the player **Payload type:** ```javascript {  trainingMaterialId: string,  name: string,  emitter: string } ``` **Example payload:** ```javascript {  trainingMaterialId: '89',  name: 'Course Example',  emitter: 'player1' } ``` ### playback_paused Playback has paused in the player **Payload type:** ```javascript {  trainingMaterialId: string,  name: string,  emitter: string } ``` **Example payload:** ```javascript {  trainingMaterialId: '89',  name: 'Course Example',  emitter: 'player1' } ``` ### playback_reset Playback has been reset in the player > [!TIP] > Tip: > > This event has no payload ### volume_level_changed The volume level in the player has changed **Payload type:** ```javascript {  level: number,  emitter: string } ``` **Example payload:** ```javascript {  level: 80,  emitter: 'player1' } ``` ### 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 } ``` ### view_changed The view has been changed either by a command or via the user interface **Payload type:** `view` **parameter values:** - `preview` - `toc` - `viewer` - `viewer_toc` value emitted when the `viewer` (view where the current training material is played) and the right panel toc is open - `waiting_list` when the modal message of `waiting_list` is shown - `warning` when a full-screen blank slate is shown (if the parameter `forcefullscreen` is `true` and the blank slate is shown in the viewer view, the payload will be either `viewer` or `viewer_toc`) **Example payload:** ```javascript {  view: 'preview',  emitter: 'player1' } ``` ### training_materials_list_loaded Training material list is loaded when content tab in the table of contents is opened **Payload type:** ```javascript {  training_materials_list: [    {      id: string,      name: string,      type: string,      locked: boolean | string,      status: string    }  ]  emitter: string } ``` `type` **parameter values:** - `scormorg` - `aicc` - `tincan` - `video` - `youtube` - `wistia` - `vimeo` - `file` - `deliverable` - `htmlpage` - `poll` - `test` - `sign` - `googledrive` - `authoring` `locked` **string parameter values:** - `max_number_views` - `locked_maxattempts` - `locked` **Example payload:** ```javascript {  training_materials_list:  [    {      id: "181",      locked: false,      name: "Course name",      status: "in_progress",      type: "elearning"    }  ],  emitter: "player1" } ``` ### warning_shown A blank slate is shown **Payload type:** ```javascript {  type: string,  emitter: string } ``` `type` **parameter values when the emitter is a single course player:** - `widget_invalid_configuration` The attributes are not valid or the course type is not supported - `widget_no_content` There is no content to show. Currently, this occurs only when the course is priced. - `widget_no_course` - `user_authentication_failed` The user is not authenticated - `user_unauthorized` The user is not authorized to view the requested content - `user_not_enrolled` - `user_in_waiting_list` The user is in the waiting list - `training_material_list_empty` There is no training material in the course - `training_material_error` The training material has an error. This could happen when the training material is removed, or the Docebo platform has problem and embedded learning cannot retrieve the content. - `training_material_with_prerequisites` - `purchase_info` - `no_result_search` - `course_max_quota` - `course_validity_in_future` - `course_expired` **Example payload:** ```javascript {  type: 'training_material_error',  emitter: 'player1' } ``` ### training_material_status_changed The status of a training material is changed **Payload type:** ```javascript {  emitter: string,  id: string,  name: string,  type: string,  status: string } ``` `type` **parameter values:** - `aicc` - `scormorg` - `video` - `tincan` - `wistia` - `vimeo` - `file` - `htmlpage` - `youtube` `status` **parameter values:** - `in_progress` - `incomplete` - `completed` - `passed` - `attempted` - `failed` **Example payload:** ```javascript {  emitter: "player1",  id: "181",  name: "Course",  type: "scormorg"  status: "in_progress" } ``` ## Course player widget handling of course visibility rules Based on the [course visibility settings (opens in a new tab)](https://help.docebo.com/hc/en-us/articles/360020125439) 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 (all links in this list open in a new tab): > [!TIP] > Tip: > > Only e-learning courses are supported - Video - [Imported Video](https://help.docebo.com/hc/en-us/articles/360020128359) - [YouTube](https://help.docebo.com/hc/en-us/articles/360020082860) - [Vimeo](https://help.docebo.com/hc/en-us/articles/360020082860) - [Wistia](https://help.docebo.com/hc/en-us/articles/360020082860) > [!NOTE] > 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: > > ![](https://cdn.document360.io/75d583ae-622e-4bde-98e6-0ddd0e7a16bb/Images/Documentation/image(34).png) - [SCORM](https://help.docebo.com/hc/en-us/articles/360020128479) - [TinCan (xAPI)](https://help.docebo.com/hc/en-us/articles/360020128459) - [AICC](https://help.docebo.com/hc/en-us/articles/360020083220) - [VILT sessions](https://help.docebo.com/hc/en-us/articles/360020124099) - [HTML](https://help.docebo.com/hc/en-us/articles/360020083000) - [Slides Converter](https://help.docebo.com/hc/en-us/articles/360020128699) - [Survey](https://help.docebo.com/hc/en-us/articles/360020128919) - [Test](https://help.docebo.com/hc/en-us/articles/360020084440) - [Central Repository](https://help.docebo.com/hc/en-us/articles/10969644989330) - [Observation Checklist](https://help.docebo.com/hc/en-us/articles/360020079680) - [Google Drive](https://help.docebo.com/hc/en-us/articles/360020082760) > [!TIP] > Best practice: > > Docebo recommends viewing Google Drive training materials in full-screen mode. - [LTI](https://help.docebo.com/hc/en-us/articles/360020082660) - [Elucidat](https://help.docebo.com/hc/en-us/articles/360020127719) > [!NOTE] > 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. A course is a fundamental training unit in Docebo used to manage and deliver learning content. It can be a self-paced, online e-learning program or an instructor-led training (ILT) session held in-person or virtually. A course typically contains various learning materials, such as lessons, and is a key tool for organizing content, tracking user progress, and managing attendance and certifications.