Learn on the fly with pervasive learning
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 on desktop and on web apps. It is not available on native mobile apps.
Activating Docebo Flow
To activate Docebo Flow, reach out to Docebo via the Help Center, or by contacting the Customer Experience Team (if your plan includes this option).
Creating an App Launcher
Once Docebo Flow is activated, log in to your platform as the Superadmin and move to the Admin Menu by clicking on the gear icon in the top right corner. Find the Docebo Flow section and click on the Manage item.
From the Docebo Flow main page, you can create and manage App Launchers. A Docebo Flow App Launcher is a button displayed on the web page of an external platform used to activate an instance of your Docebo platform in a pop-up window.
In order to create a new App Launcher, click on the plus button in the top right corner. In the right panel, set a name and a description for the new App Launcher and click on Create and Edit to proceed.
You will be redirected to the App Launcher configuration area, which is divided into three tabs: General, App Builder and Conditions of Use.
In the General tab, you can edit the name and the description of the App Launcher, configure its visibility, and manage the implementation code needed to inject and manage events related to the App Launcher from within your web page.
When an App Launcher is created, its status is Unpublished so that you can work on the configuration before making it publicly available. Remember to change the status to Published in the publishing bar to make it accessible to users when the configuration is completed.
Configuring the App Launcher Visibility
In the General tab, use the Visibility area to configure who will see the App Launcher button.
Select the All Users option to make the App Launcher visible to all of the platform users. When this option is selected, the platform automatically calculates a Launcher ID for the JavaScript code. Inject the Launcher ID into the JavaScript code of your web page in order to display the App Launcher button. Select the Customize Launcher ID option to configure a different Launcher ID, if needed. This is the only option available when the Extended Enterprise app is not active on your platform.
If the Extended Enterprise app is active in your platform, you can customize the App Launcher visibility by selecting which domains it will be visible on. This option allows you to create different App Launchers and assign them to different domains. This option does not require you to inject the Docebo Flow JavaScript code into your web page, and the system will automatically select the App Launcher associated to the domain assigned to the authenticated user.
Injecting the App Launcher in Your Web Page
In the Implementation Code area, you will find examples of the tag script for the JavaScript code you need to inject into the back-end code of your web page. For further details, refer to the Knowledge Base article on how to embed the Docebo Flow code into your web page.
Configuring the Layout of the App Launcher
The App Launcher Builder tab allows you to set a title and a description for the App Launcher. These details will be displayed at the top of the home screen of the App Launcher and will be visible for learners, while the title and the description set in the General tab are used for the App Launcher identification in the Docebo Flow administration area.
You can customize the App Launcher layout according to the following options:
Position
Preset Position
By default, the App Launcher is located in the bottom right corner of the external web page but you can customize its position with the options available in the Position section. Select one of the available preset options (bottom right corner, bottom left corner, top right corner, top left corner) and configure the alignment and the padding. These values are expressed in pixels.
Custom Position
You have the option to bind the App Launcher to a specific element in your web page (such as a link or a string) so that the App Launcher pop-up will be displayed when the user interacts with it.
The element used as a position reference and the element used as a button to open and close the PopUp Launcher can but do not have to be the same ones. In the latter case, for example, you would have the possibility to open or close the launcher from a button in a menu and see it opening in an element on the opposite side of the page.
The toggle code must always be used, whether the button and the position reference are the same or not.
To do so, select the Custom option and specify the ID of the HTML element (such as div, button, span, etc.) of the external web page that is close to the area where you want to display the App Launcher pop-up. If the HTML element you have identified does not have an ID, create one for that element.
Add the following code after the JavaScript section you have injected during the previous
integration steps (in the Implementation Code area):
document.getElementById("my-cta-button")
.addEventListener(“click”, event => {
// event.preventDefault();
DFlow.launcher().togglePopup();
});
After document.getElementById, replace my-cta-button with the ID of the HTML element you have identified to open and close the launcher.
The togglePopup() is a commodity method that opens/closes the App Launcher depending on its current state. However, you can still force the App Launcher to open or close by invoking the open() and close() methods, rather than toggling its status. See the Knowledge Base article containing the commands for the Launcher for more details.
As an option, you can activate the App Launcher for any event of interest rather than just waiting for a user’s click. Even in this scenario, the App Launcher will be displayed close to the HTML element you have identified.
Please note that when the App Launcher activates from a custom position, the App Launcher button will not be shown; rather the first event will start automatically when the item tagged with the proper ID is clicked.
When the App Launcher is started through a custom ID, it will be made available with a Drag&Drop capability so that users can move the App Launcher pop-up according to their needs.
The launcher’s draggable header bar can be hidden within the Launcher Builder Interface by activating the checkbox titled Hide Draggable Top Bar. Doing so disables the drag and drop feature of the Launcher and causes the launcher to open in and follow the location of the parent element on the page. If the page dimensions are changed and, as an example, the parent element stretches, then the launcher will shift based on the parent element’s coordinates.
Icon Style
The App Launcher button can either be squared or rounded, it has a background color, a size, and shows a logo. Configure these options in the Icon Style section.
The default logo is the Docebo Flow logo, but you can upload a different one by selecting the Custom option in the Logo area.
The available icon sizes are:
- Small - 24px diameter for rounded icons, 24x24px for squared icons
- Large - 32px diameter for rounded icons, 32x32px for squared icons
App Launcher Style
Move to the App Launcher Style section to configure the App Launcher pop-up look & feel by setting its background color, the primary and secondary text colors, and the accent color. Enter the HEX codes into the corresponding text boxes, or select colors using the color wheels. There are different ways to get the right HEX color, but if you don’t have any specific graphic software, you can simply use this free website.
Adding Widgets to the App Launcher Home Screen
As it happens for the pages of your platform, you can compose the layout of the App Launcher home screen with widgets. The preview of the App Launcher home screen is available on the right side of the App Launcher Builder tab. From here, you can add or remove widgets from the home screen and edit their configuration.
In order to add a new widget, click on the plus button in the preview box. In the Add New Widget slideout panel, select the widget and click on Next to start its configuration according to the options listed in the following chapters.
At any time, you can edit or remove widgets by clicking on the ellipsis menu at the end of the widget name and by selecting the corresponding option.
Course Player
The Course Player widget allows learners to view courses in real-time as they navigate the external web page.
Select the course you want to display in the widget in the General field by starting typing its title and selecting it among the search results. As an option, you can enable the Autoplay option so that the course will start as soon as the App Launcher opens, without requiring manual input.
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.
My Courses and Learning Plans
The Courses and Learning Plans widget lists all the courses and the learning plans the learner is enrolled in.
Use the Item Type dropdown to select whether to show all the courses and learning plans, courses only, or learning plans only, and the Status dropdown to filter the view according to their status. When selecting Courses and Learning Plans or Courses, you can also take advantage of the hide the courses that are part of a learning plan option in the Details area to hide those elements from the list shown in the widget.
In the View section, set whether the courses available in the My Courses and Learning Plans area of the user platform will be displayed as cards (Ungrouped option), or if users will have to click on the widget title to access the list of courses and learning plans (Grouped option).
A search engine is also available for the user to search for courses or learning plans within the widget. Enable the Show Search Bar option to display the search bar on top of the widget.
Finally, set the name and the description of the widget in the Custom Styling section. These details will be displayed on top of the widget, in the App Launcher home screen.
List of Courses
The List of Courses widget displays either a static or a dynamic list of courses in the App Launcher home screen in order to focus the user's attention on selected training activities.
Static View
Select this option and choose up to five courses that will be listed in the widget. The courses will be visible to the page viewer if users have access to the course on the platform. There may also be situations where a course is visible to the learner in the list but not accessible (for example: the course is under maintenance or the maximum enrollment quota is reached). In those cases the learner will be redirected, within the launcher, to a page stating that the access to the course is denied.
Dynamic View
Select this option to make the platform artificial intelligence dynamically select the courses displayed in the widget, according to the rules of the platform Global Search engine.
When this option is selected, configure the widget to display courses, learning plans, and training material on the basis of the Global Search results for one keyword.
First, add the following code after the JavaScript section you have injected during the previous integration steps (in the Implementation Code area) to set the keyword that will be used by the widget to look for content.
DFlow.courseList().search(‘keyword’);
Set a title for the widget and move to the Filter Options area to configure how the content resulting from the Global Search will be filtered and displayed in the widget, so that learners will see only the content they are allowed to see.
Select All Courses not to apply any filter, or Other Courses to filter the search results in order to show:
- the courses and the learning plans the user is enrolled in
- the training material of the courses and learning plans the user is enrolled in
- the courses available in catalogs where the learner can self-enroll
Search result tabs can be enabled via the configuration options which will then be displayed in the app launcher as a drop-down menu. Please note that the drop down menu will only be visible if multiple tabs are enabled and there is data to populate those tabs returned by the search engine.
Finally, configure the maximum number of elements displayed in the widget, and customize the text that will be displayed in the widget when the search returns no results.
Widgets and App Launcher Visibility Rules
The widgets are displayed in the App Launcher home screen according to the following rules.
Course Player Widget
This widget is displayed in the App Launcher only if the authenticated user is entitled to see the course configured for the App Launcher. If, for example, the course enrollment policy is set so that only Superadmins can enroll users, or need to confirm the enrollment, and the user cannot self-enroll, the widget will not be displayed in the App Launcher home screen. If the course player widget is the only widget in the App Launcher, the App Launcher itself will not be displayed. If there are other widgets in the App Launcher, then only the other widgets will be displayed. If you want the course to be visible to all users, set the course enrollment policy as Free, and the Course Subscriptions as open. More details on the course enrollment policy.
Courses and Learning Plans Widget
If the authenticated user is not enrolled in any course or learning plan or has no filtered result, then the widget doesn’t return any Course and LP on the courses and learning plans filtered according to the selections made in the General section of the widget configuration, the widget will not be displayed in the App Launcher home screen. If the courses and learning plans widget is the only widget in the App Launcher, the App Launcher itself will not be displayed. If there are other widgets in the App Launcher, then only the other widgets will be displayed.
App Launcher
If the authenticated user has no visibility on any of the widgets configured in the App Launcher, the App Launcher button will not be displayed.
Managing the Docebo Flow Conditions of Use
As for any Docebo platform, you can set the visibility and the acceptance rules for the Privacy Policy and the Terms of Conditions regulating the use of the Docebo Flow App Launcher. To do so, move to the Conditions of Use tab in the App Launcher configuration area.
By default, the options in this tab inherit the platform configuration, but you can change them for every App Launcher. If you disable the acceptance of the Privacy Policy and/or of the Terms and Conditions, users will not be able to see them upon accessing the App Launcher for the first time, and the system will silently force the acceptance for all users.
As a Superadmin, remember that you need to add references to the App Launcher platforms in the Privacy Policy, visible to all users.
Docebo Flow and Audit Trail
If you are taking advantage of the Audit Trail functionality, you can activate the tracking of the following actions related to Docebo Flow in your Audit Trail reports:
| Audit Trail Event | Description |
|---|---|
| App Launcher has been created | Action logged when an App Launcher is created |
| App Launcher has been updated | Action logged when an App Launcher is updated |
| App Launcher status has been changed | Action logged when the status of an App Launcher is changed |
| App Launcher has been deleted | Action logged when an App Launcher is deleted |
Docebo Flow and New Reports
There are filters available in the Users - Courses and Courses - Users reports showing various usage statistics.
Courses - Users Report
| Report Filter | Description |
|---|---|
| Training Material Access from Flow | This filter shows the Number of Users enrolled in the course who accessed from the launcher |
| Training Material Access % from Flow | This filter shows the Number of Users enrolled in the course who accessed from the launcher |
Users - Courses Report
| Report Filter | Description |
|---|---|
| Training Material Access from Flow | This filter provides a yes or no answer showing if a user accessed the course from the launcher |
| % of Training Material from Flow | This filter shows the Percentage of the course that consumed from within the launcher |
| Time in Training Material from Flow | This filter shows the time of the session spent by the user in the launcher |
Important Notes
- When testing from a local webserver, always use HTTPS, in order to avoid issues when contacting Docebo endpoints. This is especially important when testing SCORM objects, in order to avoid issues with the SCORM provider server.
- Always use two different web browsers, for example Google Chrome and Firefox, when configuring the launcher as a Superadmin while also testing the launcher as a learner of any level. Using two different windows of the same browser may result in conflicts with some Docebo or third party cookies.
- 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.
- At this time only the following types of training material are supported:
- Only E-Learning courses are supported
- Video
- Imported Video
- Youtube
- Vimeo
- Please note that Wistia is not supported.
- Scorm
- TinCan (xAPI)
- AICC
- HTML
- Video
- Only E-Learning courses are supported
- The maximum number of courses able to be displayed in the static course list is 10.
- While you can create and configure as many launchers as you like, the maximum number you can publish is 50.