This is an HTML template that I shared with one of the old “Global Success Digest” newsletters that we used to send. It would require some sort of HTML editor and some copy/paste to edit it, but it’s worked well for me in the past with clients.
I’ve seen clients use this to announce new initiatives in learning or events, engage with select groups/branches for a specific purpose, or also manage their platform related comms overall. Some tweaks to the HTML code can allow for more advanced things like embedded images or videos, but even some hyperlinks and formatting can go a long way.
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/f32776a1-8a14-4faa-8aaf-c7c4a95fc52f.png)
If you’d like to use this HTML for your your Newsletter, follow the steps below:
- In Docebo, navigate to Admin Menu > Newsletter
- In the Text area of the Newsletter page, select < > (Source Code)
- From this post, select Show Content (below)
- Using your cursor to select the text, highlight the entire code snippet in the expanded area
- Copy the text
- Navigate to the Newsletter in Docebo
- Paste the code snippet into the Source Code section
- Select Ok
- Preview the results and edit any text/images you’d like within the editor
Copy + Paste the Code Snippet Below!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,500,600,700);
body {margin: 0; padding: 0; min-width: 100%; font-family:'Open Sans', Arial; border-collapse:collapse; font-weight:400; border:none; font-size:14px; color:#65737F; line-height:22px;}
table tbody tr td {border-collapse:collapse !important; border-spacing:0px;}
td ul {margin-top:0px !important; margin-bottom:0px !important;}
@media only screen and (max-width: 570px) {
td {-webkit-text-size-adjust: none;}
.header {height:50px !important;}
.logo {width:95px !important; padding-top:0px !important;}
.btn {display:block !important; line-height:15px; padding: 12px 20px 12px 20px !important;}
.btn-inline {float: left !important; line-height:15px; padding: 12px 20px 12px 20px !important;}
.btn-table {width:100%;}
.body-padding {padding:26px 20px !important;}
.w100 {width: 100% !important; border-left:none; text-align:center;}
.Spacer {height:12px;}
.list-items {padding:0px 0px 0px 19px !important;}
.mob-title {padding-bottom:18px !important;}
.wrapper {width: 368px; padding: 0px 12px;}
.header-img {width: 100%;}
.inner-img {width: 304px;}
.markets {font-size:9px !important; letter-spacing:2px !important;}
.global-footer {padding: 0px 0px 12px 0px !important;}
.look-ahead {padding-top: 18px;}
.align-center {text-align:center !important;}
.col-stack {width:100% !important; border:none !important;}
.top-col {padding:25px !important;}
.bot-col {padding:15px 0px 33px 0px !important;}
.social {border-left: none !important; border-right: none !important; border-bottom:12px solid #ffffff; width: 100%; display: block;}
}
@media only screen and (max-width: 330px) {
.inner-img {width: 256px;}
.wrapper {width: 320px;}
.btn-inline {display:block !important; line-height:15px; padding: 12px 20px 12px 20px !important;}
}
</style>
<!-- IE STYLES -->
<!--Yif IE]>
<style type="text/css">
.logo {padding-top:0px;}
@media only screen and (max-width: 570px) {
.btn-block {width:100%;}
}
</style>
<!lendif]-->
<!-- OUTLOOK STYLES -->
<!--Yif gte mso 9]>
<style type="text/css">
body {margin: 0; padding: 0; font-family:arial; border-collapse:collapse; border:none; font-size:14px; line-height:22px;}
.w600 {width: 600px !important;}
.col-stack {width:49%}
.social {width:32% !important;padding: 14px 0px;}
.social img {padding-top:5px;}
.mso-social {background-color:#335782;}
.contact {width:24% !important;}
td ul {margin-top:0px !important; margin-bottom:0px !important;}
</style>
<!lendif]-->
</head>
<!-- BODY -->
<body bgcolor="#f5f5f5;" style="background-color:#f5f5f5;" class="rtl">
<div style="background-color:#f5f5f5; width:100%;">
<!--0if (gte mso 9)|(IE)]>
<table align="center" class="wrapper" width="100%" bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" class="wrapper" width="600" bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<! endif]-->
<!------------------------------ WRAPPER ------------------------------>
<table align="center" class="wrapper" width="600" bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" style="font-size:14px; line-height:22px; padding: 0px 12px;">
<tr>
<td>
<table width="100%" class="w600" align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;">
<!------------------------------ HEADER START ------------------------------>
<tr>
<td>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#f5f5f5" height="24" class="Spacer"></td>
</tr>
<tr>
<td bgcolor="#f5f5f5" height="12"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- logo -->
<td bgcolor="#ffffff" align="center" style="padding:20px 0px; border-bottom: 1px solid #e6e6e6;">
<img src="https://www.docebo.com/newsletter/dem_roi/docebo_logo.png" width="120" border="0" alt="Docebo" />
</td>
</tr>
</table>
</td>
</tr>
<!------------------------------ HEADER END ------------------------------>
<!-- SPACER START -->
<tr>
<td height="32" bgcolor="#f5f5f5" class="Spacer"></td>
</tr>
<!-- SPACER END -->
<!------------------------------ BLOCK WITH IMAGE START ------------------------------>
<tr>
<td>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ffffff">
<img class="header-img" width="600" src="https://i.ibb.co/8sF9PzQ/Global-Success-Digest.jpg" border="0" alt="Success_Digest" />
</td>
</tr>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ffffff" class="body-padding" style="padding:40px 40px; border-bottom: 1px solid #e6e6e6;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-bottom:20px; font-size:15px; font-family:'Open Sans', Arial;">Hi there!</td>
</tr>
<tr>
<td style="padding-bottom:20px; font-size:15px; font-family:'Open Sans', Arial;">This is a template for your <span style="font-size:15px; font-weight:700; color: #333333;">newsletter</span> within the <a href="docebo.com" style="color:#0465ac; text-decoration:underline; font-weight: 600;" target="_blank">Docebo platform</a>.</td>
</tr>
<tr>
<td style="padding-bottom:20px; font-size:15px; font-family:'Open Sans', Arial;">You can change the text and links to suit your needs, including the 1200x400px images in the header section.</td>
</tr>
<tr>
<td style="padding-bottom:20px; font-size:15px; font-family:'Open Sans', Arial;">I use a free program called Brackets (http://brackets.io/) to edit the HTML on a Mac, but any editor will work.</td>
</tr>
<tr>
<table class="btn-table" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="btn" bgcolor="#0465AC" style="text-align: center; padding: 10px 50px 10px 50px; -webkit-border-radius:2px; border-radius:2px; font-weight: 600; display: block; background-color:#0465AC;" align="center">
<a href="https://www.docebo.com/product-updates/" target="_blank" style="color: #ffffff; text-decoration: none; font-family:'Open Sans', Arial;">Call to Action</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!------------------------------ BLOCK WITH IMAGE END ------------------------------>
<!-- SPACER START -->
<tr>
<td height="32" bgcolor="#f5f5f5" class="Spacer"></td>
</tr>
<!-- SPACER END -->
<!------------------------------ BLOCK WITH IMAGE START ------------------------------>
<tr>
<td>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- 100% IMAGE 1200PX - to support retina -->
<td bgcolor="#ffffff">
<img class="header-img" width="600" height="220" src="https://i.ibb.co/kBSfQfY/Docebo-Product-Update.jpg" border="0" alt="Product Updates" />
</td>
</tr>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ffffff" class="body-padding" style="padding:40px 40px; border-bottom: 1px solid #e6e6e6;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="left" style="font-family:'Open Sans', Arial; font-size: 23px; font-weight: 700; line-height: 35px; letter-spacing: -0.1px; color: #333333; padding-bottom: 20px;">Bold Title</td>
</tr>
<tr>
<td style="padding-bottom:20px; padding-top:8px; font-family:'Open Sans', Arial; font-size:15px;">
<ul style="margin:0px; padding:0px 0px 0px 30px; list-style:disc;"
class="rtl-list list-items">
<li style="padding-bottom:16px"><span style="font-size:15px; font-weight:700; color: #333333;">Bullet point list 1:</span> text goes here;</li><li style="padding-bottom:16px"><span style="font-size:15px; font-weight:700; color: #333333;">Bullet point list 2:</span> text goes here.</li></ul>
</td>
</tr>
<tr>
<td style="padding-bottom:24px; font-size:15px; font-family:'Open Sans', Arial;" align="left">You can also add <i/> italic font <i/> which is fun.</td>
</tr>
<tr>
<td style="padding-bottom:4px; font-size:15px; font-family:'Open Sans', Arial;" align="left">Regards,</td>
</tr>
<tr>
<td style="padding-bottom:8px; font-size:15px; font-family:'Open Sans', Arial;" align="left">Your Customer Success Team</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!------------------------------ BLOCK END ------------------------------>
<!-- SPACER START -->
<tr>
<td height="32" bgcolor="#f5f5f5" class="Spacer"></td>
</tr>
<!-- SPACER END -->
<!------------------------------ FOOTER START ------------------------------>
<tr>
<td>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#f5f5f5">
<table class="align-center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-size:12px; color:#999999; line-height:16px; font-family:'Open Sans', Arial;">Click to <span style="color:#0465ac; text-decoration:underline; font-weight: 600;" target="_blank">unsubscribe_link</span> from these messages - Learn how to <a href="https://google.com" style="color:#0465ac; text-decoration:underline; font-weight: 600;" target="_blank">Another redirect link</a> and text</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!------------------------------ FOOTER END ------------------------------>
<!-- SPACER START -->
<tr>
<td height="32" bgcolor="#f5f5f5" class="Spacer"></td>
</tr>
<!-- SPACER END -->
</table>
</td>
</tr>
</table>
<!------------------------------ WRAPPER END ------------------------------>
<!-- if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!/endif]-->
</div>
</body>
<!-- BODY END -->
</html>