Introduction

Docebo Flow 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 he or she is performing, in order to provide the best learning on the fly experience, enriching it with ad hoc training.

Depending on the Docebo Flow configuration, users can be automatically provisioned so that their learning on the flow of work is not an event interrupted by the need to log in.

Docebo Flow is available as a web-based application on desktop and mobile platforms.

The Docebo Course Player widget allows you to play content from the Docebo Learn platform as if you were using the Docebo Learn 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.

Activating Docebo Flow

To activate Docebo Flow, reach out to Docebo via the Help Center, 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:

<dcbo-course-player
[LIST OF ATTRIBUTES]
>
</dcbo-course-player>

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:

id (required)

The ID of the course player.
Type: string

Please Note: If this attribute is not supplied then the widget becomes non-interactive via JavaScript or other Widgets in the page.

type (optional)

The single course player type. Possible values are static or dynamic.
Type: string
Default Value: static

sources (optional)

The ID of the widget providing the source material to be displayed. This can also be a list of IDs, separated by commas.
Type: string

courseid (required)

The ID of the course that will be displayed in the player.
Type: string

autoplay (optional)

If set to TRUE, this widget will start playing the content as soon as it is loaded. Otherwise, it will wait for user-interaction.
Type: boolean
Default Value: FALSE

showfullscreen (optional)

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

showpip (optional)

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. This attribute is available only for video content.
Type: boolean
Default Value: TRUE

showtoc (optional)

If this value is set to FALSE, the table of contents button will not be displayed.
Type: boolean
Default Value: TRUE

showthumbsintoc (optional)

If this value is set to TRUE, a thumbnail preview of the content will be displyed in the table of contents.
Type: boolean
Default Value: FALSE

showpreview (optional)

If this value is set to FALSE then the preview will not be displayed.
Type: boolean
Default Value: TRUE

tmdownloadmode (optional)

This attribute changes the training material download mode. Possible values are blob and link.
Type: blob | link
Default Value: blob

Example

You can then add the following tag in the position you wish to place the widget:

<dcbo-course-player
    id="player1"
    courseid="insert valid course id"
    autoplay="false"
    forcefullscreen="false"
    showfullscreen="true"
    showpip="true"
    showthumbsintoc="false"
    sources="id_of_the_myC&LPs_widget"
>
</dcbo-course-player>

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:

--dcb-flow-course-player-back-button-icon: <icon>

To use it, wrap the CSS token inside dcbo-course-player{}. For example:

dcbo-course-player {
  --dcb-flow-course-player-back-button-icon: 'close';
}

Views

The Docebo 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.

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, Flow provides the proper listener, which is used as follows:

DSDK.getEventManager().on('event_name', (e,p) => {console.log('Event Name => ',p);});

Play Training Material

Command Syntax

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

Command Description

Loads the current training material and if it is a video also starts playing it.

Possible Events Generated

playback_started

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Pause Playback

Command Syntax

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

Command Description

Pauses the training material. Any further attempt to play the course will resume from the current training material.

Possible Events Generated

playback_paused

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Reset Playback

Command Syntax

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

Command Description

Stops the playback of the current training material and resets the start point to the first training material of the course.

Possible Events Generated

playback_reset

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Select Next Training Material

Command Syntax

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

Command Description

Moves the pointer of the course to the next available training material. This has no effect if there is no further training material available.

Possible Events Generated

training_material_status_changed

{
    emitter: "player1",
    id: "181",
    name: "Course",
    type: "scormorg"
    status: "in_progress"
}

Expected Values

type (string):

< aicc | scormorg | video | tincan | vimeo | file | htmlpage | youtube >

status (string):

< not_started | in_progress | completed >

Select Previous Training Material

Command Syntax

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

Command Description

Moves the pointer of the course to the previous available training material. This has no effect if there is no previous training material available.

Possible Events Generated

training_material_status_changed

{
        emitter: "player1",
        id: "181",
        name: "Course",
        type: "scormorg"
        status: "in_progress"
}

Expected Values

type (string):

< aicc | scormorg | video | tincan | vimeo | file | htmlpage | youtube >

status (string):

< not_started | in_progress | completed >

Set The Volume Level

Command Syntax

DSDK.getCommandBus().send('set_volume_level', 'ID OF WIDGET', {level: VALUE BETWEEN 1 AND 100})

Command Description

Sets the playback volume of the VIDEO player to the predefined volume percentage levels. Possible values are 1 to 100.

Possible Events Generated

volume_level_changed

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Mute The Volume Level

Command Syntax

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

Command Description

Sets the playback volume of the VIDEO player to 0.

Possible Events Generated

volume_level_changed

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Unmute The Volume Level

Command syntax

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

Command Description

Sets the playback volume of the VIDEO player the previously set volume levels before muting. This has no effect if the video player is not muted.

Possible Events Generated

volume_level_changed

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Switch To Fullscreen

Command Syntax

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

Command Description

Switches to full-screen visualization.

Possible Events Generated

switched_fullscreen

{
       fullscreen: true,
       emitter: 'player1'
}

Expected Value:

fullscreen (string): < TRUE | FALSE >

Exit Fullscreen

Command Syntax

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

Command Description

Switches from full-screen to normal visualization.

Possible Events Generated

switched_fullscreen

{
       fullscreen: true,
       emitter: 'player1'
}

Expected Value

fullscreen (string): < TRUE | FALSE >

Open Table Of Contents

Command Syntax

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

Command Description

Opens the Table of Contents (the Table of Contents starts in the Overview tab). Only available in full screen mode.

Possible Events Generated

training_materials_list_loaded

{
    emitter: "player1",
    training_materials_list: [
    {
        id: "181",
        locked: false,
        name: "Course name",
        status: "in_progress",
        type: "elearning"
    },
]
}

Close Table Of Contents

Command Syntax

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

Command Description

Closes the table of contents (the table of contents starts in the Overview tab). Only available in full screen mode.

Possible Events Generated

none

Hide The Widget From The Page

Command Syntax

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

Command Description

Hides the widget from the page.

Possible Events Generated

none

Show Hidden Widget On The Page

Command Syntax

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

Command Description

Shows the widget (if previously hidden) in the page.

Possible Events Generated

none

Load Course By Course And Widget IDs

Command Syntax

DSDK.getCommandBus().send('load_course', 'ID OF WIDGET', {'id': 'Insert valid course ID here'})

Command Description

Loads the course specified by the course ID into the widget specified by its ID.

Possible Events Generated

course_loaded

{
    id: 189, 
    name: 'Course Example', 
    emitter: 'player1'
}

Load Course In External Player

Command Syntax

DSDK.getCommandBus().send('load_course', 'COURSE PLAYER WIDGET ID', {id: COURSE ID, training_material_id: 'TRAINING MATERIAL ID'});

Command Description

This command is issued by the Course List Widget and will load a course (based on the supplied COURSE ID and TRAINING MATERIAL ID) into the external course player widget with the ID COURSE PLAYER WIDGET ID.

Possible Event Generated

training_material_loaded

{
  emitter: 'ID OF THE PLAYER'
}

The ID of the emitter will be the ID that was defined in the HTML tag of the course player.

Course Player widget handling of course visibility rules

Based on the course visibility settings 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:

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

Important Notes

• At this time only the following types of training material are supported:
• Only E-Learning courses are supported
• Video
• Imported Video
• YouTube
• Vimeo
• Wistia
• SCORM
• TinCan (xAPI)
• AICC
• HTML
• Slides Converter
• Survey
• Test
• Central Repository
• Observation Checklist
• Google Drive

  Please Note: Docebo recommends viewing Google Drive training materials in full-screen mode.

• LTI
• Elucidat
• 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.