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. It is not available on native mobile apps.
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 customize the Docebo Flow Launcher using CSS Tokens in your web platform.
CSS tokens provide a way to easily alter the look and feel of the Docebo Flow launcher. Simply use the provided tokens with the values of your choice in the CSS section of the page hosting your launcher and you can configure many different aspects of the launcher’s appearance to better suit the page hosting the launcher.
Using CSS Tokens
In the CSS section of your hosting page, you already have a section defined that you can add the CSS Tokens to. Please see Embedding Docebo Flow Into Your Web Page for further information on adding this section to your page.
dcbo-flow-launcher {
}
The available CSS tokens for the Docebo Flow launcher are described in further detail later in this article. The tokens all take the following form:
--dcb-flow-item-attribute:value;
For example, to edit the border radius of the launcher you would use the following token, shown in the appropriate section inside CSS:
dcbo-flow-launcher {
--dcb-flow-launcher-border-radius:3px;
}
This example would result in the launcher having rounded corners with a radius of 3px in each corner.
Available CSS Tokens
Change The Launcher Button’s Shadows
| Token |
--dcb-flow-launcher-button-shadow |
| Value Type |
4 px values, like "5px 2px 5px 5px" |
| Description | Defines the size of the shadow along the four edges of the launcher’s button, measured in pixels. The values are ordered by: top, right, bottom, left. |
| Example |
dcbo-flow-launcher {
|
Change The Launcher Button’s Hover Shadows
| Token |
--dcb-flow-launcher-button-shadow-hover |
| Value Type |
4 px values, like "5px 2px 5px 5px" |
| Description | Defines the size of the shadow along the four edges of the launcher’s button, measured in pixels when being hovered over. The values are ordered by: top, right, bottom, left. |
| Example |
dcbo-flow-launcher {
|
Change The Launcher Button’s Shadow Color
| Token |
--dcb-flow-launcher-button-shadow-color |
| Value Type |
rgba value, like "rgba(255,255,0,0.4)" |
| Description | Changes the color of the shadow surrounding the launcher’s button. The value can include an rgba value in order to control the alpha channel of the color to define its transparency. |
| Example |
dcbo-flow-launcher {
|
Change The Launcher’s Outer Corners’ Radius
| Token |
--dcb-flow-launcher-border-radius |
| Value Type |
px value
|
| Description | Changes the outer corners’ radius from 0 (square corners) to rounded |
| Example |
dcbo-flow-launcher { |
Change The Launcher’s Outer Shadows
| Token |
--dcb-flow-launcher-shadow
|
| Value Type |
4 px values, like "5px 2px 5px 5px"
|
| Description | Defines the size of the shadow along the four edges of the launcher, measured in pixels. The values are ordered by: top, right, bottom, left. |
| Example |
dcbo-flow-launcher {
|
Change The Launcher’s Outer Shadow Color
| Token |
--dcb-flow-launcher-shadow-color
|
| Value Type |
rgba value, like "rgba(255,0,0,0.3)"
|
| Description | Changes the color of the shadow surrounding the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency. |
| Example |
dcbo-flow-launcher {
|
Customize The Colors Of The Title Bar’s Icons
| Token |
--dcb-flow-custom-button-top-bar-icon-color |
| Value Type |
rgba value, like "rgba(255,0,0,0.3)" |
| Description | Customizes the color of the icons found in the title bar of the launcher. The default color value is: #666666 or rgb(104,104,104). |
| Example |
dcbo-flow-launcher {
|
Customize The Widget Separator Height
| Token |
--dcb-flow-launcher-widgets-separator-height |
| Value Type |
px value |
| Description | Changes the height of the separator between the widgets in the launcher. The default value is 12px. |
| Example |
dcbo-flow-launcher {
|
Customize The Launcher’s Border
| Token |
--dcb-flow-launcher-border |
| Value Type |
Shorthand for border items: px value, line type, |
| Description | Changes the launcher’s outer border thickness, line type and color. The default is 0. |
| Example |
dcbo-flow-launcher {
|
Change The Font Family
| Token |
--dcb-flow-ui-font-family |
| Value Type |
font family, like "serif" |
| Description | Specify the font family used. This value is consistent throughout the UI of the launcher and the widgets contained within. |
| Example |
dcbo-flow-launcher {
|
Change The Color Of Icons Intended For Dark Backgrounds
| Token |
--dcb-flow-ui-color-icon-negative |
| Value Type |
color values, such as "red", #FF0000 or rgba(255,0,0,0.5) |
| Description | Specify the color of all icons that are intended for a dark background. |
| Example |
dcbo-flow-launcher {
|
Change The Color Of Icons Intended For Light Backgrounds
| Token |
--dcb-flow-ui-color-icon-neutral |
| Value Type |
color values, such as "blue", #0000FF or rgba(0,0,255,0.5) |
| Description | Specify the color of all icons that are intended for a light or neutral background. |
| Example |
dcbo-flow-launcher {
|
Change The Color Of Hover Over Buttons With Light Hover Color
| Token |
--dcb-flow-ui-color-light-hover
|
| Value Type |
color values, such as "green", #00FF00 or rgba(0,255,0,0.5)
|
| Description | Specify a color for the hover state of buttons that have a light hover color, such as the enrollment button in the table of contents list. |
| Example |
dcbo-flow-launcher {
|
Change The Color Of Hover Over Buttons With Dark Hover Color
| Token |
--dcb-flow-ui-color-dark-hover |
| Value Type |
color values, such as "yellow", #FFFF00 or rgba(255,255,0,0.5) |
| Description | Specify a color for the hover state of buttons that have a dark hover color, such as the button in the Single Course Player preview. |
| Example |
dcbo-flow-launcher {
|
Change The Outer Corners’ Radius Of Status Labels Within The Launcher
| Token |
--dcb-flow-ui-border-radius
|
| Value Type |
px value
|
| Description | Changes the status labels for courses corners’ radius from 0 (square corners) to rounded. |
| Example |
dcbo-flow-launcher {
|
Change The Outer Corners’ Radius Of Training Material Lists Within The Launcher
| Token |
--dcb-flow-ui-border-radius-circular
|
| Value Type |
px value
|
| Description | Changes the training material lists’ corners’ radius from 0 (square corners) to rounded. |
| Example |
dcbo-flow-launcher {
|
Change The Background Of The Colored Buttons Within The Launcher
| Token |
--dcb-flow-ui-button-bg-color-primary |
| Value Type |
color values, such as "cyan", #00FFFF or rgba(0,255,255,0.5) |
| Description | Changes the background of the colored buttons of the launcher. |
| Example |
dcbo-flow-launcher {
|
Example CSS Section
Here you can find an example of all the previously described tokens inserted into the CSS portion of the hosting page. This example is provided only to show how all the tokens can be combined within the CSS portion of your page to affect changes in many aspects of the Launcher and its content:
dcbo-flow-launcher {
--dcb-flow-launcher-border-radius:3px;
--dcb-flow-launcher-shadow:0px 0px 1px 1px;
--dcb-flow-launcher-shadow-color:#878985;
--dcb-flow-ui-font-family:'Trebuchet MS', sans-serif;
--dcb-flow-ui-color-icon-negative: rgba(222,206,156);
--dcb-flow-ui-color-icon-neutral: #878985;
--dcb-flow-ui-color-light-hover: rgba(222,206,156,0.24);
--dcb-flow-ui-color-dark-hover: rgba(169,172,167,0.24);
--dcb-flow-ui-border-radius:3px;
--dcb-flow-ui-border-radius-circular:3px;
--dcb-flow-ui-button-bg-color-primary:rgba(0,0,0,0.24);
--dcb-flow-custom-button-top-bar-height:20px;
--dcb-flow-custom-button-top-bar-bg-color:rgba(169,172,167,0.24);
}