Skip to main content

Docebo Help

How can we help?

Docebo Flow Launcher

Last Updated
Docebo Module
Reading Time
User Level
  • Administrators

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.

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).

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, Conditions of Use and Options.

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.

In the Options tab you can set the visibility of Learning Plans and Courses for sale, granting the user the ability to view courses and learning plans available for purchase. When you enable the purchasing of learning plans and courses by activating the checkbox, you will be able to create a custom message to be displayed to learners. For more information about enabling the purchasing of learning plans and courses, please see Selling Courses Online with the E-Commerce App.

Please Note: 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.

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 App Launcher will therefore be positioned automatically on the page based on the available space of his container following the structure of your HTML code.

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 and 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.

App Launcher Configuration Options

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 and 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 correct HEX color code, but if you don’t have any specific graphics software, you can simply use this free website (link opens in a new tab).

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.

The following widgets are available for the Docebo Flow App Launcher:

Course Player
Allows learners to view courses in real-time as they navigate the external web page. For more information see Docebo Flow Launcher Course Player Widget.
My Courses and Learning Plans
Lists all the courses and the learning plans the learner is enrolled in. For more information please see Docebo Flow Launcher My Courses and Learning Plans widget.
List of Courses
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. For more information please see Docebo Flow Launcher List of Courses widget.

App Launcher Visibility Rules

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:

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

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

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:
  • 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.