How do I add a Countdown Timer to MailChimp?

Modified on Fri, 7 Jun at 10:45 AM

We recently updated our Website, so some of the images in our Knowledgebase Articles are out of date.  We are working on updating these articles, but note that even if the images are slightly different, the general information is the same.


In this post, we will demonstrate how easy it is to integrate MotionMail countdown timers with MailChimp. If youre reading this post you are likely to have some experience using MailChimp. If not, take a minute to check out their extensive knowledge base on how to get started on creating email campaigns.


MailChimp + MotionMail


Adding a MotionMail timer to your MailChimp email campaigns is straightforward. Its as easy as drag and drop. All you have to do is follow a few simple steps.


Step 1: Create a MotionMail timer


Create a MotionMail countdown timer that fits in your email design.


Use the MotionMail timer builder to create a new timer that fits nicely into the design of your email. If you're not already a MotionMail user, click here to register and get started!


Step 2: Create Your MailChimp Email


IMPORTANT

Note: [Feb 3, 2021] MailChimp has introduced a new email builder, called the 'New Builder'.   If given the choice between the Classic Builder and the New Builder, you must use the Classic Builder.  The New Builder does not have the 'Code' content block, which is necessary to enter your MotionMail timer. 

To set the Classic Builder as your default, please see this MailChimp Help Article - https://mailchimp.com/help/set-account-details/


Click the Big Create button!



Select Email -> and the type of email you are creating





Name your email



Scroll down to the Design Email Button




Select a template:  


Select the option that works best for you: Layout, Theme, Saved Template, Campaign, Code your Own. We will use the Art Newsletter theme in this example.  



Note: [Feb 3, 2021] MailChimp has introduced a new email builder, called the 'New Builder'.   If you are not seeing the same screen here, then you are on the New Builder.  You must use the Classic Builder to use MotionMail timers.

To set the Classic Builder as your default, please see this MailChimp Help Article - https://mailchimp.com/help/set-account-details/




Step 3: Add Your Timer Into The MailChimp Email



On the right side of the screen in the Blocks section you will see the Code Content Block.  Select that block and drag it onto your template





After dropping the Code block on the screen a new area called 'Code' will open up on the right.   

Paste your timer embed code into the code area like this.   (See the image below to see how it will look with a timer)


<div class="mcnImage">
<img src="ENTER_YOUR_CODE_HERE" 
     alt="motionmailapp.com" 
     style="width:100%; height:auto;" />
</div>

If you would like to center your timer, you can include <center> tags as seen in this example.

<div class="mcnImage">
<center>
<img src="ENTER_YOUR_CODE_HERE" 
     alt="motionmailapp.com" 
     style="width:100%; height:auto;" />
</center>
</div>

We have also included code to make the image responsive  (Tip:  Use the embed code of your timer, not the one below!):




Click Save Close in the lower right to save your HTML code.   You will see your timer in the email:





The countdown timer should now show in the template preview and once you've put the finishing touches on your design, the email is ready to be sent off.



Have fun creating great looking MailChimp email templates enhanced with your customized MotionMail countdown timers!

 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article