The following guide outlines how to deploy your own version of the Docebo Product widgets that are currently on the Docebo University home page. We’re taking this opportunity to share our knowledge as we’ll be moving away from this layout in the near future.
In this guide we’ll cover the following:
- How to implement the HTML and apply it to your own site.
- How to modify that HTML by using the supplied CSS
- How to use the inspect tool to identify the doc-widget-ID that is within your individual platform in order for the CSS to work within your platform.
This guide does not cover:
- Adjustments and Alterations
- The “why” within the HTML and CSS
Table of Contents
This guide assumes you have an understanding of the following:
- How to Create Custom Pages with Widgets
- How to Create an HTML Widget
- How to add CSS to your platform.
If you don’t already know how to do these I would suggest reviewing the following:
The Docebo University Product Widget
The image below shows (at the time of writing) the widget navigation within Docebo University which is created by using a custom HTML widget and custom CSS. It utilizes the flex-box property of CSS which is very versatile and responsive in both desktop and mobile applications.
Creating+the+HTML+Widget: ">
Creating the HTML Widget: The following HTML will need to be customized for your specific application. I have commented all the of the locations that you’ll need to adjust. I can only guarantee that this will work with the dimensions of images provided though the css properties used are very versatile so I would also suggest experimenting.
There are three main adjustments you’ll need to make within your platform:
- Update the images within the widgets
- Update the image alt text to whatever you’d like it to read.
- Update the urls for each individual widget box
Suggested Image Dimensions:
Learn Widget: 942x230
Other Widgets: 275x275
The+HTML+Code+(Generic+Versions+Located+at+the+End)">
The HTML Code (Generic Versions Located at the End)
<div class="doc-widget-2549-htmlcontainer"></div>
<div class="box">
<div class="grid">
<!-- Image and link for Docebo Learn LMS -->
<div class="grid-item grid-item-first-row">
<!-- Link for Docebo Learn LMS -->
<a href="https://university.docebo.com/pages/139/docebo-learn-lms">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/learn_product_square___no_shadow.png" alt="learn_product_square___no_shadow.png" />
</a>
</div>
<!-- Image and link for Docebo Flow -->
<div class="grid-item">
<!-- Link for Docebo Flow -->
<a href="https://university.docebo.com/pages/129/docebo_flow">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/flow_product_square___no_shadow.png" alt="flow_product_square___no_shadow.png" />
</a>
</div>
<!-- Image and link for Docebo Content -->
<div class="grid-item">
<!-- Link for Docebo Content -->
<a href="https://university.docebo.com/pages/158/docebocontent">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/content_product_square___no_shadow.png" alt="content_product_square___no_shadow.png" />
</a>
</div>
<!-- Image and link for Docebo Connect -->
<div class="grid-item">
<!-- Link for Docebo Connect -->
<a href="https://university.docebo.com/pages/128/docebo_connect">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/connect_product_square___no_shadow.png" alt="connect_product_square___no_shadow.png" />
</a>
</div>
<!-- Image and link for Docebo Learn Data -->
<div class="grid-item">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/dla_product_square___no_shadow.png" alt="Learning Analytics" />
</div>
<!-- Image and link for Docebo Learning Impact -->
<div class="grid-item">
<!-- Link for Docebo Learning Impact -->
<a href="https://university.docebo.com/pages/114/docebo-learning-impact">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/dli_product_square___no_shadow.png" alt="dli_product_square___no_shadow.png" />
</a>
</div>
<!-- Image and link for Docebo Shape -->
<div class="grid-item">
<!-- Link for Docebo Shape -->
<a href="https://university.docebo.com/pages/115/docebo-shape">
<!-- Image URL that needs to be replaced -->
<img class="productbox_image" src="https://cdn5.dcbstatic.com/files/d/o/docecademy_docebosaas_com/userfiles/19674/Quickfix%20Product%20Icons/shape_product_square___no_shadow.png" alt="shape_product_square___no_shadow.png" />
</a>
</div>
</div>
</div>
Implementing+the+CSS+Adjustments:">
Implementing the CSS Adjustments:
After you’ve added the HTML above to an HTML widget on a custom page you can copy and paste the CSS code below into your platform.
You will need to make one adjustment which is to replace the value #doc-widget-184 with the doc-widget ID from your platform. A video demonstrating how to find this is underneath the code below
/*. New DU Homepage 2023 Product Navigation */
/* .doc-widget-2549 is the widget ID of the HTML widget. This can be found by right clicking between the spaces of the boxes in the widget then clicking 'inspect' */
.doc-widget-2549-htmlcontainer * {
box-sizing: border-box;
}
.doc-widget-2549-htmlcontainer {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: auto;
height: auto;
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
justify-content: flex-end; /* Change this line */
flex-direction: column; /* Add this line */
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
width: 100%; /* Change this line */
height: auto;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
font-size: 16px;
font-weight: bold;
width: 100%; /* Add this line */
height: 100%; /* Add this line */
box-sizing: border-box;
border-radius: 20px;
}
.grid-item-first-row { /* New class for the first .grid-item */
grid-column: span 3;
}
img.productbox_image {
max-width: 100%;
height: auto;
max-height: 200px;
}
.learnbox { /* New class for the .learnbox image */
width: 100%;
height: 100%;
object-fit: cover;
}
/* This changes the color of the HTML widget wrapper and will justify content within the HTML wrapper. */
#doc-widget-2527 .htmlwidget.wrapper-shadow {
background-color: #f5f5f5;
box-shadow: none !important;
align-items: center;
justify-content: center;
}
/* remove background and box shadow on dashboard html widgets*/
#doc-widget-184 .htmlwidget.root.wrapper-shadow {
background: none !important;
box-shadow: none !important;
}
.doc-widget-2549-htmlcontainer {
align-items: center;
justify-content: center;
}
Using the Inspect Tool to Find Your HTML Widget ID
This video will walk you through how to use the inspect tool to find your Widget ID.
Generic+HTML+and+CSS: ">
Generic HTML and CSS:
This is the same html code but with the generic classes and URLs for the images and links you’re replacing. I would suggest using this within your platform. I’ve commented very location you’ll need to adjust and input obvious text for what needs to be replaced.
<div class="doc-widget-2549-htmlcontainer"></div>
<div class="box">
<div class="grid">
<!-- Image and link for Docebo Learn LMS -->
<div class="grid-item grid-item-first-row">
<!-- Link for Docebo Learn LMS -->
<a href=" The URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage1" src="tthe URL of the image you'd like to use for this widget]" alt="Learn Product" />
</a>
</div>
<!-- Image and link for Docebo Flow -->
<div class="grid-item">
<!-- Link for Docebo Flow -->
<a href="dThe URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage2" src=" the URL of the image you'd like to use for this widget]" alt="Flow Product" />
</a>
</div>
<!-- Image and link for Docebo Content -->
<div class="grid-item">
<!-- Link for Docebo Content -->
<a href="/The URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage3" src="&the URL of the image you'd like to use for this widget]" alt="Content Product" />
</a>
</div>
<!-- Image and link for Docebo Connect -->
<div class="grid-item">
<!-- Link for Docebo Connect -->
<a href="/The URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage4" src="&the URL of the image you'd like to use for this widget]" alt="Connect Product" />
</a>
</div>
<!-- Image and link for Docebo Learn Data -->
<div class="grid-item">
<!-- Link for Docebo Learn Data -->
<a href="bThe URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage5" src=";the URL of the image you'd like to use for this widget]" alt="Learn Data Product" />
</a>
</div>
<!-- Image and link for Docebo Learning Impact -->
<div class="grid-item">
<!-- Link for Docebo Learning Impact -->
<a href=" The URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage6" src="Lthe URL of the image you'd like to use for this widget]" alt="Learning Impact Product" />
</a>
</div>
<!-- Image and link for Docebo Shape -->
<div class="grid-item">
<!-- Link for Docebo Shape -->
<a href="cThe URL you'd like this icon to link to]">
<!-- Image URL that needs to be replaced -->
<img class="widgetimage7" src=" the URL of the image you'd like to use for this widget]" alt="Shape Product" />
</a>
</div>
</div>
</div>
/*. New DU Homepage 2023 Product Navigation */
/* .doc-widget-2549 is the widget ID of the HTML widget. This can be found by right clicking between the spaces of the boxes in the widget then clicking 'inspect' */
.doc-widget-2549-htmlcontainer * {
box-sizing: border-box;
}
.doc-widget-2549-htmlcontainer {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: auto;
height: auto;
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
justify-content: flex-end; /* Change this line */
flex-direction: column; /* Add this line */
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
width: 100%; /* Change this line */
height: auto;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
font-size: 16px;
font-weight: bold;
width: 100%; /* Add this line */
height: 100%; /* Add this line */
box-sizing: border-box;
border-radius: 20px;
}
.grid-item-first-row { /* New class for the first .grid-item */
grid-column: span 3;
}
img.productbox_image {
max-width: 100%;
height: auto;
max-height: 200px;
}
.widgetimage1 { /* New class for the .widgetimage1 image */
width: 100%;
height: 100%;
object-fit: cover;
}
/* This changes the color of the HTML widget wrapper and will justify content within the HTML wrapper. */
#doc-widget-2527 .htmlwidget.wrapper-shadow {
background-color: #f5f5f5;
box-shadow: none !important;
align-items: center;
justify-content: center;
}
/* remove background and box shadow on dashboard html widgets*/
/* Remember to replace the widget ID below*/
#your-doc-widget-id .htmlwidget.root.wrapper-shadow {
background: none !important;
box-shadow: none !important;
}
.doc-widget-2549-htmlcontainer {
align-items: center;
justify-content: center;
}
