Page Comparison

Steps to

[name of job]

brand your Email Templates

Table of Contents

minLevel	1
maxLevel	2
style

Related Helpguide Pages

Panel

panelIconId	atlassian-note
panelIcon	:note:
panelIconText	:note:
bgColor	#DEEBFF

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!

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

Panel

panelIconId	17657261-765d-4027-b044-d86a9501c52f
panelIcon	:accessplaniticon:
panelIconText	:accessplaniticon:
bgColor	#DEEBFF

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

Expand

title	Upload your logo to your accessplanit platform

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
Open the 'Files' DataGrid from your main menu on the left
Click the ‘Add File’ button
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
Click ‘Save & Close’ to finish adding your File to your platform

🖌️ Identify your colour codes

Panel

panelIconId	17657261-765d-4027-b044-d86a9501c52f
panelIcon	:accessplaniticon:
panelIconText	:accessplaniticon:
bgColor	#DEEBFF

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

Expand

title	Identify your colour codes

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
Copy the HEX colour codes for your colour(s) and record them somewhere safe

Please note

HEX colour codes start with a # followed by 6 letters or numbers, for example: #7a1f25

📧 Update your Email Templates

Panel

panelIconId	17657261-765d-4027-b044-d86a9501c52f
panelIcon	:accessplaniticon:
panelIconText	:accessplaniticon:
bgColor	#DEEBFF

This step is where you will update your existing Email Templates to be branded

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

Set up the HTML for your emails
Copy the content of your existing Email Template into Notepad
Add in the branded HTML
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

Expand

title	Set up the HTML for your emails

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

Code Block

language	html

<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>

In Notepad, update the HEX colour on the two background lines on row 3 and 7 to your brand HEX colours
Update the company details that are displayed in the footer to your team or company’s name and contact information
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

Expand

title	Copy the content of your existing Email Template into Notepad

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

Open the ‘Email Templates’ menu option to access the DataGrid where you can edit your Email templates
Find the Email Template that you would like to brand, by applying filters and/or searching the Email Templates DataGrid
Right-click on the Email Template and select the ‘Edit’ context menu option
Scroll down to the Body of your email, highlight the content and copy it
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

Expand

title	Add in the branded HTML

Open your original Notepad file which contains your HTML
Copy the entire content
Return to your Email Template and open the 'Code View'
Select the existing HTML and delete it all, then paste in your new HTML
Turn the 'Code View' off to go back to the normal text editor view
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
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
Click the ‘OK’ button to add this logo into your Email Template
Delete the ‘Insert’ and ‘Logo’ text from the header
Replace the text ‘Email subject’ with a title for your customers to establish what this email is about, such as ‘Booking Confirmation’
Return to your Notepad which contains the content of your original email and copy the contents
Paste it into your email after the ‘Email content’ text, and then delete the ‘Email content’ text
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
Apply any formatting to your text, such as adding bold to emphasise some text, and underline for any links
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!

Expand

title	Test your Email Template and save your changes

Once you think that your Email Template is ready, click the ‘Preview’ button at the bottom of the Email Template editor to open the ‘Preview Email’ window
From the ‘Preview Email’ window, select a Preview Object to see this object's information populate in the preview
Add your email address into the ‘Send sample to' textbox, then click the 'Send Email’ button
Review the email when you receive it, be sure to check that all links and merge fields work correctly
If you need to make any changes to your email, close the 'Preview Email' window to make your changes, then repeat steps 1-4 to run another test
Once you are happy that your Email Template is working as expected, click the ‘Save & Close’ button at the bottom of the Email Template editor window

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

Versions Compared

Old Version 6

New Version Current

Key

Steps to

brand your Email Templates

Related Helpguide Pages

🖼️ Upload your logo to your accessplanit platform

🖌️ Identify your colour codes

📧 Update your Email Templates

Set up the HTML for your emails

Copy the content of your existing Email Template into Notepad

Add in the branded HTML

Test your Email Template and save your changes