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.
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 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
The types of CSS tokens available are listed here for your reference. They have been separated into sections in order to make what you are looking for easier to find. These links will bring you to the appropriate section:
-
Launcher button tokens
Style the launcher button (for example, the shadow color of the button)
-
Launcher layout tokens
Customize the layout of the launcher (for example, corner radius, icons or title bar background color)
-
Background color tokens
Change items in the launcher background (for example, the background color of the layout placeholder)
-
Text color tokens
Alter text items in the launcher (for example, primary text or button text colors)
-
Primary color tokens
Change various primary color values (for example, the primary accent color or border separator color)
-
Secondary color tokens
Alter secondary color values (for example, the neutral button label color or the icon accent color)
-
Tertiary color tokens
Style tertiary color values (for example, the primary button label accent color)
-
Success color tokens
Customize success color values (for example, the background color of the success avatar)
-
Border color tokens
Change various border color values (for example, the neutral color of the border)
-
Alert color tokens
Style alert color values (for example, the background color of the alert badge)
-
Error color tokens
Change error color values (for example, the color of the error loading timer bar)
Launcher button tokens
The following tokens are available for styling the launcher button:
Token |
Description |
--dcb-flow-launcher-button-shadow
|
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.
Value type 4 px values, like 5px 2px 5px 5px
Default value
0px 1px 4px 0px
Example
dcbo-flow-launcher { --dcb-flow-launcher-button-shadow: 3px 3px 9px 2px; }
|
--dcb-flow-launcher-button-shadow-hover
|
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.
Value type 4 px values, like 5px 2px 5px 5px
Default value
0px 4px 8px 0px
Example
dcbo-flow-launcher { --dcb-flow-launcher-button-shadow-hover: 12px; }
|
--dcb-flow-launcher-button-shadow-color
|
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.
Value type
rgba value, like rgba(255,255,0,0.4)
Default value
rgba(0, 0, 0, 0.24)
Example
dcbo-flow-launcher { --dcb-flow-launcher-button-shadow-color: purple; }
|
Launcher Layout Tokens
The following tokens are available for styling the launcher layout:
Token |
Description |
--dcb-flow-launcher-border-radius
|
Changes the outer corners’ radius from 0 (square corners) to rounded.
Value type
px value
Default value
0.75rem
Example
dcbo-flow-launcher { --dcb-flow-launcher-border-radius: 3px; }
|
--dcb-flow-launcher-shadow
|
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.
Value type 4 px values, like 5px 2px 5px 5px
Default value
0 4px 8px 0
Example
dcbo-flow-launcher { --dcb-flow-launcher-shadow: 0px 0px 1px 1px; }
|
--dcb-flow-launcher-shadow-color
|
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.
Value type
rgba value, like rgba(255,0,0,0.3)
Default value
rgba(0, 0, 0, 0.24)
Example
dcbo-flow-launcher { --dcb-flow-launcher-shadow-color: #878985; }
|
--dcb-flow-custom-button-top-bar-bg-color
|
Changes the background color of the title bar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type
rgba value, like rgba(255,0,0,0.3)
Default value
rgba(245, 245, 245, 1)
Example
dcbo-flow-launcher { --dcb-flow-custom-button-top-bar-bg-color: rgba(222,206,156,0.3); }
|
--dcb-flow-custom-button-top-bar-icon-color
|
Customizes the color of the icons found in the title bar of the launcher.
Value type
rgba value, like rgba(255,0,0,0.3)
Default value
#666666 or rgb(104,104,104)
Example
dcbo-flow-launcher { --dcb-flow-custom-button-top-bar-icon-color: black; }
|
--dcb-flow-custom-button-top-bar-height
|
Changes the height of the custom button in the title bar of the launcher.
Value type
px value
Default value
36px
Example
dcbo-flow-launcher { --dcb-flow-custom-button-top-bar-height: 30px; }
|
--dcb-flow-launcher-widgets-separator-height
|
Changes the height of the separator between the widgets in the launcher.
Value type
px value
Default value
12px
Example
dcbo-flow-launcher { --dcb-flow-launcher-widgets-separator-height: 12px; }
|
--dcb-flow-launcher-border
|
Changes the launcher’s outer border thickness, line type and color.
Value type Shorthand for border items: px value, line type, rgba value, like rgba(255,0,0,0.3)
Default value
0
Example
dcbo-flow-launcher { --dcb-flow-launcher-border: 3px solid green; }
|
--dcb-flow-ui-font-family
|
Specify the font family used. This value is consistent throughout the UI of the launcher and the widgets contained within.
Value type font family, like serif
Default value
'Open Sans', sans-serif
Example
dcbo-flow-launcher { --dcb-flow-ui-font-family: 'Trebuchet MS', sans-serif; }
|
--dcb-flow-ui-color-icon-negative
|
Specify the color of all icons that are intended for a dark background.
Value type Color values, such as red , #FF0000 or rgba(255,0,0,0.5)
Default value
rgba(255, 255, 255, 1)
Example
dcbo-flow-launcher { --dcb-flow-ui-color-icon-negative: rgba(222,206,156,0.3); }
|
--dcb-flow-ui-color-icon-neutral
|
Specify the color of all icons that are intended for a light or neutral background.
Value type Color values, such as blue , #0000FF or rgba(0,0,255,0.5)
Example
dcbo-flow-launcher { --dcb-flow-ui-color-icon-neutral: rgba(98,106,236); }
|
--dcb-flow-ui-color-light-hover
|
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.
Value type Color values, such as green , #008000 or rgba(0,128,0,0.5)
Default value
rgba(255, 255, 255, 0.24)
Example
dcbo-flow-launcher { --dcb-flow-ui-color-light-hover: rgba(178,56,136); }
|
--dcb-flow-ui-color-dark-hover
|
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.
Value type Color values, such as yellow , #FFFF00 or rgba(255,255,0,0.5)
Default value
rgba(0, 0, 0, 0.08)
Example
dcbo-flow-launcher { --dcb-flow-ui-color-dark-hover: rgba(97,126,201); }
|
--dcb-flow-ui-border-radius
|
Changes the status labels for courses corners’ radius from 0 (square corners) to rounded.
Value type
px value
Default value
0.13rem
Example
dcbo-flow-launcher { --dcb-flow-ui-border-radius: 3px; }
|
--dcb-flow-ui-border-radius-circular
|
Changes the training material lists’ corners’ radius from 0 (square corners) to rounded.
Value type
px value
Default value
50%
Example
dcbo-flow-launcher { --dcb-flow-ui-border-radius-circular: 3px; }
|
Background Color Tokens
The following tokens are available for background color styling:
Token |
Description |
--ui-color-layout-background
|
This token changes the launcher's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type
rgba value, like rgba(160,32,240,0.4)
Example
dcbo-flow-launcher { --ui-color-layout-background: purple; }
|
--ui-color-layout-surface
|
This token changes the surface's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type
rgba value, like rgba(255,0,255,0.4)
Example
dcbo-flow-launcher { --ui-color-layout-surface: magenta; }
|
--ui-color-layout-placeholder
|
This token changes the placeholder's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type
rgba value, like rgba(0,255,0,0.4)
Example
dcbo-flow-launcher { --ui-color-layout-placeholder: green; }
|
--dcbo-flow-ui-button-bg-color-primary
|
Changes the background of the colored buttons of the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as lime , #00FF00 or rgba(0,255,0,0.5)
Default value
rgba(0, 135, 103, 1)
Example
dcbo-flow-launcher { --dcb-flow-ui-button-bg-color-primary: rgba(215,100,5,0.5); }
|
Text Color Tokens
The following tokens are available for text color styling:
Token |
Description |
--dcb-flow-ui-button-label-color-primary
|
Changes the label color of the colored buttons of the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as hotpink , #FFB6B4 or rgba(255,105,180,0.5)
Default value
rgba(255, 255, 255, 1)
Example
dcbo-flow-launcher { --dcb-flow-ui-button-label-color-primary: rgba(215,100,5,0.5); }
|
--ui-color-typography-primary
|
Changes the primary text's color used within the Launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as tomato , #FF6347 or rgba(255,99,71,0.5)
Example
dcbo-flow-launcher { --ui-color-typography-primary: rgba(215,100,5,0.5); }
|
--ui-color-typography-secondary
|
Changes the secondary text's color used within the Launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as papayawhip , #FFEFD5 or rgba(255,239,213,0.5)
Example
dcbo-flow-launcher { --ui-color-typography-secondary: rgba(215,100,5,0.5); }
|
Primary Color Tokens
The following tokens are available for primary color styling:
Token |
Description |
--ui-color-accent-primary
|
Changes the primary accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as violet , #EE82EE or rgba(238,130,238,0.5)
Example
dcbo-flow-launcher { --ui-color-accent-primary: rgba(215,100,5,0.5); }
|
--ui-color-avatar-background-accent
|
Changes the background accent color of the avatar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as lawngreen , #7CFC00 or rgba(124,252,0,0.5)
Example
dcbo-flow-launcher { --ui-color-avatar-background-accent: rgba(215,100,5,0.5); }
|
--ui-color-loading-accent
|
Changes the loading accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as mediumaquamarine , #66CDAA or rgba(102,205,170,0.5)
Example
dcbo-flow-launcher { --ui-color-loading-accent: rgba(215,100,5,0.5); }
|
--ui-color-icon-accent-primary
|
Changes the icon's primary accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as cornflowerblue , #6495ED or rgba(100,149,237,0.5)
Example
dcbo-flow-launcher { --ui-color-icon-accent-primary: rgba(215,100,5,0.5); }
|
--ui-color-border-accessibility-default
|
Changes the color of the ui separator. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as cornsilk , #FFF8DC or rgba(255,248,220,0.5)
Example
dcbo-flow-launcher { --ui-color-border-accessibility-default: rgba(215,100,5,0.5); }
|
--ui-color-button-border-tabs
|
Changes the color of the border of the tab buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as goldenrod , #DAA520 or rgba(218,165,32,0.5)
Example
dcbo-flow-launcher { --ui-color-button-border-tabs: rgba(215,100,5,0.5); }
|
--ui-color-border-accent-secondary
|
Changes the color of the secondary border accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as saddlebrown , #8B4513 or rgba(139,69,19,0.5)
Example
dcbo-flow-launcher { --ui-color-border-accent-secondary: rgba(215,100,5,0.5); }
|
--ui-color-typography-accent
|
Changes the color of the text accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as lavenderblush , #FFF0F5 or rgba(255,240,245,0.5)
Example
dcbo-flow-launcher { --ui-color-typography-accent: rgba(215,100,5,0.5); }
|
--ui-color-button-label-tabs
|
Changes the color of the tab button label. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as darkslategray , #2F4F4F or rgba(47,79,79,0.5)
Example
dcbo-flow-launcher { --ui-color-button-label-tabs: rgba(215,100,5,0.5); }
|
Secondary Color Tokens
The following tokens are available for secondary color styling:
Token |
Description |
--ui-color-icon-accent
|
Changes the color of the icon accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as seashell , #FFF5EE or rgba(255,245,238,0.5)
Example
dcbo-flow-launcher { --ui-color-icon-accent: rgba(215,100,5,0.5); }
|
--ui-color-button-label-neutral
|
Changes the color of the neutral button label. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as blanchedalmond , #FFEBCD or rgba(255,235,205,0.5)
Example
dcbo-flow-launcher { --ui-color-button-label-neutral: rgba(215,100,5,0.5); }
|
--ui-color-icon-neutral
|
Changes the color of the neutral icon. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as royalblue , #4169E1 or rgba(65,105,225,0.5)
Example
dcbo-flow-launcher { --ui-color-icon-neutral: rgba(215,100,5,0.5); }
|
Tertiary Color Tokens
The following tokens are available for tertiary color styling:
Token |
Description |
--ui-color-button-background-primary
|
Changes the background color of primary buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as turquoise , #40E0D0 or rgba(64,224,208,0.5)
Example
dcbo-flow-launcher { --ui-color-button-background-primary: rgba(215,100,5,0.5); }
|
--ui-color-button-label-accent
|
Changes the label accent color of primary buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as olive , #808000 or rgba(128,128,0,0.5)
Example
dcbo-flow-launcher { --ui-color-button-label-accent: rgba(215,100,5,0.5); }
|
Success Color Tokens
The following tokens are available for success items color styling:
Token |
Description |
--ui-color-badge-background-success
|
Changes the background color of the success badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as blueviolet , #8A2BE2 or rgba(138,43,226,0.5)
Example
dcbo-flow-launcher { --ui-color-badge-background-success: rgba(215,100,5,0.5); }
|
--ui-color-semantic-success
|
Changes the color of success label background. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as fuchsia , #FF00FF or rgba(255,0,255,0.5)
Example
dcbo-flow-launcher { --ui-color-semantic-success: rgba(215,100,5,0.5); }
|
--ui-color-choice-background-active
|
Changes the background color of the active choice. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as darkkhaki , #BDB76B or rgba(189,183,107,0.5)
Example
dcbo-flow-launcher { --ui-color-choice-background-active: rgba(215,100,5,0.5); }
|
--ui-color-avatar-background-success
|
Changes the background color of the success avatar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as moccasin , #FFE4B5 or rgba(255,228,181,0.5)
Example
dcbo-flow-launcher { --ui-color-avatar-background-success: rgba(215,100,5,0.5); }
|
--ui-color-charts-background-success
|
Changes the background color of the success chart. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as coral , #FF7F50 or rgba(255,127,80,0.5)
Example
dcbo-flow-launcher { --ui-color-charts-background-success: rgba(215,100,5,0.5); }
|
Border Color Tokens
The following tokens are available for border color styling:
Token |
Description |
--dcb-flow-launcher-widgets-separator-bg-color
|
Changes the background color of the launcher's widget seperator. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as firebrick , #B22222 or rgba(178,34,34,0.5)
Example
dcbo-flow-launcher { --dcb-flow-launcher-widgets-separator-bg-color: rgba(215,100,5,0.5); }
|
--ui-color-border-neutral
|
Changes the neutral color of the border. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as crimson , #DC143C or rgba(220,20,60,0.5)
Example
dcbo-flow-launcher { --ui-color-border-neutral: rgba(215,100,5,0.5); }
|
Alert Color Tokens
The following token is available for alert color styling:
Token |
Description |
--ui-color-badge-background-alert
|
Changes the background color of the alert badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as chartreuse , #7FFF00 or rgba(127,255,0,0.5)
Example
dcbo-flow-launcher { --ui-color-badge-background-alert: rgba(215,100,5,0.5); }
|
Error Color Tokens
The following tokens are available for error color styling:
Token |
Description |
--ui-color-button-label-error
|
Changes the color of the label on the error button. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as chocolate , #D2691E or rgba(210,105,30,0.5)
Example
dcbo-flow-launcher { --ui-color-button-label-error: rgba(215,100,5,0.5); }
|
--ui-color-typography-error
|
Changes the color of the error text. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as deeppink , #FF1493 or rgba(255,20,147,0.5)
Example
dcbo-flow-launcher { --ui-color-typography-error: rgba(215,100,5,0.5); }
|
--ui-color-badge-background-error
|
Changes the background color of the error badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as floralwhite , #FFFAF0 or rgba(255,250,240,0.5)
Example
dcbo-flow-launcher { --ui-color-badge-background-error: rgba(215,100,5,0.5); }
|
--ui-color-semantic-error-default
|
Changes the color of the default error text. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as gold , #FFD700 or rgba(255,215,0,0.5)
Example
dcbo-flow-launcher { --ui-color-semantic-error-default: rgba(215,100,5,0.5); }
|
--ui-color-icon-error
|
Changes the color of the error icon. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as lemonchiffon , #FFFACD or rgba(255,250,205,0.5)
Example
dcbo-flow-launcher { --ui-color-icon-error: rgba(215,100,5,0.5); }
|
--ui-color-loading-error
|
Changes the color of the error loading timer bar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as linen , #FAF0E6 or rgba(250,240,230,0.5)
Example
dcbo-flow-launcher { --ui-color-loading-error: rgba(215,100,5,0.5); }
|
--ui-color-border-error
|
Changes the border color of error messages. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as mediumspringgreen , #00FA9A or rgba(0,250,154,0.5)
Example
dcbo-flow-launcher { --ui-color-border-error: rgba(215,100,5,0.5); }
|
--ui-color-dialog-background-error
|
Changes the background color of error dialogs. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as oldlace , #FDF5E6 or rgba(253,245,230,0.5)
Example
dcbo-flow-launcher { --ui-color-dialog-background-error: rgba(215,100,5,0.5); }
|
--ui-color-charts-background-error
|
Changes the background color of error charts. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.
Value type Color values, such as orange , #FFA500 or rgba(255,165,0,0.5)
Example
dcbo-flow-launcher { --ui-color-charts-background-error: rgba(215,100,5,0.5); }
|
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);
}