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.

The Docebo Flow Launcher allows you to open an instance of your Docebo platform in any external web platform, as long as you have access to its HTML and JavaScript code. Find out more on Docebo Flow and the Docebo Flow Launcher in their respective knowledge base articles.

This article is a technical guide on how to interact with the Docebo Flow Launcher using commands in your web platform.

Lifecycle commands

setTokenProvider(callback)

Provides the app launcher a function to invoke when the current access token expires. The provided function must return a Promise that resolves with the new access token.

This command uses the following parameter:

• callback (required): a function that provides a new access token

Example:

function renewToken(){
// an HTTP call to your backend-to-backend login process
}
DFlow.setTokenProvider(renewToken);

start({domain: {domain}, [launcher_code: {code}], [token: {token}], [language: {language code}])

This command starts the app launcher.

This command uses the following parameters:

• domain (string, required): The domain of the Docebo platform (this can be also a custom domain)
• launcherCode (string, optional): The unique code assigned to the app launcher (if any)
• token (string, optional): The access token to perform authenticated calls to the Docebo platform
• language (string, optional): The display language used by the launcher and all widgets contained within. For a list of available language codes, please see the List of Supported Languages article. By default the language of the Docebo Flow Launcher is set to English (US).

The command returns a promise that resolves when the app launcher has fully started and loaded. This makes the parent page to become aware of the status of the launcher which allows for the triggering of events based on that information.

The start command promise resolves only after the launcher is ready to be shown. This gives you the ability to use this feature to open the launcher automatically or, for example, perform searches behind the scenes prior to displaying the results.

Example:

DFlow.start({
  domain: "customer.docebosaas.com", 
  launcherCode: "Launcher123", 
  token: "access token", 
  language: "en"
});

By default when the app launcher is first started, it will display the icon only with the popup in a closed state (see the Interaction commands section; the default state after start() visually appears as if the commands show() and close() were issued together).

(In case of Custom Button usage the opening the logic remains the same but the Icon will not be shown)

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 launcher. Docebo strongly advises you to update your code to use the new command to start the launcher. The instructions for the old command are as follows:

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

• domain (string, required): The domain of the Docebo platform (this can be also a custom domain)
• code (string, optional): The unique code assigned to the app launcher (if any)
• token (string, optional): The access token to perform authenticated calls to the Docebo platform

Example:

DFlow.start(“customer.docebosaas.com”, “Launcher123”,”access_token”)
  .then(() => console.log(‘Launcher running’));

By default when the app launcher is first started, it will display the icon only with the popup in a closed state (see the Interaction commands section; the default state after start() visually appears as if the commands show() and close() were issued together).
(In case of Custom Button usage the opening the logic remains the same but the Icon will not be shown)

shutdown()

This command stops and removes the app launcher from the screen. Returns a promise that resolves when the app launcher has been terminated.

Example:

DFlow.shutdown()
.then(() => console.log(‘Launcher stopped’));

restart({domain: {domain}, [launcher_code: {code}], [token: {token}], [language: {language code}])

This command restarts the app launcher.

This command uses the following parameters:

• domain (string, required): The domain of the Docebo platform (this can be also a custom domain)
• launcherCode (string, optional): The unique code assigned to the app launcher (if any)
• token (string, optional): The access token to perform authenticated calls to the Docebo platform
• language (string, optional): The display language used by the launcher and all widgets contained within. For a list of available language codes, please see the List of Supported Languages article. By default the language of the Docebo Flow Launcher is set to English (US).

Returns a promise that resolves when the app launcher has fully started again.

Example:

DFlow.restart({
  domain: "customer.docebosaas.com", 
  launcherCode: "Launcher123", 
  token: "access token", 
  language: "en"
});

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

restart(domain, [code], [token])
This command restarts the app launcher.
This command uses the following parameters:

• domain (string, required): The domain of the Docebo platform (this can be also a custom domain)
• code (string, optional): The unique code assigned to the app launcher (if any)
• token (string, optional): The access token to perform authenticated calls to the Docebo platform

Example:

DFlow.restart("customer.docebosaas.com", "Launcher123","access_token") 
.then(() => console.log('Launcher successfully restarted'));

Interaction commands

show()

This command shows the app launcher icon and popup (if the popup is in a visible state - see open()).

Example:

DFlow.show();

hide()

This command hides the app launcher (both the icon and the popup).

Example:

DFlow.hide();

open()

This command opens the app launcher popup. If the app launcher has been hidden via the hide() command, then the popup will be visible when the show() command is invoked. This command has no effect on the app launcher icon.

Example:

DFlow.open();

close()

This command closes the app launcher popup. If the app launcher has been hidden via the hide() command, then the popup will not be visible when the show() command is invoked. This command has no effect on the app launcher icon.

Example:

DFlow.close();

togglePopup()

Opens the app launcher popup if it is closed and vice versa. If the app launcher has been hidden by the hide() command, then the effect will not be visible until the show() command is invoked.

Example:

DFlow.togglePopup();