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.
Embedded learning is available as a web-based application on desktop and mobile platforms.
The embedded learning 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 embedded learning and the embedded learning launcher in their respective knowledge base articles.
This article is a technical guide on how to customize the launcher using CSS Tokens in your web platform.
CSS tokens provide a way to easily alter the look and feel of the 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 Adding the embedded learning launcher to your web page for further information on adding this section to your page.
dcbo-flow-launcher {
}
The available CSS tokens for the 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);
}