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 or dynamic. This attribute changes the course list type and is required.

Type: string (static | dynamic)

coursesids

Valid and required if type is static. 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 is dynamic. If this value is set to TRUE 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 is dynamic. If this value is set to TRUE 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 is dynamic. If this value is set to TRUE 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 is dynamic. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is TRUE. 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 is dynamic. 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 is static. 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 return external-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 return external-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.