One of the first challenges we had to solve for the organization was handling "Read and Sign" protocols, standard procedures that employees are required to read and acknowledge.
In their old learning system, the process was as basic as it gets: upload a Word or PDF document, have employees look at it, and sign off. But with the transition to Docebo, the organization demanded a higher standard. It was crucial for them that everything spoke the same design language, fully branded and precise.
And honestly, I completely understood them. Simply uploading a PDF doesn't deliver a true Learning Management System experience; it feels more like an outdated Knowledge Management drive.
I remembered how in the past, at Playtika, we solved similar issues using Articulate Rise. It looked great, but every minor typo correction required us to re-export and re-upload the entire package. When we worked with external vendors on some of these materials, it became even more complex and generated additional costs for every little change.
This time, I wanted to find a solution that was organically better for the system. That’s how I discovered the Custom CSS for HTML Training Material.
This is a profoundly powerful tool. Used correctly, it creates a unified look and feel across all system content and reduces days of work into mere minutes. Combine this with AI to generate the HTML code, and this feature turns into an absolute content-creation monster.
While we initially created something very minimal and clean for the "Read and Sign" documents, I immediately realized we could take it to the next level (which is what I’m sharing with you today). You can essentially create an interactive, beautifully designed, mobile-responsive page that, with a few tweaks, can completely replace a Rise file.
One important caveat for Admins: The tracking and reporting here are basic. The moment an employee opens the HTML page, the system marks it as Complete. However, the maintenance and design benefits are so significant that if you absolutely need to validate the learning process, you can simply add a short Quiz immediately following the page.
Speaking of complexity, it's important to put things in perspective: HTML isn't meant to replace everything. When it comes to more complex development, featuring advanced interactions, branching scenarios, or high-resolution tracking of every learner click, that’s where Docebo Create comes into play. The correct architecture is knowing when to use which tool: fast, branded HTML templates for procedures, updates, and "Read and Sign," and Docebo Create for deep-dive interactive courses.
The potential for scaling is huge. I even considered handing these HTML templates directly over to the Subject Matter Experts (SMEs) in the organization so they could create beautiful content quickly and independently, and I assume that’s exactly what they are doing at Mobileye these days.
I also recorded a short video demonstrating exactly how to do this step-by-step. I've enabled automatic English audio translation on YouTube, so you can watch and listen in English!
The Toolkit
Here are the actual templates and the prompt I use to generate these pages. Feel free to copy them directly.
1. Docebo Custom Page Template (HTML)
<!-- ============================================================
DOCEBO CUSTOM PAGE TEMPLATE
This entire block goes inside the Docebo page HTML editor.
Everything between <!-- and --> is a comment — Docebo will
ignore it completely. It is only here to guide you.
============================================================ -->
<div class="dcbo-custom-page">
<!-- ────────────────────────────────────────────────────────────
HERO HEADER
This is the main page header.
Replace [Main Title Here] with your page title.
Replace [Extra text here] with a short subtitle or
one-line description of what this page is about.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-hero">
<h1>[Main Title Here]</h1>
<p>[Extra text here]</p>
</div>
<!-- ────────────────────────────────────────────────────────────
INFO BOX ("What's in it for me?")
This is a highlighted text box. Use it to list what
learners will gain from this page/lesson.
You can COPY this entire <div class="dcbo-wiifm">
block and paste it again below if you need a second
info box.
- Replace [Box Title Here] with a title like
"What you will learn".
- Each <li> is one bullet point. Add or remove <li>
lines to change the number of items.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-wiifm">
<h3>[Box Title Here]</h3>
<ul>
<li>[Object 1 text]</li>
<li>[Object 2 text]</li>
<li>[Object 3 text]</li>
<!-- To add another bullet, copy one <li> line above
and paste it here, then change the text. -->
</ul>
</div>
<!-- ────────────────────────────────────────────────────────────
VIDEO SECTION
This embeds a YouTube video directly on the page.
BEFORE THIS WORKS you must allow iframes in Docebo:
Admin > Pages > Settings > turn on "Allow iframes".
How to get the YouTube video ID:
Open the video on YouTube. The URL looks like:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
The ID is the part after "v=" → dQw4w9WgXcQ
Paste that ID in place of [PUT_YOUTUBE_ID_HERE].
── To add a SECOND video ──────────────────────────
Copy everything from the line that says
<h2>[Video Section Title]</h2>
all the way down to the CLOSING comment below
that says "END OF VIDEO BLOCK"
and paste it again right after that comment.
──────────────────────────────────────────────────────────── -->
<h2>[Video Section Title]</h2>
<div class="dcbo-video-wrapper">
<div class="dcbo-video-container">
<iframe
src="https://www.youtube.com/embed/[PUT_YOUTUBE_ID_HERE]"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<!-- END OF VIDEO BLOCK — duplicate from <h2> above to here
if you want to add another video. -->
<div class="dcbo-content">
<!-- ────────────────────────────────────────────────────────────
INTERACTIVE CARDS (flip/hover cards)
These are clickable tiles arranged in a grid.
When a learner hovers over a card, the hidden
text is revealed behind the title.
- Replace [Cube N Title] with a short label
(shown all the time).
- Replace [Hidden text for Cube N] with the text
that appears on hover.
To add more cards, copy one entire
<div class="dcbo-card"> … </div> block and
paste it before the closing </div> of the grid.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-grid">
<div class="dcbo-card">
<h4>[Cube 1 Title]</h4>
<p>[Hidden text for Cube 1]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 2 Title]</h4>
<p>[Hidden text for Cube 2]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 3 Title]</h4>
<p>[Hidden text for Cube 3]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 4 Title]</h4>
<p>[Hidden text for Cube 4]</p>
</div>
<!-- Paste additional dcbo-card blocks here -->
</div>
<!-- ────────────────────────────────────────────────────────────
CALLOUT / HIGHLIGHT BOX
Use this to draw attention to one key idea,
a tip, a warning, or an important fact.
Replace [Highlight Title] and [Highlight Text].
The word "dcbo-info" gives it a blue/info style.
You can change it to dcbo-warning or dcbo-success
if those styles exist in your CSS.
──────────────────────────────────────────────────────────── -->
<blockquote class="dcbo-callout dcbo-info">
<strong>[Highlight Title]:</strong> [Highlight Text]
</blockquote>
<!-- ────────────────────────────────────────────────────────────
COMPARISON TABLE
Use this to compare two (or more) things side
by side — for example two tools, two approaches,
or two time periods.
Structure:
• <thead> holds the header row (column titles).
• <tbody> holds all the data rows.
To add a new COLUMN:
In <thead>, add another <th>[Column Name]</th>
In every <tr> inside <tbody>, add another
<td>[value]</td> in the same position.
To add a new ROW:
Copy one <tr>…</tr> block inside <tbody>
and paste it below, then change the text.
──────────────────────────────────────────────────────────── -->
<h2>[Table Title]</h2>
<div class="dcbo-table-wrapper">
<table class="dcbo-compare">
<thead>
<tr>
<th>[Column 1]</th>
<th>[Column 2]</th>
<!-- Add more <th> here for extra columns -->
</tr>
</thead>
<tbody>
<tr>
<td>[Row 1 - Column 1]</td>
<td>[Row 1 - Column 2]</td>
</tr>
<tr>
<td>[Row 2 - Column 1]</td>
<td>[Row 2 - Column 2]</td>
</tr>
<!-- Copy a <tr>…</tr> block above to add more rows -->
</tbody>
</table>
</div>
<!-- ────────────────────────────────────────────────────────────
LESSON SUMMARY
This is the closing section of the page.
Use it to recap the main takeaways.
- Replace [Summary Title] (e.g. "Key Takeaways").
- Replace [Summary explanation text] with one or
two wrap-up sentences.
- Each <li> is one key point. The <strong> tag
makes the label bold.
Add or remove <li> lines as needed.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-summary">
<h2>[Summary Title]</h2>
<p>[Summary explanation text]</p>
<ul>
<li><strong>[Key Point 1]:</strong> [Text]</li>
<li><strong>[Key Point 2]:</strong> [Text]</li>
<!-- Add more <li> lines here for extra key points -->
</ul>
</div>
</div><!-- end dcbo-content -->
</div><!-- end dcbo-custom-page -->
2. Docebo Bulletproof CSS v3.2
/* =========================================
Docebo BULLETPROOF CSS v3.2
(Full Layout + Neon Video Glow)
========================================= */
.dcbo-custom-page {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333333;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 20px;
direction: ltr;
}
/* Hero Section */
.dcbo-hero {
background-color: #0056D2;
color: #ffffff;
padding: 40px 30px;
border-radius: 12px;
text-align: center;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.dcbo-hero h1 {
margin: 0 0 10px 0;
font-size: 32px;
color: #ffffff;
font-weight: bold;
}
.dcbo-hero p { margin: 0; font-size: 18px; opacity: 0.9; }
/* WIIFM Section */
.dcbo-wiifm {
background-color: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 40px;
}
.dcbo-wiifm h3 { color: #0056D2; margin-top: 0; font-size: 18px; margin-bottom: 12px; }
.dcbo-wiifm ul { list-style: none; padding: 0; margin: 0; }
.dcbo-wiifm li { padding-left: 28px; position: relative; margin-bottom: 10px; font-size: 15px; }
.dcbo-wiifm li::before { content: "🎯"; position: absolute; left: 0; top: 0; }
/* --- NEON VIDEO CONTAINER --- */
.dcbo-video-wrapper {
margin: 40px 0;
text-align: center;
}
.dcbo-video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Ratio */
height: 0;
overflow: hidden;
border-radius: 15px;
border: 3px solid #0056D2;
box-shadow: 0 0 20px rgba(0, 86, 210, 0.7),
0 0 40px rgba(0, 86, 210, 0.3),
inset 0 0 15px rgba(0, 86, 210, 0.4);
background: #000;
}
.dcbo-video-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
/* Headings */
.dcbo-custom-page h2 {
color: #0056D2;
border-bottom: 2px solid #EBF3FF;
padding-bottom: 10px;
margin-top: 40px;
font-size: 24px;
}
/* 2x2 Grid Layout */
.dcbo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.dcbo-card {
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 8px;
padding: 25px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: all 0.3s ease;
min-height: 140px;
}
.dcbo-card h4 { color: #0056D2; margin: 0; font-size: 19px; transition: transform 0.4s ease; }
.dcbo-card p { opacity: 0; max-height: 0; visibility: hidden; transition: all 0.5s ease; margin: 0; }
.dcbo-card:hover { background-color: #FAFCFF; box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.dcbo-card:hover h4 { transform: translateY(-5px); }
.dcbo-card:hover p { opacity: 1; visibility: visible; max-height: 300px; margin-top: 10px; }
/* Table */
.dcbo-table-wrapper { overflow-x: auto; margin: 30px 0; border-radius: 8px; border: 1px solid #E0E0E0; }
.dcbo-compare { width: 100%; border-collapse: collapse; text-align: left; background: #ffffff; }
.dcbo-compare th, .dcbo-compare td { padding: 16px; border-bottom: 1px solid #E0E0E0; }
.dcbo-compare th { background-color: #EBF3FF; color: #0056D2; font-weight: bold; }
/* Callouts */
.dcbo-callout { padding: 20px; border-left: 5px solid; border-radius: 8px; margin: 25px 0; }
.dcbo-info { background-color: #E8F4FD; border-color: #2196F3; }
/* Summary */
.dcbo-summary { background-color: #0056D2; color: #ffffff; border-radius: 12px; padding: 30px; margin-top: 50px; }
.dcbo-summary h2 { color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 15px; margin-top: 0; }
.dcbo-summary ul { list-style: none; padding: 0; margin: 20px 0 0 0; }
.dcbo-summary li { position: relative; padding-left: 35px; margin-bottom: 15px; }
.dcbo-summary li::before { content: "✅"; position: absolute; left: 0; top: 0; }
@media screen and (max-width: 768px) {
.dcbo-grid { grid-template-columns: 1fr; }
}
3. The Content Generation Prompt
**Role & Context**
You are an Expert Instructional Designer and Docebo LMS Specialist. Your goal is to transform raw content (YouTube videos, text, PDFs, or Word documents) into a highly engaging, methodologically sound, and visually structured e-learning unit.
**The Task**
I will provide you with raw content and an HTML template designed specifically for Docebo. You must analyze the content, extract the key learning objectives, and structure a micro-learning unit using ONLY the provided HTML template.
**Instructional Design Methodology**
When analyzing the content and writing the copy, follow these principles:
1. **Hook & Relevance:** Start with a compelling title and a clear "What's In It For Me?" (WIIFM) section so learners know exactly what they will gain.
2. **Cognitive Load Theory:** Chunk the information logically. Avoid walls of text. Use concise bullet points, tables for comparison, and interactive cards for digestible concepts.
3. **Active Learning:** Structure the content to encourage reflection. If applicable, highlight key takeaways, surprising facts, or crucial warnings using callout boxes.
4. **Clear Synthesis:** Always end with a strong summary that recaps the core concepts.
**HTML Implementation Rules (Strict)**
You must use the provided Docebo Custom Page HTML template. DO NOT invent new CSS classes or break the HTML structure. You may duplicate existing blocks (like cards, table rows, or list items) as needed.
* `<div class="dcbo-hero">`: Use for the main title and a one-sentence engaging subtitle.
* `<div class="dcbo-wiifm">`: Use to list 3-5 clear learning objectives or benefits.
* `<h2>` and `<div class="dcbo-video-wrapper">`: Use if a video link is provided or if video embedding is relevant. (Extract the YouTube ID correctly).
* `<div class="dcbo-grid">` & `<div class="dcbo-card">`: Use these flip/hover cards for terminology, steps in a process, or distinct concepts. Ensure the title is short and the hidden text is explanatory.
* `<blockquote class="dcbo-callout dcbo-info">`: Use for a "Pro Tip", "Did you know?", or an important emphasis.
* `<table class="dcbo-compare">`: Use if the content contains comparisons, pros/cons, or structured data categories.
* `<div class="dcbo-summary">`: Use for the final recap.
* **Language & Formatting:** Write the content in English. DO NOT use emojis anywhere in the generated output.
**Input Workflow**
1. I will provide the raw content.
2. (Optional) I will provide the Docebo HTML template (if you don't already have it in context).
3. You will output ONLY the final HTML code, fully populated with the instructional content, ready to be copy-pasted into the Docebo HTML editor.
**Are you ready? Please confirm you understand these instructions, and I will provide the first piece of content.**