--- title: "Embedded learning building blocks: My courses and learning plans widget" slug: "embedded-learning-building-blocks-my-courses-and-learning-plans-widget" description: "This article details the \"My courses and learning plans\" widget for Docebo embedded learning, covering HTML tags, attributes, and JavaScript commands for integration." updated: 2026-07-30T14:55:28Z published: 2026-07-30T14:55:28Z canonical: "developer.docebo.com/embedded-learning-building-blocks-my-courses-and-learning-plans-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: My courses and learning plans 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 launcher 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 or it is embedded as a widget within the page. The platform instance shows the training content you, as the Superadmin, have selected for the user on the basis of the action he or she is 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 My courses and learning plans widget allows you to view and access the courses and learning plans of the Docebo platform where the learner has been enrolled as if they were using the platform itself. The widget can be filtered and customized showing the list of items needed to the final user when it's embedded on the integrator's interface by changing the value of the parameters used. When My courses and learning plans has been embedded it can be either set to finalize the course consumption directly as part of the navigation of the same space occupied by the initial widget or the integrator can open the course in a separate single course player widget placed into the same section of his interface. In any case, the tracking of training and all statistics that would be produced when using the Docebo platform will be happening in the usual manner. ## 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). ## Inserting the widget in your web page ### HTML tag The My courses and learning plans widget requires the following HTML tag to be inserted into the web page to display: ```xml ``` List of tag attributes The `dcbo-my-courses-and-lp` tag can accept the following list of attributes; all values associated with the attributes should be encapsulated in double-quotation marks. > [!NOTE] > Please note: > > - While all attributes are technically optional, leaving out the `id` attribute will render the widget non-interactive via JavaScript or other widgets in the page. > - All attributes, with the exception of `id`, have a default value. ### `id` **Type**: String **Description**: The ID of the My courses and learning plans widget. > [!NOTE] > Please note: > > If this attribute is not supplied then the widget becomes non-interactive via JavaScript or other widgets in the page. ### `includeplayer` **Type**: Boolean **Description**: Includes the Docebo course player and allows for the courses to be played from within the widget. **Default value**: `true` ### `itemtype` **Type**: String **Description**: Selects the type of object to be displayed **Possible values**: - `all` - `course` - `learning_plan` **Default value**: `all` ### `itemstatus` **Type**: String **Description**: An array type string filtering the `itemtype` list by status. **Possible values**: - `not_started` - `in_progress` - `completed` **Example**: ```javascript itemstatus="not_started,completed" ``` **Default value**: `not_started,in_progress,completed` ### `hidecoursesinlp` **Type**: Boolean **Description**: When set to `true`, the individual courses will not be displayed in the learning plan. **Default value**: `false` ### `showsort` **Type**: Boolean **Description**: When set to `true`, the option to sort the results will be visible. If set to `false`, the option to sort the results will not be visible. **Default value**: `true` ### `defaultsortby` **Type**: String **Description**: Selects the default sort-by and order for the search results. **Possible values**: - `name_asc` - `name_desc` - `enrollment_date_asc` - `enrollment_date_desc` **Default value**: `enrollment_date_desc` ### `showfilter` **Type**: Boolean **Description**: When set to `true`, the option to filter the results will be visible. If set to `false`, the option to filter the results will not be visible. **Default value**: `true` ### `autoplay` **Type**: Boolean **Description**: When set to `true`, this widget will start playing the content as soon as it is loaded, otherwise it will wait for user-interaction. **Default value**: `false` > [!TIP] > Tip: > > This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). ### `showfullscreen` **Type**: Boolean **Description**: When 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 value is set to `false`, this option will not be displayed. **Default value**: `true` > [!TIP] > Tips: > > - This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). > - This attribute should not be confused with the [forcefullscreen](/v1/docs/embedded-learning-building-blocks-my-courses-and-learning-plans-widget#forcefullscreen) attribute. ### `showpip` **Type**: Boolean **Description**: When set to `true`, a button is displayed allowing this widget to be played in picture-in-picture mode, casuing the output of the player to be overlaid on screen. If set to `false`, the button is hidden and the functionality is not available. **Default value**: `true` > [!TIP] > Tips: > > - This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). > - This attribute is only available for video content ### `showtoc` **Type**: Boolean **Description**: When set to `false`, the table of contents button will not be displayed. **Default value**: `true` > [!TIP] > Tip: > > This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). ### `forcefullscreen` **Type**: Boolean **Description**: When 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. **Default value**: `false` > [!TIP] > Tips: > > - This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). > - This attribute should not be confused with the [showfullscreen](/v1/docs/embedded-learning-building-blocks-my-courses-and-learning-plans-widget#showfullscreen) attribute. ### `showthumbsintoc` **Type**: Boolean **Description**: When set to `true`, a thumbnail preview of the content will be displayed in the table of contents. **Default value**: `false` > [!TIP] > Tip: > > This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). ### `tmdownloadmode` **Type**: String **Description**: This attribute changes the training material download mode. **Possible values**: - `blob` - `link` **Default value**: `blob` > [!TIP] > Tip: > > This is a player attribute and is only needed if the player is part of the same widget navigation (`includeplayer=”true”`). ### `showcoursedeadline` **Type**: Boolean **Description**: 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. **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 ``` > [!TIP] > Tip: > > You can place this tag inside a `<div>` `</div>` tag in order to manipulate the position, size and behavior of the widget itself. ## Commands accepted by the My courses and learning plans 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 widget being stated as an attribute when embedding the widget. In the following list, replace `ID OF WIDGET` with the actual ID of your widget. ### Perform keyword search Perform a keyword search using the initial `itemstatus` and `itemtype` HTML tag attributes. **Command:** ```javascript DSDK.getCommandBus().send(  'search',  'ID OF WIDGET',  {    key: ''  } ) ``` **The promise is resolved with:** ```javascript {  search: true } ``` ### Clear the search input text Clear the input text related to the search. **Command:** ```javascript DSDK.getCommandBus().send(  'clear_search',  'ID OF WIDGET',  {} ) ``` **The promise is resolved with:** ```javascript {  clear: true } ``` ### Close the search input text Close the input text related to the search. **Command:** ```javascript DSDK.getCommandBus().send(  'close_search',  'ID OF WIDGET',  {} ) ``` **The promise is resolved with:** ```javascript {  close: true | false } ``` ### Open the search input text Open the input text related to the search. **Command:** ```javascript DSDK.getCommandBus().send(  'open_search',  'ID OF WIDGET',  {} ) ``` **The promise is resolved with:** If the command is accepted, the promise is resolved with `true` if successful, otherwise with `false`: ```javascript {  open: true | false } ``` ### Select item Select and open the course or learning plan selected, if it is in the current My Courses and Learning Plans list. **Command:** ```javascript DSDK.getCommandBus().send(  'select_item',  'ID OF WIDGET',  {     id: string,     type: string  } ) ``` **Possible** `type` **values**: - `learning_plan` - `course` **The promise is resolved with:** If the command is accepted, the promise is resolved with `true` if successful, otherwise with `false`: ```javascript {  open: true | false } ``` ## Events generated by the My courses and learning plans widget All commands and interactions generate events, 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; } ``` ### `search_cleared` The widget has been created > [!TIP] > Tip: > > This event has no payload ### `item_selected_external_player` Item selected from external player. The `tmId` and `learning_plan` parameters are both optional. **Payload type:** ```javascript {  id: string,  tmId: string,  learning_plan: {    title: string,    price: string;  },  emitter: string } ``` **Example payload:** ```javascript {  id: '1',  emitter: 'myclp' } ``` ### `item_selected` Item selected **Payload type:** ```javascript {  id: string,  name: string,  type: string,  emitter: string } ``` `type` **parameter values**: - `elearning` - `learning_plan` **Example payload:** ```javascript {  id: '181',  name: 'Course with video',  type: 'elearning',  emitter: 'myclp' } ``` ### `item_list_loaded` The item list has been loaded **Payload type:** ```javascript {  items: [    {      id: string,      name: string,      type: string    }  ],  emitter: string } ``` `type` **parameter values**: - `elearning` - `learning_plan` **Example payload:** ```javascript {  items:[    {      id: '181',      name: 'Course with video',      type: 'elearning'    },    {      id: '182',      name: 'Other course with video',      type: 'elearning'    }  ],  emitter: 'player1' } ``` ### `search_started` Search is started using the specified keyword. **Payload type:** ```javascript {  search: string,  emitter: string } ``` **Example payload:** ```javascript {  search: 'course1',  emitter: 'player1' } ``` ### `search_ended` Search is ended with this result **Payload type:** ```javascript {  search: string,  isEmpty: boolean,  result: [    {      id: string,      name: string,      type: string    }  ],  emitter: string } ``` `isEmpty` parameter values: - `true` - `false` **Example payload:** ```javascript {  search: 'test',  isEmpty: false,  result: [    {      id: '1',      name: 'test',      type: 'elearning'    }  ],  emitter: 'player1' } ``` ### `search_opened` The search input field is open > [!TIP] > Tip: > > This event has no payload ### `search_closed` The search input field is closed > [!TIP] > Tip: > > This event has no payload A learning plan is a curated sequence of courses including e-learning and Instructor-Led Training (ILT) that forms the backbone of personalized learning journeys for individuals, branches or groups. These plans serve as crafted learning experiences that guide learners through structured pathways of courses and resources to foster individual growth and organizational culture. Learning plans allow administrators to facilitate employee skill development or streamline certification programs by creating personalized paths. They empower organizations to shape tailored experiences by integrating features such as mandatory requirements, prerequisites, enrollment rules and certifications to meet the unique needs and objectives of the company. ## Related - [Embedded learning building blocks: Course list widget](/embedded-learning-building-blocks-course-list-widget.md) - [Embedded learning building blocks](/embedded-learning-building-blocks-1.md)