Skip to main content

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. 
 

Newsletter HTML

 

If you’d like to use this HTML for your your Newsletter, follow the steps below:

  1. In Docebo, navigate to Admin Menu > Newsletter
  2. In the Text area of the Newsletter page, select < > (Source Code)
  3. From this post, select Show Content (below)
  4. Using your cursor to select the text, highlight the entire code snippet in the expanded area
  5. Copy the text
  6. Navigate to the Newsletter in Docebo
  7. Paste the code snippet into the Source Code section
  8. Select Ok
  9. 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>

 

 

This is awesome! I love it! I am going to set aside some time to try that one out! I have ZERO programming/coding training, but I’ve sure learned a lot about it after getting Docebo! I get a bit more efficient with each project, so we will see what I can accomplish with this! I will message you once I get a chance to dive into it. Thanks again! :v_tone2: Steph

I’d be lying if I said I was any different since starting to work for Docebo as well; I sometimes catch myself talking about the things with clients and think, “3yrs ago I couldn’t understand a word of what I just said”. :)

As I say, that template should allow for some easy copy/paste of those blocks depending on the formatting that you want for your text. The same approach can also be used for notification emails by using the “source code” section of the editor. Beautifying the notifications can allow you to include the same sort of output with hyperlinks, bold/italics, and other calls to action like the example here. 

@SuperShaune thank you for sharing this template! Very helpful!

One question regarding the unsubscribe link at the bottom, if we’re using this as a Newsletter template (and sending to learners via that feature in Docebo), how could we enable an unsubscribe/opt-out? 

Hey @mark… Glad it helped, and really great question. The unsubscribe link that I used was actually a shortcode from another tool we use on the Customer Experience team,

This is a feature that I’ve been asked about in the past and a need I know our product team is aware of. As a first step, you can check the ideas portal and vote/comment on the relevant ones (seems there are a couple):

 


But, in terms of opting out of notification emails in the Docebo platform, one approach that I’ve seen is to leverage user additional fields. The idea is that if a user completes a dropdown additional field for a yes/no question like “Do you want notification emails?” and we then put those users into an automatic group, the admin can configure the notifications to be sent to only that group of users.

What’s nice here is you can still use features like the newsletter specifically for groups, send in-platform (or Slack) notifications to the opt-out group, and ultimately manage the automatic group as you would any other like a dedicated page with important info that you can’t send via email, etc.

Can this be an approach?

@SuperShaune that is an excellent approach. Thank you!

Nice One Shaune :)

Hello @SuperShaune 

I was wondering if you could share how you use the unsubscribe list from a separate platform to update the user additional field lists on Docebo?

I have set up the user additional field as you suggested and can separate the groups. Similar to you, our subscribers on Docebo but will unsubscribe using a different platform. As the unsubscribe feature is a legal requirement in the Uk. 

I have been trying to test, how I can update active user additional fields information, if a user unsubscribes but not having much luck.

For example if a user choses yes using the additional field option in Docebo, then opts out of the newsletter via a different platform, how can I change the additional field to no, so the user doesn’t receive another newsletter? Assuming that every month I download the Yes group.

So far I have downloaded a User Report (excel), changed the additional field (yes or no), saved as csv, then imported the csv back into the platform. But alias no joy.

I think I am missing something.

Any advice or help would be appreciated.

Many thanks

Hey @pmack001 - appreciate the follow-up on this. :)

If I’m understanding the need and flow here, your CSV import should be the way forward, using this new add’l field information and making sure to overwrite the value in the mapping area of user management (CSV upload). If you’re not able to update, it could be that your CSV has a different case of that header (I can’t recall if it’s case sensitive, but I believe so - our Support team can help in any case). Once that value is updated, those new users should go into the ‘no’ group. 

I’m not sure how you’re managing your user import today, but is there a way that this ‘opt out’ info is collected in your CRM which feeds Docebo? Or is CSV import your only option? (just wondering if there’s a way to use the automation app)

The only other approaches that come to mind is via API or possibly with a solution like Docebo Connect - assuming your other tool supports it (authentication, API/webhooks). 

Let me know if I’m missing something. :)

Shaune

 

HI @SuperShaune  thanks for your reply. 😊

I think it is my CSV that is the problem given your reply as I am trying to update active user additional fields (if I have read the support pages properly) and it is not updating the status.

Do you know if there is a template that i can download from the LMS and fill in, that includes additional fields? Or is this a conversation for the support team or different chat area? The one I am using doesn’t seem to be set up properly.

I will have a look at the CRM and see if there are any options. I have no experience of  API’s (yet) but i can explore this option and look at Docebo Connect.

Thanks for your time.

Pauline

Hi @pmack001, I may be able to help with the CSV part of your issue. So you’re trying to update user additional fields vis CSV, correct? Is this via the Automation App or are you importing this CSV directly into the User Management area?

The reason I ask is that the column mapping is different for the Automation App vs. User Management. I’m wondering whether the issue here might be due to the column being mapped incorrectly to the additional field during import.

Hi @elliott.vickrey thanks for getting back to me.

Yes that is correct, I am uploading a CSV containing active user information with only one column changed. I am importing the CSV into the User Management area.

When importing the CSV, in the advanced settings it is set to “auto detect” and “consider first row as header”.

Then User Management > import CSV, in the left column, Update Users is ticked to update information for existing users. Destination fallback Branch - do nothing & Auto Assign to Power users - do nothing.

I can see the fields in the middle column and can drag them across to match the right hand column. 

I can see there is a downloadable template in the “User Management” section but it does not provide additional fields columns in the excel file so I was wondering if i perhaps have not set up the excel file correctly.  

Thanks

Pauline

@SuperShaune thank you for sharing!

I am thinking of using newsletter and did a test one. Do you know if what we sent is saved somewhere (history) so I can take a look at previous ones and who they were sent to and also to duplicate one if needed? Or would we create it from scratch?

Since notifications does not have one for account expirations, newsletter was recommended so we would use it to notify users that their account is expiring. It would be similar message each time. 

Hey @isaal - nice to hear from you and great questions. 

Similar to the notification log feature request, unless you’d included a generic/service email address as one of the recipients in a group/branch, it’s this kind of log isn’t available.

On the point of account expirations, I agree that the Newsletter could be a good solution. I suppose your approach would be to take an export of users from the user management area filtered by upcoming expiration date and then create a manual group? 

@SuperShaune ah good to know, thank you! 

Yes, correct. I am making groups with an additional field that has the expiration date. :)

Perfect… I’ve asked @temmy.sulemon from my team to include this as a point in your next catch-up; from my side, I’ll review with the teams what kind of potential improvements we have around notifications (the trigger itself and I know the notification log is something that’s been requested by many) as well as the newsletter functionality itself.

I’ve looked through my folders for some other templates, but the structure is mostly the same so I don’t have much more than I can share. In any case, I’m sure that someone with better HTML skills than me (not difficult) or access to a newer editor could do some great design. The alternative is looking at some kind of integration with a 3rd-party tool to help with some enhanced tracking/etc, but that’s a much bigger discussion!

Hi @SuperShaune 

The following is an idea for notifying users when their expiration date is approaching. I’ve been told there are notification improvements in the pipeline, but it’s not clear if this idea is being considered for those improvements. Any support you could give the idea would be greatly appreciated!

 

@SuperShaune thank you and @Daniel voted!

I really like this! 

Quick question - does anyone know how to change the “update” graphic to one that I created in Canva?

 

Thanks! 

Thanks for this template - it was very helpful! I was able to use it to come up with an email that looked very nice (if I do say so myself), so - much appreciated. 😁

Not specifically related to templates, but echoing others - having an in-platform way of seeing previous newsletter sends (particularly around timing and who it was sent to, maybe even with a log of whose email bounced) would be especially helpful.

Question - is there a way to access the newsletter send function via the API? I suspect I need to break this out into another thread, but if anyone has any suggestions here I’d be very grateful.

Reply


Terms & ConditionsCookie settings