Introduction
Docebo Flow Building Blocks allow you to start single widgets presenting the content of your Docebo platform as part of the layout composition of any external web page, as long as you have access to its HTML and JavaScript code.
Building Blocks has the advantage of modular training by using widgets that can be seamlessly injected into your HTML code using a low-code approach to guide behavior. This is coupled with the provisioning of the content, either using simple Javascript commands or a small set of HTML tag attributes, by following the generic visibility policy rules set on the platform. The integrator building the web page will be able to create the best on-the-fly learning experience for the user based on vertical training needs by customizing the widget behavior without passing through the Flow configurator page of the Docebo platform.
As with the Flow launcher, the user who accesses the external web page must be authenticated by the Docebo platform before seeing any content on the page. Once the connection is established by granting the proper working session on the browser, the final user can be automatically provisioned with the training so that their learning flow is not interrupted, even by the need to log in.
The Docebo Flow Building Blocks Course List Widget provides a vertical context of training, mainly focused on obtaining compliance in specific contexts of training such as complex scenarios of Customer Education by providing a specific and dynamic micro catalog of courses. It is also useful for Sales Enablement objectives where a specific grouping of content can be used to certify a certain type of accreditation.
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).
About the Course List Widget
When a course is clicked on the list the course player can be opened either as part of the navigation of the widget or it can be opened in another Docebo Flow Building Blocks Course Player Widget placed in the HTML of the integrator layout.
In the same way, also when the training material in the list is clicked, the player will be started. In that scenario, if the user has been already enrolled in the course and the course prerequisites have been met then the player will show the training material selected. In case the user is not enrolled the player will show the overview page with the option to start consuming the course, based on the enrollment and catalog policies.
The Course List Widget has two modes, Static and Dynamic, their differences are described here.
- Static
- Static mode allows you to statically host up to 10 specific courses by presenting them in a list. When the list is based on a static number of courses, the user can see only the courses based on the visibility permissions set by the Docebo Learn platform. For example, if the course has been set as Only the admin can enroll in this course and the user doesn't see the course as they are not yet enrolled and the course is not in any visible catalog, the course will not be shown.
- Dynamic
- Dynamic mode lets you dynamically return a list of courses based on the current capability of the Docebo Learn platform's Global Search by filtering them for numerosity, courses contained in My Courses and Learning Plans, courses contained in visible catalogs, and training material available in visible courses. When the list is based on the dynamic response of the Global Search, the user can see all the courses and the training materials returned by the visibility rules applied on the Docebo Learn platform. Exactly like the current widget in the Docebo Flow App Launcher, the widget can be parametrized to show a given number of courses or specific areas of search such as courses contained in My Courses and Learning Plans, courses contained in visible catalogs, and training materials available in visible courses.
HTML Tag
The Docebo Course List requires the following tag to be inserted into the HTML of the web page to display:
<dcbo-course-list
[LIST OF ATTRIBUTES]
>
</dcbo-course-list>
List of Tag Attributes
The dcbo-course-player
tag can accept the following list of attributes.
Please Note: All values associated with the attributes should be encapsulated in double-quotation marks
id
-
The ID of the course list. This attribute is required.
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
-
A string value of either
static
ordynamic
. This attribute changes the course list type and is required.Type: string (
static
|dynamic
) coursesids
-
Valid and required if
type
isstatic
. A list of course IDs separated by comma that will be displayed in the player.Type: string
widgettitle
-
This is the title of the widget. This attribute is optional.
Type: string
Default Value:TRUE
trainingmaterials
-
Valid if
type
isdynamic
. If this value is set toTRUE
or omitted, it will enable the drop-down of the courses contained in the Course Content search tab. This attribute is optional.Type: boolean
Default Value:FALSE
mycoursesandlps
-
Valid if
type
isdynamic
. If this value is set toTRUE
or omitted, it will enable the drop-down of the courses contained in the My Courses and Learning Plans search tab. This attribute is optional.Type: boolean
Default Value:FALSE
fromcatalogs
-
Valid if
type
isdynamic
. If this value is set toTRUE
or omitted, it will enable the drop-down of the courses contained in the Course Catalog search tab. This attribute is optional.Type: boolean
Default Value:FALSE
maxresults
-
Valid if
type
isdynamic
. Defines the number of courses shown in the list. If this value is empty or omitted, the course list will return all the results. This attribute is optional.Type: number
Default Value: empty noresulttitle
-
A custom title shown in the slate when the search result is empty. This attribute is optional.
Type: string
Default Value:Whoops, there's nothing here
noresultdescription
-
A custom description shown in the slate when the search result is empty. This attribute is optional.
Type: string
Default Value:Looks like there's nothing for you in this area right now
includeplayer
-
If this value is set to
TRUE
or omitted, the Single Course Player will be included in the same widget. This attribute is optional.Type: boolean
Default Value:TRUE
autoplay
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:TRUE
showfullscreen
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:TRUE
showpip
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:TRUE
showtoc
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:FALSE
forcefullscreen
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:FALSE
showthumbsintoc
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:FALSE
showpreview
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type: boolean
Default Value:TRUE
tmdownloadmode
-
Valid only if
includeplayer
isTRUE
. This value will be sent to the included player in the same widget. For more information see the Docebo Flow Building Blocks Course Player widget documentation. This attribute is optional.Type:
blob
|link
Default Value:blob
HTML Tag Examples
Basic Course List
To display a basic course list in your page, add the following tag in the position you wish to place the widget:
<dcbo-course-list
id="courselist1"
type="dynamic"
widgettitle="Course List DYNAMIC"
maxresults="20">
</dcbo-course-list>
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.
Course List Used With External Player
To display a course list that uses a player in a separate widget, add the following tag in the position you wish to place the widget:
<dcbo-course-list
id="courselist1"
type="dynamic"
widgettitle="Course List DYNAMIC"
maxresults="20"
includeplayer="false">
</dcbo-course-list>
<dcbo-course-player
id="player1"
courseid="insert valid course id"
autoplay="true"
forcefullscreen="false"
showfullscreen="true"
showpip="true"
showthumbsintoc="false"
sources="courselist1"
>
</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.
Static Course List
To display a static course list with the course player included, add the following tag in the position you wish to place the widget:
<dcbo-course-list
id="courselist1"
includeplayer="true"
type="static"
widgettitle="Course List"
coursesids="181,189,190,191"
>
</dcbo-course-list>
This example will include four courses in the list, as specified by the coursesids
variable.
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.
Widget Views
The Course List Widget has different views:
- dynamic-list
- The
dynamic-list
view in the Docebo Flow Course List widget is available only when the type isdynamic
. This view allows you to search courses, learning plans and training material via global search using a command. The results of the global search are split into 3 tabs (Course catalog, Training Material, My Courses and Learning Plans) - static-list
- The
static-list
view in the Docebo Flow Course List widget is available only when the type isstatic
. This view allows you to load a maximum of 10 courses. - player
- The
player
view integrates the Docebo Flow Building Blocks Course Player widget without the preview. Look at Docebo Flow Building Blocks Course Player widget documentation for more info about this view.
The first visible view depends on the type
tag attribute. If type
is static
, the first view will be the static-list
otherwise dynamic-list
will be the first view. The player
view can be reached from all the views. In every view, if a previous view was shown, a navigation back button is also shown.
Every time the user changes their view, the data will be refreshed to keep them always up-to-date.
Commands Accepted By The Course List 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 the term ID OF WIDGET with the actual ID of your widget.
To send commands to the internal player follow the Single Course Player documentation using an internal ID with this format style:
"course list widget id"-internal-course-player
Load courses
Command Syntax
DSDK.getCommandBus().send('load_courses', 'ID OF WIDGET', { ids: "LIST OF ID"})
Command Description
Load the list of courses sent via the payload, showing only those viewable by the user.
This command is available only when type
is static
.
Example payload: {ids: "182,187,179"}
Possible Events Generated
lp_course_list_loaded
-
{
[
{
id: 181,
name: "Course With Video",
type: "elearning"
},
{
id: 221,
name: "Course C2",
type: "elearning"
}
]
emitter: 'courseListId'
}
Search via the Global Search in the Catalog
Command Syntax
DSDK.getCommandBus().send('search', 'ID OF WIDGET', {text: "KEYWORD TO SEARCH"})
Command Description
Search via Global Search in the Course Catalog, My Courses and Learning Plans and training material sections. The filters applied to this search depend on these attributes: maxresults
, fromcatalogs
, trainingmaterials
and mycoursesandlps
.
This command is available only when the type
is dynamic
.
Example payload: { text: 'Course with video'}
Possible Events Generated
search_started
-
{
search:'course name'
emitter: 'courseListId'
} search_ended
-
{
search:'course name'
emitter: 'courseListId'
} item_list_loaded
-
{
[
{
id: 181,
name: "Course With Video",
type: "elearning"
},
{
id: 221,
name: "Video1",
type: "training_material"
}
]
emitter: 'courseListId'
} warning_shown
-
{
type: 'no_result_search',
emitter: 'player1'
}
Command Flow
Select an item
Command Syntax
DSDK.getCommandBus().send('select_item', 'ID OF WIDGET', { type: "ITEM TYPE", id:"ITEM ID" });
Command Description
Select the item id of type
passed. The possible item types are:
course
- Can be used in static and dynamic view. When the widget type is
dynamic
this command can be used only when course catalogs or my courses and learning plans tabs are selected. learning_plan
- Can be used only in dynamic view and only when the my courses and learning plans tab is selected.
training_material
- Can be used only in dynamic view and only when the course content tab is selected.
This command is available in static
and dynamic
. The search of the item id depends on the item type and the tab selected.
Example payload: {type: 'course', id:181}
Possible Events Generated
course_loaded
-
{
id: 189,
name: 'Course Example',
emitter: 'courseListId-internal-course-player'
}The course player in the emitter value will report as
internal-course-player
if the widget contains the player, otherwise it will returnexternal-course-player
. lp_course_list_loaded
-
{
[
{
id: 181,
name: "Course With Video",
type: "elearning"
},
{
id: 221,
name: "Course C2",
type: "elearning"
}
]
emitter: 'courseListId'
} training_material_loaded
-
{
emitter: 'courseListId-internal-course-player'
}The course player in the emitter value will report as
internal-course-player
if the widget contains the player, otherwise it will returnexternal-course-player
.
Command Flow
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 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.