Embedded learning building blocks – Docebo Help & Support

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 launcher 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 or it is embedded as a widget within the page. 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.

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

Docebo embedded learning 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 embedded learning 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.

Activating embedded learning

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

Integrating building blocks in your web site

The integration process for building blocks is similar to the process used for the embedded learning launcher, which entails the loading of the kernel source, the positioning of the widget HTML tag in the page and the start of a JavaScript command with the the value of the platform domain and a valid access token.

Loading the kernel

In order for building blocks to be able to load in your page, you will need to add the kernel. To do so, place the following script anywhere inside the <HEAD></HEAD> section of your web page.

<script type="text/javascript" src="https://cdn1.dcbstatic.com/flow/kernels/SDKKernel-v1-latest.bundle.min.js">

Authenticating the kernel

After the kernel is loaded the user needs to be authenticated. This is accomplished by the use of simple JavaScript commands that will initialize the kernel and populate the widget based on the user’s training consumption.

Place the code shown here in your page, replacing the URL https://myplatform.com with the URL of your platform, anywhere after the script loading the kernel.

<script type="text/javascript">
  function renewToken() {
    // get the token from the backend
  }
  DSDK.kernel().setTokenProvider(renewToken);
  DSDK.kernel().start({ 
    domain: "https://myplatform.com", 
    token: "insert here your access token (optional)", 
    language: "your preferred language code"}
  );
</script>

The start() command contains the following items:

domain (string, required): The main or custom domain of the Docebo platform.
token (string, optional): The access token obtained by the backend-to-backend authentication. If this token is not provided, the registered provider function will be automatically invoked to get a new token.
language (string, optional): The display language used by the building blocks widgets. For more information please see the article containing the list of all supported languages with their browser and ISO codes. If this value is not provided, English (US) will be used as a default language.

Please note: An older version of this command, which does not have the ability to set the language parameter, can also be used to start the kernel. Docebo strongly advises you to update your code to use the new command to start the kernel. The instructions for the old command are as follows:

start(domain, [token])
This command starts the kernel. This command uses the following parameters:

domain (string, required)

The domain of the Docebo platform (this can be also a custom domain)

token (string, optional)

The access token to perform authenticated calls to the Docebo platform

Example:
<script type="text/javascript">
  function renewToken() {
    // get the token from the backend
  }
  DSDK.kernel().setTokenProvider(renewToken);
  DSDK.kernel().start("myplatform.com", "token");
</script>

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 building blocks. For more information please see Configuring your site content security policy for embedded learning.

Adding widgets to your web page

Adding widgets to your web page is as simple as adding a pair of HTML tags (start and end tags). The building blocks kernel will then inject the widget into the code at the desired location.

The code to be injected should be in the following format:

<dcbo-widget-name
    id="ID NAME"
    attribute1=”value”
    attribute2=”value”
    …
>
</dcbo-widget-name>

Each widget has its own tag and specific attributes that can be specified. Please note that while the id attribute is technically optional, every widget should be given an ID in order to be able to interact with it using JavaScript commands.

Interacting with the widgets in your web page

As the widgets are displayed using JavaScript and <div> sections, you can easily interact with the widget in any manner you choose, using any event to issue commands to the widget. This can include, but is not limited to, window dimensions changing, a button being pressed, a timer expired, there is no limit to what you can use to trigger a command to send to the widget.

The following widgets are available for embedded learning Building Blocks:

Widget name	Description
Course player widget	Allows you to play content from the Docebo platform as if you were using the platform itself. As such, all statistics that would be produced when using the Docebo platform are also reproduced by using the widget, allowing the platform to keep track of the learners in the usual manner. For more information please see Embedded learning building blocks: Course player widget.
My courses and learning plans widget	Allows you to view and access the courses and learning plans of the Docebo platform where the learner has been enrolled as if they were using the platform itself. The widget can be filtered and customized showing the list of items needed to the final user when it's embedded on the integrator's interface by changing the value of the parameters used. For more information please see Embedded learning building blocks: My courses and learning plans widget.
Course list widget	Displays either a static or a dynamic list of courses in order to focus the learner's attention on selected training activities. For more information please see Embedded learning building blocks: Course list widget.
Single asset player widget	The Docebo single asset player widget allows you to play specific assets from the Docebo platform as if you were using the Docebo platform itself. As such, all statistics that would be produced when using the Docebo platform are also reproduced by using the widget, allowing the platform to keep track of the learners in the usual manner. For more information please see Embedded learning building blocks: Single asset player widget.

Docebo Help

How can we help?