Create Your Own Email Template

Note: If you haven't, please read Introduction to Email Templates to learn how templates work in Bridg.

This document reviews the different coding elements and best practices for creating or editing email templates.  Creating your own email template gives you greater flexibility in designing your messages.  Your templates can have different layouts, responsive elements, longer formats, and more.  

If you are providing your own code, it is your responsibility to check for email client compliance and resolving any bugs.  

To help you understand how some of the elements work below, you can download the Bridg basic template here.

 

CSS Reset Code

Coding emails is like writing HTML in the year 2000.  You cannot use <div> elements and CSS styling has to be written in-line.  Additionally, email clients vary how they display email messages.  Microsoft Outlook and Yahoo Web Mail clients have usually had the most compatibility issues.  

To help provide some consistency across email clients, you can copy and paste the following CSS code into your email's <head> section.  

<style media="all" type="text/css">
/* Reset */

html, body {
margin: 0; min-height: 100%; min-width: 100%; padding: 0;
/*   Stop text resizing in Windows Mobile and Webkit (iDevices) but still allow resize on zooming.  Change 100% to none to completely disallow text resizing.*/
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 100% !important;}

/* Force Hotmail to display emails at full width */
.ExternalClass, .ReadMsgBody { width: 100%; }

/* Force Hotmail to display normal line spacing. More on that:http://www.emailonacid.com/forum/viewthread/43/ */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }


/* Fix Yahoo's issue with paragraph tags */
p { margin: 10px 0px 6px; line-height:0;padding:0;} img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}

</style>

 

 

In-App Editing Attributes

When editing emails in Bridg, you have the ability to make quick and easy in-app changes by placing special attributes in your email code.  These attributes enable the use you to swap out images, change URLs for links, and edit text.  

 

Onload Code

To make the attributes recognized by the Bridg app, you must have the following code in your email, right before the closing </body> tag.

<script>window.onload = function(){ parent.messageLoaded(); document.body.addEventListener('click', parent.messageContainerClicked); };</script>

 

Change Image Attribute

Add the following attribute to the <img> tag to have the ability to change and upload images.

data-capabilities="image"

 

 

Change Image with Link Attribute

Add the following attribute to the <a> tag that surrounds the <img> tag to have the ability to change images and assign a link.

data-capabilities="image,action"

 

 

Change Text Attribute

Add the following attribute to the nearest tag to the text you want to be able to edit. Typically, this is a <td> tag or <span> tag.  Using <span> instead of <p> also has less issues across email clients.

data-capabilities="text"

        

 

Change Text with Link Attribute

Add the following attribute to the <a> tag that surrounds the text that you want to edit.

data-capabilities="text,action"

 

 

 

Dynamic Content Variables

With Bridg, you can have content in your emails that change depending on who the messages are being sent to.  Common uses of this include having a recipient's first name appear in the message body or displaying the business address of the recipient's favorite location.  

Adding these variables is very straightforward and the Bridg app will recognize what to do with them when the email is sent.  However, the variables do not work if sending yourself a test email using the "Send Test Email" capability.  To test this properly, you can send a message to a list that includes an email or set of emails that you receive.  Contact your CSM if you have questions on how to set this up.

To add any of the variables below, you can simply have them in the text itself.  Do not add the variables by using the in-app text editing feature in Bridg.  It must be done in the HTML view.  If the variable is a text link, then you would place that variable in the "href" attribute.

 

Item Variable (HTML/Text)
Name {{name}}
First Name {{first_name}}
City {{city}}
Business Name {{businessData.business_name}}
Business Street Address {{businessData.street}}
Business City {{businessData.city}}
Business State {{businessData.state}}
Business Zip {{businessData.zip}}
Phone Number {{businessData.raw_number}}
Online Order URL   {{businessData.online_order_url}}
Website URL {{businessData.website}}
Unsubscribe URL http://api.bridg.com/v1/contact/unsubscribe/{{id}}
Web Version URL {{webversionHelper}}&amp;couponCode=couponcodehere&amp;date={{date 'MM/DD/YYYY' [number of days]}}

Adding Dynamic Coupon Expiration Dates is slightly more complicated, for info on how to add these dates checkout this article.

CAN-Spam Block

Bridg will automatically inject a CAN-SPAM block at the bottom of your email that displays the business address and an unsubscribe link. 

To avoid having this code injected automatically, you must have this snippet of code near the bottom of your <body> section.  Please note, your email must have an unsubscribe link and business address displayed.

<center id="BridgUnsubscribeFooterText"></center>

  

Email Client Compatibility

Getting fancy with your emails using HTML code can be a challenged due to the different ways email clients display the messages.  Below is a chart that summarizes popular design elements and the email clients that they work with.  

 

Best Practices

Lastly, here are some tips and tricks that can help you create your email templates.

  • CSS should be written in-line.  Avoid using CSS shorthand and using it for layout.
  • Use 6 digit hex color codes instead of 3 digits.
  • Use tables instead of divs.  However, divs can be used within tables.
  • Use <span> tags instead of <p> tags.
  • All images should have a "display:block;" style and a "border='0'" attribute.  This will prevent there from being extra lines and spaces around your images.
  • If you see strange characters in your text, it is likely because of a character encoding issue.  Try saving/formatting your code into something like UTF-8 to fix the issue.
  • Using retina images can be tricky as clients, such as Outlook, may not follow width attributes.  Retina images also take longer to load.  
  • Save images as jpg instead of png to reduce the file size.
Have more questions? Submit a request

Comments

Powered by Zendesk