Using Editable Content Areas in Templates

One way to add dynamic content to your Mandrill 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.

Mandrill 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 regions that are editable in the MailChimp visual editor, mc:edit regions shouldn't be nested. For Mandrill, nested regions may produce unexpected results or not be replaced as expected.

Provide Dynamic Content

Whether you're using the API or using Mandrill 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 Mandrill, 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 Mandrill 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 Mandrill, 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 Mandrill. For example, repeatable areas in MailChimp templates can't be repeated via Mandrill so you'd instead want to add multiple mc:edit regions for the number of items or sections you want to include.