Before you begin
Make sure you have installed the app.
You can now add a Countdown Timer directly from the communications and transactional editor.
To create new communication, follow this path:
Journey Lab > click on the Create button > communication
Inserting the Countdown Timer
In every box designated for image upload, you can insert a Countdown Timer.
Remove the default image to add a new one.
On the Upload Media selection page, you will find the "Create a Countdown" button that allows you to choose and configure the Countdown to add.
Configure the remaining countdown time
-
Internal name:
This is the name of the Countdown. It is for internal use only and will not be visible to your contacts. -
Type:
You can choose between:- Set a fixed date:
in the Date and time of the deadline field, enter the date and time when the countdown will end. When the date is surpassed, 00:00:00 will be displayed. If the duration exceeds 100 days, 99:99:99 will be displayed in this field. -
Calculated expression:
The countdown's expiration will be the value saved in a contact field (which may thus differ for each of them). To select this value, you can enter the expressioncontact.values.DATETIMEFIELD
whereDATETIMEFIELD
is the name of the field where the value is stored. For example, you can calculate a value equal to 7 days before the date saved in theDATETIMEFIELD
field by using the expressionfn.dateadd(contact.values.DATETIMEFIELD,-7,'day')
.
- Set a fixed date:
-
Style
You can use one of the predefined graphic styles for your Countdown, choosing from:
-
Clock:
-
Boxes:
-
Bubbles:
-
Candy:
-
Clock:
Customize the style
Modify the look of the countdown by configuring the following parameters in the Style tab:
-
Font
changes the font of the Countdown -
Font size:
changes the font size of the Countdown -
Use a transparent background
recommended for dark mode compatibility -
Background:
choose the color to display as the background by entering the hexadecimal code in this field or by clicking the color selection box.
You can also apply a transparent background by enabling the Use a transparent background option. -
Primary color:
changes the base color of the Countdown; -
Numbers:
changes the color of the digits of the Countdown; -
Text:
changes the color of the text elements within the Countdown;
In the Text section:
-
Text
changes the position of textual elements (days, hours, minutes, seconds) relative to the digits of the Countdown.
The text can be: Under the numbers, Above the numbers, or Do not show. -
Show:
choose whether to display all the digits of the Countdown (Days, hours, minutes, and seconds) or only some of them.
If you choose to display seconds as well, the Countdown will appear as an animated GIF where seconds tick dynamically.
If you enable the transparent background at the same time, certain details of the Countdown might not display correctly. We recommend checking the preview before adding the Countdown. -
Text Days/Hours/Minutes/Seconds:
modify the labels Days, Hours, Minutes, and Seconds displayed within the Countdown. -
Number of seconds:
the GIF generated when choosing to display seconds contains an image for each second (entered in a different frame). The more seconds to show, the larger the final size of the GIF.
Once you have completed the Countdown configuration, click Create at the bottom right of the page.
You will see the page showing the Countdown image properties, which you will then need to include in your communications.
Use of the expiredate parameter
By modifying the communication code, you can add the expiredate
parameter to the URL of the Countdown image, which contains the final date of the Countdown itself.
[image:countdown_1558693205375.png from=newsletter w=273 h=64 url.expiredate='1420123803000']
With the expiredate parameter, it is possible, for example, to set the expiration of the Countdown a few days after the date of sending the Communication.
First, calculate a variable (in the example temp.expiredate
) whose value will be the message dispatch date, plus 3 days, formatted as Unix timestamp:
<meta mn:tempvar mn:name="deliverydateplus3" mn:value="fn.datetostr(fn.dateadd(message.deliverydate, +3, 'day'),'unix_timestamp')" />
The created tempvar will then be set as the value of the dynamic Countdown image (in the example: countdown_1558693205375.png):
[image:countdown_1558693205375.png from=newsletter w=273 h=64 url.expiredate=temp.deliverydateplus3]