Skip to main content

Docebo Help

How can we help?

Embedded learning building blocks: My courses and learning plans widget

Last updated
Docebo module
Reading time
User level
  • Administrators

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:

<dcbo-my-courses-and-lp
  [LIST OF ATTRIBUTES]
></dcbo-my-courses-and-lp>

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.

Please note: All attributes are optional. All attributes, with the exception of id, have a default value.
Attribute Type Description
id string

The ID of the My courses and learning plans widget.

Please note: If this attribute is not supplied then the widget becomes non-interactive via JavaScript or other widgets in the page.
includeplayer boolean

Includes the Docebo course player and allows for the courses to be played from within the widget.

Default value:
true
itemtype string

Selects the type of object to be displayed.

Possible values:

  • all
  • course
  • learning_plan

Default value:
all
itemstatus string

An array type string filtering the itemtype list by status.

Possible values:

  • not_started
  • in_progress
  • completed

Example:
itemstatus="not_started,completed"

Default value:
not_started,in_progress,completed
hidecoursesinlp boolean

When set to true, the individual courses will not be displayed in the learning plan.

Default value:
false
showsearchbar boolean

When set to true, a search bar will be displayed allowing the received list to be searched by keyword. If set to false, the search bar will not be displayed.

Default value:
true
showsort boolean

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 string

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 boolean

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
autoplay boolean

If 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: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
showfullscreen boolean

If this value is set to true or omitted this widget will be playable in full screen, which can be activated 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: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
showpip boolean

If set to true a button is displayed allowing this widget to be played in picture-in-picture mode, causing the output of the player to be overlaid on screen. If set to false the button is hidden and the functionality removed.

Default value:
true

Tip:
This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
This attribute is also only available for video content.
showtoc boolean

If set to false, the table of contents button will not be displayed.

Default value:
true

Tip: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
forcefullscreen boolean

If 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: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
showthumbsintoc boolean

If set to true, a thumbnail preview of the content will be displayed in the table of contents.

Default value:
false

Tip: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
tmdownloadmode string

This attribute changes the training material download mode.

Possible values:

  • blob
  • link

Default value:
blob

Tip: This is a player attribute and is only needed if the player is part of the same widget navigation (includeplayer="true").
showcoursedeadline string

If set to true, shows the deadline of the course in the course details tile. If set to false, the deadline of the course will not be displayed.

Default value:
true

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-my-courses-and-lp 
  id="changeMe"
// My Course and LPs attributes
  includeplayer="true" 
  itemtype="all"
  itemstatus="all"
  hidecoursesinlp="false"
// Player attributes - Only needed if the player is part of the same
//                     widget navigation
  autoplay="false"
  forcefullscreen="false"
  showthumbsintoc="false"
  showtoc="true"
  showpip="true"
  showfullscreen="true"
>
</dcbo-my-courses-and-lp>

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.

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.

Command Description and
response promise payload		 
DSDK.getCommandBus().send(
  'search',
  'ID OF WIDGET',
  {
    key: '<KEYWORD>'
  }
)

Perform a keyword search using the initial itemstatus and itemtype HTML tag attributes.

The promise is resolved with:

{ 
  search: true 
}
 
DSDK.getCommandBus().send(
  'clear_search',
  'ID OF WIDGET',
  {}
)

Clear the input text related to the search.

The promise is resolved with:

{ 
  clear: true 
} 
DSDK.getCommandBus().send(
  'close_search',
  'ID OF WIDGET',
  {}
)

Close the input text related to the search.

The promise is resolved with:

{ 
  close: true | false
}
 
DSDK.getCommandBus().send(
  'open_search',
  'ID OF WIDGET',
  {}
)

Open the input text related to the search.

If the command is accepted the promise is resolved with:
true, if successful, otherwise false:

{ 
  open: true | false 
} 
DSDK.getCommandBus().send(
  'select_item',
  'ID OF WIDGET', 
  {
    id: string,
    type: string
  }
)

Select and open the course or learning plan selected, if it is in the current My Courses and Learning Plans list.

Possible type values:

  • learning_plan
  • course

If the command is accepted the promise is resolved with true, if successful, otherwise false:

{ 
  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:

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:

{
  id: string;
  type: WidgetType;
  view: FlowView;
}
widget_destroyed

The widget has been destroyed

Payload type:

{
  id: string;
  type: WidgetType;
  view: FlowView;
}
search_cleared

Playback has been reset in the player.

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:

{
  id: string,
  tmId: string,
  learning_plan: {
    title: string,
    price: string;
  },
  emitter: string
}

Example payload:

{
  id: '1', 
  emitter: 'myclp'
}
item_selected

Item selected.

Payload type:

{
  id: string,
  name: string,
  type: string,
  emitter: string
}

type parameter values:

  • elearning
  • learning_plan

Example payload:

{
  id: '181',
  name: 'Course with video',
  type: 'elearning',
  emitter: 'myclp'
}
item_list_loaded

Item list loaded.

Payload type:

{
  items: [
    {
      id: string,
      name: string,
      type: string
    }
  ],
  emitter: string
}

type parameter values:

  • elearning
  • learning_plan

Example payload:

{
  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:

{
  search: string,
  emitter: string
}

Example payload:

{
  search: 'course1',
  emitter: 'player1'
}
search_ended

Search is ended with this result.

Payload type:

{
  search: string,
  isEmpty: boolean,
  result: [
    {
      id: string,
      name: string,
      type: string
    }
  ],
  emitter: string
}

isEmpty parameter values:

  • true
  • false

Example payload:

{
  search: 'test',
  isEmpty: false,
  result: [
    {
      id: '1',
      name: 'test',
      type: 'elearning'
    }
  ],
  emitter: 'player1'
}
search_opened

Search input field is open.

Tip: This event has no payload.
search_closed

Search input field is closed.

Tip: This event has no payload.