Custom code emails provide you with a flexible way to control how your emails look and support many of the new Constant Contact email features. These features allow you to:
- Send an email to segments. Segments are dynamic lists of contacts that you create using different kinds of criteria.
- Use personalization tags to pull contact, custom field, or account information into your email.
- Be flexible with how you style your email. You can choose to use a
<style>
element or use inline CSS. Constant Contact will automatically convert your email to use inline css when you send the email to improve compatibility with email clients.
You can also use the new custom code editor UI to view a live preview of your email and check for layout issues as you edit it.
Your custom code email cannot exceed 400 KB or contain the character combinations [#
, ${
, or <@
.
Constant Contact Tags
Tracking Image Tag
Add the tag [[trackingImage]]
inside your email’s HTML <body>
element to allow Constant Contact to track when contacts open your email.
<html>
<body>
[[trackingImage]]
</body>
</html>
Always include a tracking image tag inside your email to ensure that the reporting data for that email is as accurate as possible. If you do not include a tracking image, or if the tracking image cannot be displayed, Constant Contact will use each contact that clicked a link in your email to track opens.
You can get a report on each contact that opened your email by making a GET call to /reports/email_reports/{campaign_activity_id}/tracking/unique_opens
. For more information on reporting, see the Email Reporting Overview.
Personalization Tags
Use personalization tags to add contact, custom field, or account information to an email. Email campaigns that include personalized information about a contact are more engaging.
You can also use fallback text in your personalization tags. Constant Contact uses your fallback text if the information in the personalization tag is not available.
This tag example uses the text "Valued Customer"
if the contact’s first name is not available.
<html>
<body>
[[trackingImage]]
<div class="salutation"> Dear [[FIRSTNAME OR "Valued Customer"]],</div>
</body>
</html>
When you use the HTML Preview Method to verify how your email will look to Contacts, Constant Contact uses the contact information for the account owner to populate your personalization tags.
You can use the name value of any valid contact custom field in a tag. Previously in the V2 API, you could only use up to 15 custom fields that followed a specific naming convention.
Personalization Tag Reference Table
Contact Information
Contact Property | Tag Syntax |
---|---|
First name | [[FIRSTNAME]] |
Last name | [[LASTNAME]] |
Company | [[COMPANYNAME]] |
Job title | [[JOBTITLE]] |
Address line 1 | [[ADDRESSLINE1]] |
Address line 2 | [[ADDRESSLINE2]] |
Address line 3 | [[ADDRESSLINE3]] |
City | [[CITY]] |
State name | [[STATENAME]] |
Postal code | [[POSTALCODE]] |
Home phone | [[HOMEPHONE]] |
Work phone | [[WORKPHONE]] |
Birthday | [[BIRTHDAY]] |
Anniversary | [[ANNIVERSARY]] |
Email address | [[EMAILADDRESS]] |
Custom field | [[CUSTOM.<your_field_name> ]] |
Account Information
Account Property | Tag Syntax |
---|---|
Organization name | [[account.OrganizationName]] |
Website address | [[account.SiteURL]] |
Organization logo URL | [[account.LogoURL]] |
Organization address line 1 | [[account.AddressLine1]] |
Organization address line 2 | [[account.AddressLine2]] |
Organization address line 3 | [[account.AddressLine3]] |
City | [[account.City]] |
State name | [[account.State]] |
State code | [[account.usState]] |
Country | [[account.Country]] |
Country code | [[account.CountryCode]] |
Postal code | [[account.PostalCode]] |
You can add fallback text to any of the personalization tags by appending OR "<your text string>"
. For example, [[POSTALCODE OR "your area"]]
CSS in Custom Code Emails
You can style custom code emails by using a <style>
tag at the top of the email to enter your CSS declarations. Constant Contact automatically converts your CSS declarations into inline CSS when you send the email to contacts. This ensures that email clients render your email correctly. You can also use inline CSS.
<html>
<head>
<style>
.salutation {
font-weight: bold;
}
.hm-intro {
padding-bottom: 10px;
}
</style>
</head>
<body>
[[trackingImage]]
<div class="salutation"> Dear Valued Customer,</div>
<div class="email-body">
<div class="hm-intro">I hope you're well! I'm reaching out because I want to let you know we've opened a new Yoga studio in your area. The Half Moon Yoga Studio is a warm and inviting place with a variety of classes for all levels and interests.</div>
</div>
</body>
</html>
Simple HTML Example
<html>
<head>
<style>
.logo-text {
color: #4A4ADD;
font-weight: bold;
font-size: 20px;
padding-bottom: 10px;
}
.salutation {
font-weight: bold;
}
.hm-intro {
padding-bottom: 10px;
}
.email-body {
padding-left: 5px;
}
.schedule {
padding: 10px;
border: 10px;
}
</style>
</head>
<body>
[[trackingImage]]
<div class="email-content">
<table class="logo" align="center">
<td class="logo-text">Half Moon Yoga</td>
</table>
<div class="salutation">Dear [[FIRSTNAME OR "Valued Customer"]],</div>
<div class="email-body">
<div class="hm-intro">I hope you're well! I'm reaching out because I want to let you know we've opened a new Yoga studio in your area. The Half Moon Yoga Studio is a warm and inviting place with a variety of classes for all levels and interests.</div>
<div class="hm-about">We offer the perfect place to experience the health, physical, and mental benefits yoga and meditation can bring to your life. Our instructors stress the importance of the "journey" and help you progress at your own comfort level. Please visit our web site to see the entire schedule and <a href="#">sign up for a class</a> today. We look forward to seeing you on the mat soon!</div>
<table class="schedule" align="center">
<td><a href="#">View Schedule</a></td></table>
</div>
</div>
</body>
</html>
You will need to encode the HTML for your custom code email as a JSON string when you Create an Email Campaign.