Embedded learning building blocks: Single asset 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 single asset player widget allows you to play specific assets 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 single asset 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.

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 single asset player requires the following tag to be inserted into the web page to display:

<dcbo-asset-player
  [LIST OF TAG ATTRIBUTES]
>
</dcbo-asset-player>

List of tag attributes

The dcbo-asset-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.

Tip:

All boolean values in the tag attributes can accept the following values to denote false:

• false (Example: showfullscreen="false")

• 0 (Example: showfullscreen="0")

• An empty value (Example: showfullscreen="")

Any other provided value is interpreted as true.

Widget views

The asset player widget contains the usual three views as the course player: preview, overview, and viewer. These views are described in greater detail here.

Preview view

The initial view of the asset player widget is the preview view. The preview may be skipped by setting the showpreview attribute to false. In this case, the initial view becomes the viewer:

<dcbo-asset-player 
  assetid="36" 
  id="apw_bc1572"
  showpreview="false">
</dcbo-asset-player>

The preview view has three main areas:

1. The container:

   Displays the asset thumbnail as a background if it has an assigned or the asset-type dependent default thumbnail.

2. The general information area:

   A subsection of the container, it provides the general information about the asset such as title, type, and whom it was shared by. It also shows if the learner has opened the asset, using the labels New or Watched. The View Content button navigates the user to the viewer.

3. The navigation area:

   A subsection of the container, it only contains the Overview button that navigates the user to the overview. This button is not displayed if the integrator sets the showtoc attribute to false.

<dcbo-asset-player 
  assetid="36" 
  id="apw_bc1572"
  showtoc="false">
</dcbo-asset-player>

Overview

The overview details various asset information.

1. The header section:

   Contains the asset title and the back button to help the user navigate to the previous view.

2. The main content section:

   Displays the asset description, and by whom, when, and on which channels it was shared.

3. The main action button:

   Navigates the user to the viewer view.

A more detailed display is also available for this view if the integrator sets the showthumbsintoc attribute to true. In this display, the header also contains the asset type and the thumbnail as background.

<dcbo-asset-player
  assetid="36" 
  id="apw_bc1572"
  showthumbsintoc="true">
</dcbo-asset-player>

Viewer view

The main role of the viewer is to display the asset. It contains three main areas:

1. The title of the header:

   Displays the asset title and a back button to navigate to the previous view.

2. The control buttons in the header:

   Contains two buttons. The first one navigates the user to the overview and the second toggles between the fullscreen and normal view.

3. The main content:

   Holds the actual asset.

If the integrator sets the showtoc attribute to false, the overview button does not appear.

<dcbo-asset-player 
  assetid="36" 
  id="apw_bc1572"
  showtoc="false">
</dcbo-asset-player>

If the showfullscreen attribute is false the fullscreen button is not displayed, this prevents the user from toggling between the view modes.

<dcbo-asset-player 
  assetid="36" 
  id="apw_bc1572"
  showfullscreen="false">
</dcbo-asset-player>

Fullscreen

The view mode changes to fullscreen when the Fullscreen button is pressed. By default, the right-hand side overview tab is hidden but when pressing the Overview button it opens instead of navigating the user away from this view. By pressing the Fullscreen button again it returns to the widget view mode.

Commands accepted by the single asset 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.

DSDK.getCommandBus().send(
  'change_view',
  'ID OF WIDGET',{
    view: string;
  }
)

{}

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

{
  fullscreen: true
}

{
  fullscreen: false
}

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

{
  fullscreen: false
}

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

{
  opened: true
}

{
  opened: false
}

{
  opened: true
}

{
  opened: false
}

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

{
  closed: true
}

{
  closed: false
}

{
  closed: false
}

{
  closed: true
}

DSDK.getCommandBus().send(
  'set_volume_level',
  'ID OF WIDGET',
  {
    level: number
  }
)

{
  success: true;
  level: 0-100;
}

{
  success: false;
}

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

{
  muted: true
}

{
  muted: false
}

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

{
  muted: false
}

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

{
  playing: true
}

{
  playing: false
}

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

{
  paused: true
}

{
  paused: false
}

Events generated by the asset player widget

Events are generated by the asset player widget usage, allowing you to listen to and monitor the behavior of the user during the navigation of the widget and the consumption of the asset with JavaScript to add extra functionality to your page.

To listen the to 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

{
  view: NavigationContextView
}

{
  assetId: number,
  name: string
}

{
  assetId: number,
  name: string
}

{
  level: number
}

{
  assetId: number,
  name: string
}

{
  type: 'user_unauthorized' | 'widget_no_content'
}

{
  fullscreen: boolean
}