Skip to main content

Docebo Help

How can we help?

Embedded learning launcher

Last updated
Docebo module
Reading time
User level
  • Administrators

Introduction

Embedded learning 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.

Embedded learning is available as a web-based application on desktop and mobile platforms.

Activating embedded learning

To activate embedded learning, reach out to Docebo via the Help Center, or by contacting your Account Manager (if your plan includes this option).

Creating a launcher

Once embedded learning is activated, log in to your platform as the Superadmin and move to the Admin Menu by pressing the gear icon in the top right corner. Find the Embedded Learning section and click on the Manage item.

From the embedded learning main page, you can create and manage launchers. An embedded learning 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 launcher, click on the plus button in the top right corner. In the right panel, set a name and a description for the new launcher and press Create and Edit to proceed.

You will be redirected to the 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 launcher, configure its visibility, and manage the implementation code needed to inject and manage events related to the 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 a 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 launcher visibility

In the General tab, use the Visibility area to configure who will see the launcher button.

Select the All Users option to make the 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 launcher visibility by selecting which domains it will be visible on. This option allows you to create different launchers and assign them to different domains. This option does not require you to inject the embedded learning JavaScript code into your web page, and the system will automatically select the launcher associated to the domain assigned to the authenticated user.

Injecting the 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 insert the embedded learning code into your web page.

Tip: Always use two different web browsers, for example Google Chrome and Mozilla 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 note:

  • While you can create and configure as many launchers as you like, the maximum number you can publish is 50.
  • When testing from a local web server, 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.
  • 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.

Configuring your site content security policy

If you are using content security policies on your hosting site, you will need to add rules to allow for the integration of the embedded learning launcher. For more information please see Configuring your site content security policy for embedded learning.

Configuring the layout of the launcher

The Launcher Builder tab allows you to set a title and a description for the launcher. These details will be displayed at the top of the home screen of the launcher and will be visible for learners, while the title and the description set in the General tab are used for the launcher identification in the embedded learning administration area.

You can customize the launcher layout according to the following options:

Position

Preset Position

By default, the 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 launcher to a specific element in your web page (such as a link or a string) so that the launcher pop-up will be displayed when the user interacts with it. The 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 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 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 launcher for any event of interest rather than just waiting for a user’s click. Even in this scenario, the launcher will be displayed close to the HTML element you have identified.

Please note: When the launcher activates from a custom position, the 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 launcher is started through a custom ID, it will be made available with a drag and drop capability so that users can move the 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 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

Launcher style

Move to the Launcher Style section to configure the 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 (opens in a new tab).

Adding widgets to the launcher home screen

As it happens for the pages of your platform, you can compose the layout of the launcher home screen with widgets. The preview of the App Launcher home screen is available on the right side of the 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 slide-out 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 embedded learning launcher:

Course Player
Allows learners to view courses in real-time as they navigate the external web page. For more information see Embedded learning 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 Embedded learning 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 Embedded learning launcher: Course list widget.
Please note: The maximum number of courses able to be displayed in the static course list is 10.

Launcher visibility rules

If the authenticated user has no visibility on any of the widgets configured in the launcher, the  Launcher button will not be displayed.

Managing the embedded learning 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 embedded learning launcher. To do so, move to the Conditions of Use tab in the launcher configuration area.

By default, the options in this tab inherit the platform configuration, but you can change them for every 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 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 launcher platforms in the Privacy Policy, visible to all users.

Embedded learning and Audit Trail

If you are taking advantage of the Audit Trail functionality, you can activate the tracking of the following actions related to Embedded learning 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

Embedded learning and 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 embedded learning
Training Material Access % from Flow
This filter shows the number of users enrolled in the course who accessed from embedded learning

Users - Courses Report

Training Material Access from Flow
This filter provides a yes or no answer showing if a user accessed the course from embedded learning
% of Training Material from Flow
This filter shows the percentage of the course that consumed from within embedded learning
Time in Training Material from Flow
This filter shows the time of the session spent by the user in embedded learning

Supported training material

At this time only the following types of training material are supported:

Only E-Learning courses are supported.

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