Introduction
Marketers employ lightning deals, midnight deals, flash sales, limited-time orders, and other time-bound offers to increase website/app traffic. Such emails often use countdown timers (similar to the one shown in the image below) to impress upon users that the clock is ticking and create a fear of missing out (FOMO) emotion to nudge them towards purchasing.
Enabling custom HTML code for the timer requires Javascript, and emails don't support Javascript for security reasons. You can integrate HTML code from 3rd party sources and add such countdown timer elements to your emails.
Create an Email with Countdown Timer
In our example, we are creating the countdown timer using a third-party site, Countdownmail.com.
The website lets us generate the HTML code for the timer that has been created. This code will then be used in MoEngage's Email template.
Create the Countdown Timer
-
-
- Login to the website that facilitates timer creation.
- Click Create a Timer at the top right corner to create the timer.
- Customize the timer - define labels, colors, font size, add background images and links, etc., according to your requirement and click Save Timer at the bottom right corner.
- Login to the website that facilitates timer creation.
-
Generate HTML Code for the Timer
-
-
- You can now generate the HTML code for the created timer by clicking the </>Get Embed Code at the bottom right corner of the screen.
- The following embedding options are available:
-
-
-
- Align - You can align the timer to the page's left, right, or center.
- Size - You can choose whether your timer should be fixed or responsive to the screen size.
- For Retina Display - Some campaigns might be targeted for retina display screens. Enable this toggle to adjust the max width.
- Enable HTTPS - If the timer is displayed on a page that uses SSL, this option is required.
-
-
-
- Click Copy to copy the embed code.
- Add the copied code to your email in MoEngage as described in the section below.
-
Embed HTML in your MoEngage Email Template
-
-
- Create an Email campaign by navigating to All Campaigns -> +Create Campaign -> Email. Choose the desired delivery type.
- In Step 1 of the campaign creation page, add the desired campaign name, target audience segment, and control group, and move to Step 2.
- Choose the email template of your choice and edit in the drag-and-drop editor or upload the template and edit using the custom HTML editor.
In step 2, load the template of your choice in the drag-and-drop editor and customize the template as required.
To embed the copied HTML:
- Navigate to the Content tab of the editor.
- Add an empty row at the desired place in the template.
- Drag and drop the HTML element onto this empty row.
- Click on the HTML element and paste the copied code in the place of "I'm a new HTML block." in the right pane, as shown below. Once the code is copied, the timer element will get added to the email template, as shown below.
- Click Next and add the delivery schedule and delivery controls for the campaign and publish it.
In step 2, choose Custom HTML Editor and upload the template of your choice or copy and paste the HTML into the editor. Once the template loads, add the code for the timer as described below.
To embed the copied HTML:
- Switch to code view by clicking the </> in the editor options bar at the editor's top.
- Add an empty row at the desired place inside the HTML body (<body>). In our example, we've added the empty at the beginning of the template.
- Paste the copied code inside the row (<tr>).
- Click on Code View to go back to the template preview screen.
- Click Next and add the delivery schedule and delivery controls for the campaign and publish it.
-
A preview of the campaign as received in the inbox is shown below.
Now that you've created a countdown timer and sent a campaign with it, head to Email Analytics and Info to see how your campaign is performing.