Create a Custom Email Template

Video loading...

  • 0:02
    Using MailChimp with Drupal 7
  • 0:04
    Create a Custom Email Template Series Sponsored by MailChimp
  • 0:10
    One of the best features of MailChimp
  • 0:12
    is its awesome template creation tools, and their ability to allow anyone to create beautiful email templates.
  • 0:18
    Unfortunately, the templates created in MailChimp are not supported
  • 0:22
    by the Drupal MailChimp Campaign module without a little bit of extra work.
  • 0:25
    In this tutorial, we'll take a look at creating a template
  • 0:29
    in MailChimp using their drag-and-drop template creator.
  • 0:32
    And then, we'll walk through the extra steps
  • 0:34
    that are required in order to have these custom templates you create available in Drupal
  • 0:39
    when sending a campaign.
  • 0:41
    As well as making sure that the editable regions in our template are recognized by Drupal
  • 0:48
    so you can add content into them. In this tutorial, I'm going to assume that you've got
  • 0:52
    some basic HTML knowledge, since we'll be editing the HTML email template,
  • 0:57
    and I am also going to assume that you've at least seen the interface for sending a MailChimp campaign
  • 1:03
    through Drupal. By the end of this tutorial, you should be able to create a custom template
  • 1:08
    in MailChimp, and know how to make sure it shows up as an option in Drupal,
  • 1:12
    as well as understand how to edit your template's code to include editable regions
  • 1:16
    that Drupal will understand how to display for editors to insert content into.
  • 1:21
    Let's go ahead and get started. I think it helps to illustrate what we're trying to accomplish here
  • 1:26
    by first going and looking at our Drupal site and the MailChimp Campaign module.
  • 1:31
    So, I'm going to go to Configuration, and then MailChimp under Web Services,
  • 1:35
    and then at the top here, I'm going to click on the Campaigns tab.
  • 1:38
    This will appear assuming you've got the MailChimp Campaigns module enabled.
  • 1:42
    Now, if I click "Add campaign" whenever I'm adding a new MailChimp campaign through Drupal,
  • 1:47
    I need to choose which template I'm going to use to send the email. And you'll note
  • 1:51
    that out of the box, the only options here are the MailChimp themes,
  • 1:56
    so there are all the preconfigured custom themes within MailChimp.
  • 2:01
    They're all really great, but in most cases, you probably want your own custom MailChimp theme
  • 2:07
    or template so that your email marketing is branded for your company.
  • 2:11
    Wouldn't it be better if instead of having to choose one of these, you could choose a custom template
  • 2:16
    that we had created from this list? So that's what we're going to do here.
  • 2:20
    We're going to create a template in MailChimp and have it show up in this list.
  • 2:24
    Due to the way that the MailChimp API integration works with this module,
  • 2:29
    we can't just use the drag-and-drop template builder. If we do, we can save those templates
  • 2:34
    in MailChimp, but they'll never show up in the list in Drupal. We need to take a couple of extra steps
  • 2:39
    to get that to happen. And we'll talk about how to do that. I think it helps to have an idea
  • 2:43
    of what we're trying to build, so here's an example of the template that we're going to create.
  • 2:47
    It's going to include some imagery, so we've got this big splash image at the top,
  • 2:52
    and a place to make an announcement of sort, and then two columns underneath
  • 2:57
    where we can include additional text, and then our footer. So one column at the top
  • 3:01
    with a big banner image, two columns underneath. We'd like the images to remain the same
  • 3:06
    and we'd like the content to be editable from within Drupal. So that's what it is that we're trying to accomplish.
  • 3:13
    So in order to do that, we're first going to start by creating a new template within MailChimp.
  • 3:19
    So if you go to admin.mailchimp.com and log into your account, you'll get this templates option
  • 3:23
    up at the top. If I click on Templates, one of the options is to create a new template.
  • 3:29
    I don't have any saved templates yet, so we'll go ahead and create a new one.
  • 3:32
    And then you've got some choices here. You can start creating a template from one of the existing themes
  • 3:37
    and making changes to it, or you can start from one of these basic layouts and edit from there.
  • 3:43
    We're going to use one of the basic layouts as a starting point for our template.
  • 3:47
    Specifically, we're going to use this one, the one column on top, two columns on the bottom.
  • 3:53
    I can preview this by clicking on the thumbnail. Now this is a pretty close match
  • 3:57
    to what it is that we're trying to do, place an image on the top, a couple on the bottom.
  • 4:01
    And then we want this to show up within Drupal. So I can go ahead and say okay,
  • 4:05
    I'll select this option. And I can start configuring our email template,
  • 4:10
    add a couple images. Let's see, we can browse or upload images.
  • 4:16
    One of them's there already. We'll upload two more. We want this shop owner one,
  • 4:21
    and the flavors one, like so. So I've uploaded some image assets.
  • 4:25
    I'm going to choose this one for the banner. So now it's inserted the banner image there.
  • 4:30
    And I might as well modify these other two, as well. We'll put the flavors image on the left
  • 4:34
    and the final owner image on the right, click on Browse to select an image,
  • 4:40
    click Select next to the image that you would like to insert, and MailChimp will take care of inserting it here.
  • 4:46
    Now, in our case, there's some content here, like for example, the header up here,
  • 4:51
    that we'll probably just want to be the same for all of them. We'll say "Weekly Newsletter
  • 4:56
    from Anytown Ice Cream" and save and close. And you can see that it's updated that header up there—
  • 5:03
    the image—and then we've got some text in here. Let's see if I'll remember what I wanted
  • 5:09
    this to look like. I wanted the header here to say "Anytown Ice Cream Updates,"
  • 5:17
    and then we'll say, "Regular updates from your favorite ice cream shop."
  • 5:23
    That part, we'll say, is going to stay the same all the time, but here I'd like to say,
  • 5:28
    "Insert content here." So for our template, we want editors to insert content into this region
  • 5:36
    that's specific for the newsletter that they're sending out. Down below, you edit these
  • 5:42
    by just selecting the region that you'd like to edit, and then it opens this little WYSIWYG-style editor on the right.
  • 5:49
    And you can start just hacking away at it from there. We're going to say this one's called,
  • 5:53
    "Upcoming Flavors," and we'll maybe give people an idea of what it is that we're looking for here.
  • 6:00
    So "Upcoming Flavors," so we'll just copy and paste some text in, make this a little quicker.
  • 6:07
    We'll paste our text in. We'll turn this bottom part into a list like so, make a header.
  • 6:16
    We'll call this a style 3 header like that, edit this other one. We're going to make this one say
  • 6:25
    something about "Updates from the Owner." We'll choose the style here to make that heading 3.
  • 6:32
    That's probably good enough for our use case. So mostly you can just click around
  • 6:36
    in the drag-and-drop editor here and create the template that you want
  • 6:40
    inserting some dummy content, making it obvious to people that are going to be sending campaigns
  • 6:44
    what content they should be putting into in place of your dummy content.
  • 6:48
    When you're ready you can click "Preview and Test" up here in the top right.
  • 6:51
    So enter preview mode gives you a sense of what this is going to look like once it's in use.
  • 6:57
    And that looks pretty good to me. So I'll close that.
  • 7:00
    Then at the bottom right, I'm going to say Save and Exit. This will prompt me to give my template a name,
  • 7:07
    so I'll call this Weekly Newsletter Template. You know, name your template like so, save.
  • 7:14
    So now, I've got a new template. And that template will show up and allow me to use it
  • 7:19
    for campaigns when I'm sending a campaign through MailChimp.
  • 7:22
    But, this weekly newsletter template doesn't yet show up in Drupal.
  • 7:28
    If I switch back to our Drupal site and refresh the page for creating the new campaigns,
  • 7:32
    you'll see that there's still nothing listed there. I'm not seeing the weekly template in the list here.
  • 7:38
    That's because we need to do a couple of different things. The templates created by the drag-and-drop editor
  • 7:44
    aren't available to API clients like Drupal. So what we're going to do is we're going to export
  • 7:51
    the template that we just created as HTML, make a couple of changes to it, and then re-import it
  • 7:58
    so that it'll show up as a custom coded template, one that Drupal can access.
  • 8:02
    Because the API has access to any templates that we've custom coded,
  • 8:06
    so this is a little bit of a work around. We built the template primarily in MailChimp
  • 8:09
    but then we export the HTML and basically re-import it. So I'm going to say, "Export as HTML."
  • 8:16
    And then I'm going to say, "Got it. I'm going to export this template. I understand the implications."
  • 8:21
    It's given me an HTML file. I'll open that HTML file up. So this is the HTML of the newsletter template
  • 8:29
    that we just downloaded. It's kind of nice. We don't have to craft all of this ourselves.
  • 8:33
    MailChimp has these already really good templates, and we can just start editing it a little bit.
  • 8:38
    The reason that I am editing this and not just re-importing it right away
  • 8:43
    is that I need to define where the placeholder content is in this template so that when it's imported
  • 8:51
    into Drupal, we get the appropriate text areas for our users to fill out.
  • 8:55
    So if I scroll through the HTML here, what I'm looking for is where our dummy content is.
  • 9:00
    I can probably search too. I said, "Insert content here."
  • 9:04
    So what I want to do is make basically this part right here—this content—editable
  • 9:10
    within both MailChimp and Drupal. If you take a look at the documentation
  • 9:15
    for the MailChimp templating language, which I'll link to in the notes for this tutorial,
  • 9:19
    you can see that there is this concept of creating editable areas. And you do so
  • 9:25
    by adding this mc:edit attribute to an HTML element within your template.
  • 9:32
    You need to give each of those attributes a unique name. This is a lot like defining regions in a template
  • 9:38
    to place blocks into within Drupal. So we're going to edit our HTML template and add some of these
  • 9:44
    mc:edit attributes. Let's go ahead and switch over to our editor again.
  • 9:49
    So I'm going to add an mc:attribute here to the td element. We'll say mc:edit=
  • 9:59
    and then we have to give it a unique name. So I'll name this one main content, like so.
  • 10:04
    And then I need to find the other two elements that we wanted to make editable,
  • 10:07
    the left and right columns underneath this main content. And so I can do that by kind of scrolling through
  • 10:13
    and looking for—okay, here's one. One of them was that upcoming flavors.
  • 10:17
    So I'll change this td and I'll add an mc:edit there—mc standing for MailChimp, of course.
  • 10:24
    And we'll call this left column. Depending on your situation, you'll want to use descriptive names here
  • 10:31
    so I guess we'll change this to flavor of the week, like so. And you'll see in a minute when these are displayed
  • 10:39
    in Drupal why it's important for us to use descriptive names here.
  • 10:42
    Finally, here's the last one, mc:edit. We'll name this one updates from owner, like so.
  • 10:49
    And save that HTML file. Now I'm going to switch back to my browser,
  • 10:54
    and in the MailChimp UI, I'm going to click on the button to create a new template.
  • 10:59
    I know we already created one, but bear with me for a moment.
  • 11:02
    I'm going to create a template, and this time I'm going to choose the "Code Your Own" option.
  • 11:07
    And from there, I'm going to say Import HTML by clicking the "Select" button.
  • 11:11
    I'll name this "Weekly Newsletter - Imported," and then I can just choose the HTML file
  • 11:17
    that we were just making changes to. So I'll find that like so and go ahead and upload it.
  • 11:23
    MailChimp will read in and parse that HTML file and display for me what the template looks like,
  • 11:28
    give me the option to edit the code over here on the right. This basically is the same code
  • 11:32
    we were just editing in our text editor. I'll go ahead and say that looks good to me.
  • 11:36
    I'm going to save and exit. So now I've got this new "Weekly Newsletter - Imported,"
  • 11:42
    that is a code-you-own-style template. So watch this. If we switch back to Drupal,
  • 11:48
    now if I refresh the page for creating a new campaign and I go down and I look at the list of templates,
  • 11:54
    it doesn't show up right away. It looks like I probably have to clear the cache first,
  • 11:57
    so let's go ahead and do that. I'll go to Configuration, Performance, Clear all caches,
  • 12:04
    and then Configuration, MailChimp, Campaigns, Add a Campaign. And under the template options,
  • 12:12
    there we go. You can now see our custom template. I can choose the weekly newsletter template
  • 12:17
    that we created. When it displays the form for it, you can see here each of the mc:edit regions
  • 12:23
    that we added to the template—main content, flavor of the week, updates from the owner—
  • 12:28
    and I can go ahead and edit those. I won't go through sending the campaign here,
  • 12:32
    but if you wanted to continue on, there's another tutorial to watch on sending campaigns
  • 12:36
    through Drupal. So that's the process for creating a template in MailChimp
  • 12:41
    that is also available using the MailChimp campaigns module in Drupal.
  • 12:45
    In this tutorial, we looked at how
  • 12:47
    you can create a new template in MailChimp and then export that template as HTML,
  • 12:51
    editing the HTML and adding custom attributes to elements within the HTML
  • 12:56
    that MailChimp can parse and treat as editable regions.
  • 13:00
    We then explained sort of how
  • 13:03
    Drupal is unable to recognize the templates created with MailChimp's drag-and-drop interface,
  • 13:08
    but if we export them as HTML and then re-import them as a code-your-own template
  • 13:13
    or really if you just started from scratch and wrote your own code-your-own template,
  • 13:17
    you can import those templates into MailChimp and they'll be available within the Drupal user interface
  • 13:23
    when somebody wants to send a MailChimp campaign using your custom template.

Create a Custom Email Template

Loading...

One of the best features of MailChimp is its awesome template creation tools, and their ability to allow anyone to create beautiful email templates. Unfortunately, the templates created in MailChimp are not supported by the Drupal MailChimp Campaign module without a little extra work. In this tutorial we'll take a look at creating a template in MailChimp using their drag and drop template creator. Then, we'll walk through the extra steps required in order to have these custom templates you create available in Drupal when using the MailChimp Campaigns module to send a campaign.

In addition to just making the templates appear in Drupal, we’ll also want to declare which regions in the template should be editable within Drupal. So we’ll use the mc:edit="" HTML attribute in our template. Any DOM element we add this attribute to will become a section, which content creators on our Drupal site can insert content into.

By the end of this tutorial you should be able to create a custom email template in MailChimp and know how to make it show up as an option in Drupal. You should also understand how to edit your template's code to include editable regions that Drupal can display and editors can use.

Further your learning

  • Why do you need to export a template to HTML and then re-import it?
  • What does the custom `mc:edit` attribute do in an HTML email template?
  • Further exploration: Can you create a new template that is a 2x2 grid, and make that template available to someone creating an email campaign in Drupal?

Series Sponsored by MailChimp

Downloads: 
Log in or sign up to download companion files.
Additional resources: