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:

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

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:

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

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

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

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

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:

DSDK.getCommandBus().send(
  'search',
  'ID OF WIDGET',
  {
    key: '<KEYWORD>'
  }
)

The promise is resolved with:

{
  search: true
}

Clear the search input text

Clear the input text related to the search.

Command:

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

The promise is resolved with:

{
  clear: true
}

Close the search input text

Close the input text related to the search.

Command:

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

The promise is resolved with:

{
  close: true | false
}

Open the search input text

Open the input text related to the search.

Command:

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:

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

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:

{
  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

`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`

The widget has been created

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`

The item list has been 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`

The search input field is open

Tip:
This event has no payload

`search_closed`

The search input field is closed

Tip:
This event has no payload