Add company branding to Email Templates

Steps to brand your Email Templates

 


Learn how to update your Email Templates to include your business colours and logo for beautifully branded emails!

Including your company’s brand colours and your logo in your emails is an easy and effective way to establish a professional and recognisable identity with your customers!

Branded emails are not only more pleasant to read, they also look more professional, and support brand recall which ensures your customers associate your communications with your company and brand, this means they are more likely to remember you the next time they are looking for training!

Example email that has branding applied

If the emails sending out from your accessplanit platform are not yet branded, follow this page to learn the steps to update them to include your logo and company colours.


Upload your logo to your accessplanit platform

Within this step you will upload the logo image that will be displayed at the top of your emails to your accessplanit platform

 

  1. Find an image file that you are happy to use at the top of your emails, we recommend the following criteria:

    1. Image format: JPEG or PNG

    2. Image size: less than 100px in height

    3. Colours: consider the colour that will sit behind this image, there should be a good contrast between the image colour and the background colour so that your customers can clearly see your logo

  2. Open the 'Files' DataGrid from your main menu on the left

    Files main menu option

     

  3. Click the ‘Add File’ button

     

  4. From the ‘Add File’ pop-up window

    1. Optional: Select a File Type

    2. Provide a label for your File, such as ‘Company Logo for emails’

    3. Optional: Provide a description for your File

    4. Click the 'Browse' button to search for and select your image

    5. Use the ‘Mapped To’ options to map your File to your Training Provider Account

       

  5. Click ‘Save & Close’ to finish adding your File to your platform


Identify your colour codes

This step is to choose whether you would like to use one or two colours, and which colours you would like to use in your Emails

 

  1. With support from your marketing team, determine if you would like to use the same colour in your email header and the email footer

    1. Example with a dark blue used in both the header and the footer

    2. Example with a dark blue used in the header and a dark red used in the footer

       

  2. Copy the HEX colour codes for your colour(s) and record them somewhere safe


Update your Email Templates

To update your Email Templates, you will follow these steps:

  1. Set up the HTML for your emails

  2. Copy the content of your existing Email Template into Notepad

  3. Add in the branded HTML

  4. Test your Email Template and save your changes

Set up the HTML for your emails

This step will provide you with the foundation HTML to use within your emails

  1. Copy the following HTML and paste it into Notepad
    It is important to use Notepad instead of Microsoft Word, as this will avoid any hidden characters being added to your HTML which could break it

    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="x-apple-disable-message-reformatting"> <title></title> <!--[if mso]> <noscript> <xml> <o:OfficeDocumentSettings> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <![endif]--> <style> table, td, div, h1 {font-family: Arial, sans-serif;} p{margin:0px; padding:0px;} </style><style class="darkreader darkreader--sync" media="screen"></style> <table role="presentation" style="width: 100%; border-collapse: collapse; border: 0px; border-spacing: 0px; background: rgb(255, 255, 255); --darkreader-inline-border-top: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-bgimage: initial; --darkreader-inline-bgcolor:#2d2f30;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-bgimage="" data-darkreader-inline-bgcolor=""> <tbody> <tr> <td align="center" style="padding:0;"> <table role="presentation" style="width: 602px; border-collapse: collapse; border: 1px solid rgb(204, 204, 204); border-spacing: 0px; text-align: left; --darkreader-inline-border-top:#555b5e; --darkreader-inline-border-right:#555b5e; --darkreader-inline-border-bottom:#555b5e; --darkreader-inline-border-left:#555b5e;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left=""> <tbody> <!-------------------------------------------------------------Table Row One (Logo)-------------------------------------------------------------><tr> <td align="center" style="padding: 40px 0px 30px; background: #010330; ; --darkreader-inline-bgimage: initial; --darkreader-inline-bgcolor:#14153c;" data-darkreader-inline-bgimage="" data-darkreader-inline-bgcolor=""><p><span style="font-size: 24px; color: rgb(255, 255, 255); font-weight: 700; text-align: left;">INSERT LOGO</span> </p></td> </tr> <!-------------------------------------------------------------(Table Row Two (Content)---------------------------------------------------------------> <tr> <td style="padding:36px 30px 36px 30px;"> <table role="presentation" style="width: 100%; border-collapse: collapse; border: 0px; border-spacing: 0px; --darkreader-inline-border-top: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left=""> <tbody> <tr> <td style="padding: 0px; --darkreader-inline-color:#ece8e0;" data-darkreader-inline-color=""> <h1 style="color: rgb(21, 54, 67); font-size: 24px; margin: 0px 0px 20px; font-family: Arial, sans-serif;">Email subject</h1> <p style="margin: 0px;"><font color="#153643">Email content</font></p><p style="color: rgb(21, 54, 67);"></p> </td> </tr> </tbody> </table> </td> </tr> <!---------------------------------------------------------------Table Row Three (Footer)---------------------------------------------------------------> <tr> <td style="padding: 30px; background: #010330; --darkreader-inline-bgimage: initial; --darkreader-inline-bgcolor:#b72326;" data-darkreader-inline-bgimage="" data-darkreader-inline-bgcolor=""> <table role="presentation" style="width: 100%; border-collapse: collapse; border: 0px; border-spacing: 0px; font-size: 9px; font-family: Arial, sans-serif; --darkreader-inline-border-top: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial;" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left=""> <tbody> <tr> <td style="padding:0;width:50%;" align="left"> <p style="margin: 0px; font-size: 14px; line-height: 16px; font-family: Arial, sans-serif; color: rgb(255, 255, 255); --darkreader-inline-color:#ffffff;" data-darkreader-inline-color=""> Training Company </p><p style="margin: 0px; font-size: 14px; line-height: 16px; font-family: Arial, sans-serif; color: rgb(255, 255, 255); --darkreader-inline-color:#ffffff;" data-darkreader-inline-color=""><u> customerservice@trainingcompany.com </u>&nbsp;</p><p style="margin: 0px; font-size: 14px; line-height: 16px; font-family: Arial, sans-serif; color: rgb(255, 255, 255); --darkreader-inline-color:#ffffff;" data-darkreader-inline-color=""> 01234 567890 </p><p style="margin: 0px; font-size: 14px; line-height: 16px; font-family: Arial, sans-serif; color: rgb(255, 255, 255); --darkreader-inline-color:#ffffff;" data-darkreader-inline-color=""><u> www.trainingcompany.com </u></p></td></tr></tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>

     

  2. In Notepad, update the HEX colour on the two background lines on row 3 and 7 to your brand HEX colours

     

  3. Update the company details that are displayed in the footer to your team or company’s name and contact information

     

  4. Save this Notepad file and keep it somewhere accessible for a later step!

 

Copy the content of your existing Email Template into Notepad

This step will ensure that the current content of your Email Template is still used in your newly branded emails

  1. Open the ‘Administration’ menu from the Profile options at the top-right of your platform

 

  1. Open the ‘Email Templates’ menu option to access the DataGrid where you can edit your Email templates

     

  2. Find the Email Template that you would like to brand, by applying filters and/or searching the Email Templates DataGrid

     

  3. Right-click on the Email Template and select the ‘Edit’ context menu option

     

  4. Scroll down to the Body of your email, highlight the content and copy it

     

  5. Paste the content into a new Notepad window (please do not use your existing Notepad which contains your HTML)
    It is important to use Notepad instead of Microsoft Word, as this will avoid any hidden characters being added which could later break your emails.

Add in the branded HTML

This step is where you will combine your HTML and your email content together

  1. Open your original Notepad file which contains your HTML

  2. Copy the entire content

     

  3. Return to your Email Template and open the 'Code View'

     

  4. Select the existing HTML and delete it all, then paste in your new HTML

     

  5. Turn the 'Code View' off to go back to the normal text editor view

     

  6. Click in between the ‘Insert’ and ‘Logo’ text in the header so that your text cursor is in between the two words, then click on the Image button

     

  7. From the Images pop-over, select the logo that you uploaded earlier
    Please note: you may need to add the column ‘Label’ into your Images DataGrid to more easily find your logo

     

  8. Click the ‘OK’ button to add this logo into your Email Template

  9. Delete the ‘Insert’ and ‘Logo’ text from the header

     

  10. Replace the text ‘Email subject’ with a title for your customers to establish what this email is about, such as ‘Booking Confirmation’

     

  11. Return to your Notepad which contains the content of your original email and copy the contents

     

  12. Paste it into your email after the ‘Email content’ text, and then delete the ‘Email content’ text

     

  13. If you email content includes any hyperlinks or quick links, make sure these are updated as pasting them back in from Notepad will have removed the links

     

  14. Apply any formatting to your text, such as adding bold to emphasise some text, and underline for any links

  15. Do not save your changes yet

 

Test your Email Template and save your changes

This step is where you will test the changes to your Email Template before you save!

 

Repeat this process for each Email Template that you would like to brand!