Countdown timers are a great way to create urgency in your emails and entice your readers to take action. And, with the Zembula platform, you can personalize the timer as well, creating a one to one connection with your reader.
All of the elements of the countdown timer are completely customizable. For this example, we will create a timer for an upcoming webinar. We will be changing the size of the timer, adjusting the placement of the numbers, and adding in some additional content.
Create your image
To begin, navigate to the live image section of the platform and click on the New Universal Image icon.
Name your image and click Create Experience.
Grab the Countdown Timer Template
Next, in the Templates section of the editor, click on Retail and find Countdown Timers.
Drag and drop one of the templates into the artboard area.
Note that there are two variants. The first is the timer that counts down, and the second will replace the first once the countdown has finished. You can customize messaging on that variant to inform your reader that the countdown is over. We’ll cover that a bit later.
Customize the Timer
To adjust the size, click on the dimensions at the top of the variant, and input the new dimensions you would like the variant to be. Click the lock if you want to scale proportionally.
Next, arrange the elements and change their size, color, font, etc. to match your design. You can customize the font, size, color, alignment and placement of the elements. To ensure all elements align correctly, you can use the x and y coordinates to place the images, as well.
Here is our countdown timer with the numbers and days customized. Next, we’ll add in the other elements.
For this example, we will add in a personalized name field to address the recipient directly.
To add a field that passes through first name data from your email list, navigate to the API section of the editor and click the pencil icon at the top right where it says Email Merge Tags.
Click Add New, and then name the tag for use in the platform. You’ll also need to include your ESP’s merge tag for first name, and then you can include a preview value to aid in your design. When done, click the Add button and then close out of that section by clicking on the X in the upper right corner.
To add this placeholder to your image, simply drag the chip onto the artboard. Then, you can add additional text before or after it, by entering it in the Dynamic Text area at the top of the editor.
Again, style and place the text as desired.
Next, we will add a CTA button using a basic shape and text. Click on Elements at the left of the editor and drag the square on to the artboard.
Again, you can customize the placement, fill color, border color, and border radius. Once that is set, we will drag a text block on top of the button and customize that, as well.
Next, we’ll add the URL we want the image to link to when clicked. To do so, navigate to the Rules area at the upper right of the variant. Where you see Image Destination URL, add in the web page you want your image to link to.
Now you’ve completed the setup of your first variant! You’ll want to repeat the process for the second variant, adjusting any of the elements. For our example, we want to let readers know that the webinar has already started if they return to the email after the countdown has ended.
Get the Code
Once everything is customized, click the Publish button at the top right. Then click Export from the Actions dropdown. You’ll see two fields, one for the first name you set up, and the second is for the date and time your timer is counting down to. Input the date and time in UTC format, then click Copy.
Next, simply paste the code block into your email template where you want the timer to appear!
If you have any questions or would like assistance setting up your countdown timer, please email us at email@example.com.