Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device.
Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
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.
Please note
This process requires technical expertise, including HTML editing, to create well-branded emails. If you'd prefer our team to handle this for you, we offer it as a professional service. Please contact your Customer Success Managerfor more details.
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
Find an image file that you are happy to use at the top of your emails, the image/logo must meet the following criteria: Image format: JPEG or PNG Image size: less than 100px in height (larger images will cause the email layout to appear distorted) 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 Optional: Select a File Type Provide a label for your File, such as ‘Company Logo for emails’ Optional: Provide a description for your File Click the 'Browse' button to search for and select your image 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
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
With support from your marketing team, determine if you would like to use the same colour in your email header and the email footer Example with a dark blue used in both the header and the footer 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
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
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>
h1 {
font-family: Arial, sans-serif;
font-size: 24px
}
p {
font-family: Arial, sans-serif;
margin: 0px;
padding: 0px;
font-size: 14px
}
</style>
<table role="presentation" style="width: 602px; border-collapse: collapse; border: 1px solid rgb(204, 204, 204); border-spacing: 0px; text-align: left;">
<tbody>
<!-------------------------------------------------------------Table Row One (Logo)------------------------------------------------------------->
<tr>
<td align="center" style="padding: 40px 0px 30px; background: #010330;">
<p>
<font color="#ffffff">
<b>
<span style="font-size: 24px;">INSERT LOGO</span>
</b>
</font>
</p>
</td>
</tr>
<!-------------------------------------------------------------(Table Row Two (Content)--------------------------------------------------------------->
<tr>
<td style="padding:36px 30px 36px 30px;">
<h1 style="margin-top: 0px; margin-bottom: 20px;">
<font color="#153643">Email Title</font>
<br>
</h1>
<p style="font-size: 14px;">
<span style="background-color: transparent;">
<font color="#153643">Email content</font>
</span>
</p>
<table role="presentation" style="width: 100%; border-collapse: collapse; border: 0px; border-spacing: 0px;">
<tbody></tbody>
</table>
</td>
</tr>
<!---------------------------------------------------------------Table Row Three (Footer)--------------------------------------------------------------->
<tr>
<td style="padding: 30px; background: #010330;">
<table role="presentation" style="width: 100%; border-collapse: collapse; border: 0px; border-spacing: 0px; font-family: Arial, sans-serif;">
<tbody>
<tr>
<td style="padding:0;width:50%;" align="left">
<p style="margin: 0px; font-family: Arial, sans-serif; color: rgb(255, 255, 255);">Business Name</p>
<p style="margin: 0px; font-family: Arial, sans-serif; color: rgb(255, 255, 255);">Business Email</p>
<p style="margin: 0px; font-family: Arial, sans-serif; color: rgb(255, 255, 255);">Business Phone</p>
<p style="margin: 0px; font-family: Arial, sans-serif; color: rgb(255, 255, 255);">Business Website</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table> In Notepad, update the HEX colour on the two background colours within Table Row One and Table Row Three, 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
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
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!
Before you save your changes, you will test the changes made
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!
