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 My Courses and Learning Plans Widget allows you to view and access the Courses and Learning Plans of Docebo LMS where the user has been enrolled as if he was using the LMS 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 MyCourses & 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 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).

Inserting Docebo Flow Building Blocks in your Web Page

HTML Tag

The My Courses and Learning Plans widget requires the following 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 required and all, with the exception of id, have a default value.

id(required)

The ID of the My Courses and Learning Plans module.
Type: string

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

includeplayer(optional)

If TRUE, includes the Docebo Course Player and allows for the courses to be played from within the widget.
Type: boolean
Default Value: TRUE

itemtype(optional)

Selects the type of object to be displayed. This value can be all, course or learning_plan.
Type: string
Default Value: all

itemstatus (optional)

Filter the itemtype list by status. This value can be all, not_started, in_progress or completed.
Type: string
Default Value: all

hidecoursesinlp (optional)

When set to TRUE, the individual courses will not be displayed in the learning plan.
Type: boolean
Default Value: FALSE

showsearchbar (optional)

When set to TRUE, a search bar will be displayed allowing the received list to be searched by keyword.
Type: boolean
Default Value: FALSE

autoplay (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, the selected content will auto play.
Type: boolean
Default Value: FALSE

showfullscreen (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, the player will display the play full-screen button.
Type: boolean
Default Value: TRUE

showpip (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, the player will display the picture-in-picture button.
Type: boolean
Default Value: TRUE

showtoc (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, the player will display the table of contents button.
Type: boolean
Default Value: TRUE

forcefullscreen (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, the player will play in full screen mode.
Type: boolean
Default Value: FALSE

showthumbsintoc (optional)

Functional only if includeplayer is set to TRUE. When set to TRUE, a thumbnail preview of the content will be shown in the table of contents.
Type: boolean
Default Value: FALSE

tmdownloadmode (optional)

Functional only if includeplayer is set to TRUE. The value can be either blob or link. This attribute changes the training material download mode.
Type: blob | link
Default Value: blob

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 And Events Generated 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 the element] with the actual ID of your 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, Flow provides the proper listener, which is used as follows:

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

Perform a Search

Command Syntax

DSDK.getCommandBus().send('search', [id of the element], {key: [search key]});

Command Description

This command performs a search in the widget with the ID [id of the element] based on the [search key] and returns the results in the widget.

Possible Events Generated

DSDK.getEventManager().on('item_list_loaded', (e,p) => {console.log('Item list loaded => ',p);});
DSDK.getEventManager().on('search_started', (e,p) => {console.log('Search started => ',p);});
DSDK.getEventManager().on('search_ended', (e,p) => {console.log('Search ended => ',p);});
DSDK.getEventManager().on('search_opened', (e,p) => {console.log('Search opened => ',p);});
DSDK.getEventManager().on('search_closed', (e,p) => {console.log('Search closed => ',p);});

Clearing a Search

Command Syntax

DSDK.getCommandBus().send('clear_search', [id of the element]);

Command Description

This command clears the search in the widget with the id [id of the element].

Possible Events Generated

DSDK.getEventManager().on('search_cleared', (e,p) => {console.log('Search cleared => ',p);});
DSDK.getEventManager().on('search_started', (e,p) => {console.log('Search started => ',p);});
Please note the previous event will be with an empty key/search string
DSDK.getEventManager().on('item_list_loaded', (e,p) => {console.log('Item list loaded => ',p);});
DSDK.getEventManager().on('search_ended', (e,p) => {console.log('Search ended => ',p);});

Open the Search Bar

Command Syntax

DSDK.getCommandBus().send('open_search', [id of the element]);

Command Description

This command opens the search bar in the widget with the id [id of the element].

Possible Events Generated

DSDK.getEventManager().on('search_opened', (e,p) => {console.log('Search opened => ',p);});

Close the Search Bar

Command Syntax

DSDK.getCommandBus().send('close_search', [id of the element]);

Command Description

This command closes the search bar in the widget with the id [id of the element].

Possible Events Generated

DSDK.getEventManager().on('search_closed', (e,p) => {console.log('Search opened => ',p);});
DSDK.getEventManager().on('search_cleared', (e,p) => {console.log('Search cleared => ',p);});
DSDK.getEventManager().on('search_started', (e,p) => {console.log('Search started => ',p);});
DSDK.getEventManager().on('item_list_loaded', (e,p) => {console.log('Item list loaded => ',p);});
DSDK.getEventManager().on('search_ended', (e,p) => {console.log('Search ended => ',p);});

Selecting an Item

Command Syntax

DSDK.getCommandBus().send('select_item', [id of the element], {id: [course_id], type: ['learning_plan' | 'course']});

Command Description

This command selects the item [course_id] in either [learning_plan] or [course] in the widget with the ID [id of the element].

Possible Events Generated

DSDK.getEventManager().on('item_selected', (e,p) => {console.log('Item Selected => ',p);});
DSDK.getEventManager().on('item_list_loaded', (e,p) => {console.log('Item list loaded => ',p);});

Events Triggered by Manual Interaction with the Widget

Interacting with the widget by, for example, typing something into the search box or selecting an item in the list also generates events. Please find a list of these events here:

DSDK.getEventManager().on('item_list_loaded', (e,p) => {console.log('Item list loaded => ',p);});
DSDK.getEventManager().on('item_selected', (e,p) => {console.log('Item Selected => ',p);});
DSDK.getEventManager().on('search_started', (e,p) => {console.log('Search started => ',p);});
DSDK.getEventManager().on('search_cleared', (e,p) => {console.log('Search cleared => ',p);});
DSDK.getEventManager().on('search_ended', (e,p) => {console.log('Search ended => ',p);});
DSDK.getEventManager().on('search_opened', (e,p) => {console.log('Search opened => ',p);});
DSDK.getEventManager().on('search_closed', (e,p) => {console.log('Search closed => ',p);});