Integral MailChimp User Guide
Integral License Key
MailChimp API Key
Default MailChimp List
Sync Merge Tags and Users
Creating an Email Campaign
Using Custom Templates
The Integral MailChimp plugin supports both MailChimp’s templates and custom ones you create yourself. In order for your custom templates to be editable they must use MailChimp’s template language. The official MailChimp instructions can be found here. Following are the steps necessary to create and add a custom template to MailChimp and have it be accessible when creating a new campaign.
<div mc:edit='main-content'>Main content placeholder text goes here</div>
<div mc:edit="footer">Footer content placeholder text goes here</div>
<img src="XXX" mc:edit="logo" mc:label="image" alt="" width="800px" height="200px" />
Starting from Scratch
If you’re starting from scratch, the easiest way to begin is by using one of the existing MailChimp templates as your starting point.
1. Log into your MailChimp account, choose templates from the menu at the top of the screen, then click on the Create Template button on the top right of the templates screen.
2. Select Themes — you can use any template but we recommend starting with one of the classic themes as these require the least modifications. You can tell which are classic as it is listed under the template name:
3. Selecting the template will open it in a design editor. Make any changes you want and then hit Save and Exit. Give your new template a name when prompted and then hit Save.
4. Your new template will now be listed on the templates page and it will show up as a saved template in the Integral Mail Chimp New Campaign. It will be fully editable.
Using Drag and Drop Templates or Your Own
If you prefer to use one of the drag and drop MailChimp templates, such as any of the basic layout templates, you’ll need to do a bit more work to make it editable. Follow the steps above first, then do the following:
1. Next to your new template click on the drop down menu next to Edit and choose Export as HTML. You will see a warning that if you import this template back into MailChimp later you won’t be able to add, edit or remove any of the drag and drop blocks — you can ignore this warning.
6. Exporting the template will prompt you to pick a name and location on your computer to save it to. Tip: By default it will save the file with the extension .html. Double clicking a file with that extension will open it in your default browser, not an editor. To make it easier save the file with the extension .txt, then open that saved file in your editor of choice.
7. At the top of your new file you will see a lot of inline style tags. Because support for HTML tags and styles varies across browsers and email clients, MailChimp works hard to make sure your email looks the same for everyone regardless of what they’re using to view it. These inline style tags are a key part of how that works and should be left alone unless you have a good understanding of how they work and what you’re changing. You want to scroll down to the start of the actual HTML code, which will look something like this:
8. Now you’re going to find the areas you want to make editable and add the appropriate MailChimp template tag(s). For content areas, which can contain both text and images and which will open up the standard WordPress text editor (like you use to edit posts and pages), add the tag mcedit=’area_name’. The value of the mcedit tag should be a unique name for that content area. In the example below, we’re making the email preview area editable so we use mcedit=’preview_content’.
9. Repeat this process for any other content areas you want to make editable.
10. When you are using a drag and drop template as your starting point the image areas will show up as a table with the class mcpreview-image-uploader — in MailChimp those tables are placeholders for an image editor. In your template you’ll need to replace those with an actual image tag. For example, if you’re starting with the Basic 1 Column Drag and Drop template you’ll see the following where the header image goes:
Replace that table code with an image element that has the appropriate MailChimp template tags, like so:
11. When you are done making your replacements, you’ll simply upload your modified file as a new template in MailChimp. Go back to the very first step, Create Template. This time choose Code Your Own and then select Import HTML. You will be prompted to give your new template a name and select the file to upload.
12. Once uploaded it will open in the visual editor and you will be able to confirm that your editable areas are working as expected. If you missed any you can also edit your code directly on screen and test each change until you have it right. Then hit Save and Exit and your new template is now available. Note: You’ll probably want to delete the first version of it, the one you exported as HTML, just to keep things clean.
Merge Tag Activation
Merge Tag Status
Configure Subscribe Widget
Subscribe Form Code
We are working on adding a shortcode to display subscribe forms on your website as an alternative to the sign up widget. In the meantime, you can use the following method to manually accomplish this.
If you want to display a sign up form outside of a widget area you can use WordPress’s the_widget() function (documentation here) to display a signup form using PHP. You can place the code directly in a template, use a theme (such as Enfold) that supports PHP code blocks in a page or post, or use a plugin like PHP Code for Posts that allows you to insert the code below via shortcode.
In the code example below replace mailchimp-list-id with the actual list id and mailchimp-interest-group-id with the interest group id (instructions for finding those are below).
$instance = array( 'imc-widget-title' => 'Subscribe', //-- optional, only if you want a title to display 'imc-widget-description' => '', //- optional, only if you want a description 'imc-widget-create-user' => true, //- set to true or false depending on if you want a WP user to be created 'imc-widget-display-in-modal' => false, //- set to false. If set to true the form will be hidden and will need a link on your page to trigger opening the form in a modal 'imc-widget-select-list' => 'mailchimp-list-id', //- the MailChimp list id -- easy way to find it is to view source of the list dropdown in the widget 'imc-widget-select-grouping-mailchimp-list-id' => 'mailchimp-interest-group-id', //- optional, if you want to show Interest Groups. View same way as above 'imc-widget-select-mergetags-mailchimp-list-id' => array('FNAME', 'LNAME') //- optional, any merge fields you want displayed. );
the_widget(‘IMC\Controllers\Subscribe_Widget_Controller’, $instance); //- use this code exactly as it appears
MailChimp uses custom IDs for the mailing lists and interest groups when accessed via the API. You can not find them in MailChimp itself, only by viewing the source code in the subscribe form widget. What you need to do is add an instance of the widget to any widget area on your site (you don’t need to actually save it, just put it there so you can grab the IDs needed), then right click on the Lists drop down menu and choose view source in your browser. In the screen shot below we’ve highlighted what you need to copy and paste into your code.
Pop Up Subscribe Form
If you would like your email subscription form to open in a modal window (a hidden form that pops up in an over lay window with a semi-transparent background covering the page below) there are two things you need to do.
- Check the Display in a Modal Window checkbox in the widget settings for your subscription form.
- Add a button or other link to trigger the modal — the thing your site visitors will click to make the subscription form window pop open. Note that the data-target attribute (highlighted below) is set to the id of the subscribe widget (listed at the top of the widget). That is what ties this button to that particular form. You can use multiple forms on the same page, each triggered by a different link or button, by using their ids. When you first create a widget the id won’t be displayed, you need to save it first.
You can see an example of the modal window option in use here: http://demo.integralwp.com/