One way to add dynamic content to your Transactional Email templates is by using part of the Mailchimp template language in your templates to create regions that can be completely replaced with customized content when sending an email.
If you've used Mailchimp's template editor before, you may already be familiar with using the Mailchimp template language to add editable areas to a Mailchimp template. In Mailchimp, editable areas include editable images, repeatable sections, and sections which bring up the Mailchimp WYSIWYG editor.
Transactional Email supports one specific element of the Mailchimp template language: editable content areas. also known as mc:edit regions.
Add Editable Content Areas in Your HTML Template
To add an editable region to your HTML, add the following in an HTML tag:
mc:edit="section-name"
Every mc:edit region should have a unique identifier, and it's usually good to standardize the identifiers used:
mc:edit="header" - used to name the header of your email.
mc:edit="sidecolumn" - used to name an editable left- or right-side column.
mc:edit="main" - used to name the main content space of your email.
mc:edit="footer" - used to name the footer of your email.
In your HTML, this could look like this:
<div mc:edit="header">
<h2>Thank you for your purchase</h2>
</div>
<div mc:edit="main" style="color:#000000;">
We appreciate your business. Here are the details of your order.
</div>
<div mc:edit="footer">
Company contact information will go here.
</div>
Because the Mailchimp template language is designed to support editable regions in the Mailchimp visual editor, mc:edit regions should not be nested. For Transactional Email, nested regions may produce unexpected results or not be replaced as expected.
Provide Dynamic Content
Whether you're using the API or using Transactional Email as an SMTP server, you can give content to be placed in the editable regions in your template.
In the earlier examples, when you send an email through Transactional Email, you would set the name of a template region, like "header" and the full HTML content that should go in that area.
For each region, the content you provide will completely replace what's in the set area, but won't change the tag that contains the mc:edit (the divs above will remain unchanged, including any inline styles provided in the div tag itself).
For the header in the earlier example, what you provide will completely replace the h2 tags and the header text, so if you want header tags or formatting within the div, be sure to include that as part of the content for the header region.
Provide dynamic content through the API
If you're using the API, use the messages/send-template.json endpoint to send an email that uses a template stored in your Transactional Email account and use the template_content parameter to distinguish any regions to be replaced and the content to be injected in place of the placeholder content in the template's HTML. The API call JSON for template_content would look something like this to add content to your header and the main area:
"template_content": [
{
"name": "header",
"content": "<h2>Your Order is Complete</h2>"
},
{
"name": "main",
"content": "We appreciate your business. Your order information is below."
}
]
Provide dynamic content using SMTP headers
If you're sending through SMTP, you can use the SMTP Headers API to provide content for a single mc:edit region in your template using the X-MC-Template header. Click here for more information about setting this header.
Note
Other aspects of the Mailchimp template language won't be recognized in Transactional Email, so if you've created a template for use in Mailchimp, it may need a bit of tweaking to allow editable regions to be replaced by Transactional Email. For example, repeatable areas in Mailchimp templates can't be repeated via Transactional Email so you'd instead want to add multiple mc:edit regions for the number of items or sections you want to include.