Embedded learning launcher

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.

Docebo embedded learning is essentially an abstraction of the Docebo platform, allowing you to use the power of the core platform and inject training material delivery within the software environments your learners are in, allowing them to get the contextual knowledge they need, when and where they need it.

This is achieved via building blocks and the launcher:

• Building blocks provides the integrator the opportunity to place Docebo widgets directly into your web environment, seamlessly integrating the power of Docebo directly and transparently into your web application. For more information, please see Embedded learning building blocks in the Docebo Developer Portal (opens in a new tab).
• The launcher, described in this article, places an icon on your screen which, when pressed, shows a pop-up a non-intrusive window displaying widgets giving learners the chance to view the courses they need to do their work.

Benefits of using embedded learning

As embedded learning integrates the functionality of the Docebo Platform directly into your web app it allows learners to boost their productivity by remaining focused on the task at hand. They never need to switch between browser tabs or pages to get the information they require, embedded learning delivers it to them right where they are. This allows the learner to immediately put into practice what they are learning in real-time and improves subject matter retention.

Integrating embedded learning

For more information on how to integrate embedded learning, please see the various options available to you:

• Embedded learning building blocks
  Building blocks (opens in a new tab) allow you to start single widgets presenting the content of your Docebo platform as part of the layout composition of any external web page.
• Embedded learning launcher
  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. For more information please see the chapter Creating a launcher.
• Embedded learning mobile SDK
  The Docebo embedded learning mobile SDK (opens in a new tab) allows you to integrate an instance of your Docebo platform in your iOS, Android or React Native mobile application.
• Embedded learning for React Web applications
  If you are integrating embedded learning into a React web application, you can find some helpful information and code examples in the article Embedded learning for React web applications (opens in a new tab).

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 Navigation menu > Configuration (spanner icon) > Additional packages > Embedded learning.

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.

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 the developer portal article on Configuring your site content security policy for embedded learning (opens in a new tab).

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 launcher depending on its current state. However, you can still force the 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.

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 logo, but you can upload a different one by selecting the Custom option in the Logo area.

The available icon sizes are:

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

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:

Embedded learning and reports

There are filters available in the Users - Courses and Courses - Users reports showing various usage statistics.

Courses - Users Report

Users - Courses Report

Supported training material

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

Only E-Learning courses are supported.

• Video
  • Imported Video
  • YouTube
  • Vimeo
  • Wistia

    Please note: Your Wistia administrator needs to add the domain where embedded learning is being embedded to the allow list in Wistia to ensure that the video can be properly viewed by your learners. Not adding the domain to the allow list can result in the following error being displayed in the widget:

    

• SCORM
• TinCan (xAPI)
• AICC
• HTML
• Slides Converter
• Survey
• Test
• Central Repository
• Observation Checklist
• Google Drive

  Please Note: Docebo recommends viewing Google Drive training materials in full-screen mode.

• LTI
• Elucidat

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.