Countdown timers are an attractive feature you can place in your emails to draw the attention of your customers to certain dates, such as Black Friday. This article explains how to create a timer which counts down time to 7 a.m. on Black Friday.
Add a timer to your design
In the Message Builder, drag the countdown timer tile to a block in the design then click on the Configure Timer button to continue.
Click on event date and select November 27th from the calendar. Then select 7 a.m. from the list in event time and the time zone for the event.
In the example it's UTC+1:00, which covers most of Europe at this time of the year.
The timer is already working, measuring time towards Black Friday.
The size of the timer image is provided to help you include it in your design, e.g., by cutting the surrounding images.
Besides Event Date/Time, the countdown timer provides a number of options which can be used to change its appearance.
- Basic Options – enables changing the shape, size and color of the timer font. The default font is "timer blocks" that looks like black blocks with numbers. You can also change the background color and image (you will be asked to drag the image into an area in the screen).
- Expiration Image – allows you to drag an image that will be displayed after the countdown has ended.
- Stroke and Drop Shadow – These options add effects to the timer fonts. Stroke adds a contour around the timer digits. You can select the width and color of the contour. Shadow adds a shadow effect. "Distance" sets the size of the shadow, and "softness" how blurred it is. The "apply to labels" options adds shadows to the "days", "hours", "minutes", and "seconds" labels.
- More Colors – enable selecting a color for labels and a separate color for each pair of timer digits: hours, minutes, etc.
- More – Here you can change the language of the timer and the case and size of the labels. You can also show and hide the labels and the digits for days. Enter a number greater than 0 in "padding" to increase the distance between the numbers in the timer. If you want to see a different character than a colon (":") between the numbers, change it in the "separator" field.