Animated timers are a great way to drive urgency. Reignite supports both countdown timers that countdown to a specific date and time, or countup timers where the timer increases each second by the start time.
Each time the recipient opens the email a the timer is refreshed and the timer starts animating.
In this example we are going to create a simple timer that counts down to a specific date.
Step 1: Create a New Image
To start we choose the 'NEW IMAGE' option from the main menu available top left of the platform.
On the next screen give the image a name and then select the the ‘Timer’ data source.
Select whether you want to use our template, upload a background image to work from or start with an empty canvas
In this example we are creating an image using the template. Select 'CREATE IMAGE' to be taken to the editor.
Step 2: Adjust Settings
The first thing to do when creating a new image is to adjust the settings in the panels on the left hand side of the screen as desired.
Settings Panel
Image Name
This is the name of the image you can change at anytime.
Labels
Labels are handy words you can assign to the image to help you search for it later. Use the enter key to save each label and add as many as you wish.
Lock
Once you have finished editing the campaign and you are ready to send an email using this image we recommend locking the campaign from further changes to prevent accidental edits as these will show immediately in any images viewed by your customers.
Canvas Panel
Choose canvas size
The width and height of the canvas is set in pixels. You can change this at anytime. Changing the width will add or crop the canvas on the right hand side, while changing the height will add or crop from the bottom of the canvas.
The width of the canvas should be the same as the desired width of the image in your HTML email template.
Background Colour
Choose a hex colour using the picker or by entering a value here. The background colour will now change. If you have a background image covering the entire canvas you won’t see the background colour.
Links & Fallback Panel
Link
Enter the URL where you would like to take anyone clicking on the timer.
Fallback Link
This is not required for timers.
Fallback Image
By default for countdown timers the end image will show there are 0 seconds to go (For example 00:00:00:00) when this time has elapsed. If you would rather change this to a different image after time has elapsed such as one stating ‘Offer has expired’ choose to load this here. You can upload either via a file or enter a URL.
Preview Values
In the Preview panel we can add example values to allow us to see what the timer will look like and how it will function.
Type: Choose from Countdown or Countup timer types. Countup timers will never end, however they will show 0 seconds if the timer date is in the future.
Add Hours: For most people this will be left at 0 if you are using the timer for a fixed end date of a promotion or perhaps an event. However If you wish to use a timer in a triggered email to create urgency you can merge in the end date with a tag from your email platform. Most email platforms only allow you to add plan to use merge tags from your email marketing platform to merge the end date into the timer, and the only option here is to add the email send date then you can specify a number of hours here to add onto the end time. This is really useful in trigger emails where the end date will change everyday.
Timer Date: Use the date and time picker to select the end or beginning date of the timer. We can change this or make it dynamic for each recipient later.
Timezone: Choose the timezone for the timer. By default this will use the timezone in your account settings. Again you can make this dynamic per recipient by merging this value into the tag instead later.
Creating our image in the canvas
Next, we can start editing our timer.
For most timers they will consist of a background image, the animated time parts, and the labels for these time parts.
For this simple example in the template we already have the elements of a text box containing the merge tag for the time to go and a text box for the labels. The colour is defined as the background colour of the canvas, however you could choose to add an image as the background as well.
If you switch to preview you will see the format of the timer is currently DD:HH:MM:SS:
If you wish to change the time format you can build the time in its various parts. This also allows you to have more control over the placement of each part where you have a more intricate background image which requires the numbers to appear in a specific place.
To change the merge value right click on the box and select 'Insert merge field'
These are the options available to merge in:
Field | Description |
| FULL DATE | |
| Days, Hours, Mins & Secs | As per the template example of 00:00:00:00, will always use leading zeroes for numbers under 10 |
| Hours, Mins & Secs | As above but without days |
| DAYS | |
| Number of days | Will show this as a whole number with no leading zero |
| Number of days 2 digits | Will add a leading zero where days is less than 10 (E.G. 03) |
| First digit of days | Will show the first digit where >9 days (E.G. 1 for 14 days to go) |
| Second digit of days | Will show the second digit (E.G. 4 for 14 days to go) |
| HOURS | |
| Number of hours | Will show this as a whole number with no leading zero |
| Number of hours 2 digits | Will add a leading zero where hours is less than 10 (E.G. 03) |
| First digit of hours | Will show the first digit where >9 hours (E.G. 1 for 11 hours to go) |
| Second digit of hours | Will show the second digit (E.G. 4 for 14 hours to go) |
| MINUTES | |
| Number of days | Will show this as a whole number with no leading zero |
| Number of days 2 digits | Will add a leading zero where days is less than 10 (E.G. 03) |
| First digit of days | Will show the first digit where >9 days (E.G. 1 for 14 days to go) |
| Second digit of days | Will show the second digit (E.G. 4 for 14 days to go) |
| SECONDS | |
| Number of days | Will show this as a whole number with no leading zero |
| Number of days 2 digits | Will add a leading zero where days is less than 10 (E.G. 03) |
| First digit of days | Will show the first digit where >9 days (E.G. 1 for 14 days to go) |
| Second digit of days | Will show the second digit (E.G. 4 for 14 days to go) |
When using multiple text boxes for different parts of the time remaining we recommend you center align text in the box for accurate placing. While editing the merge tag will take up more space than the merged numbers so its often easier to make adjustments in preview mode.
Add any formatting such as changing fonts, colours and sizing to the numbers, and position as you require on the design.
Note: Character spacing, transparency and drop shadows are not supported on timer values but are on other objects within a timer image.
Repeat the same for any labels. In this example we have placed all the labels for days, hours, minutes and seconds in a single text box, using spaces to align them. However for more intricate designs, or where you have separate boxes for each time element we recommend individual text boxes for each.
If you are not already in preview mode switch into this to see the merged design. This won't animate like the finished image will.
Add the tags to your email template
Once you are happy with your timer click on ‘Generate Tags’ top right to open up the dialog.
On the first open of this dialog you will see it has pulled into the ‘Configuration’ section your preview values.
In this example we don’t want to change these, but you can update the values here each time you want to use the same timer format but a different end or start time. This saves you from having to create many different timers.
A typical change here might be to add a different end or start time for each recipient by merging into the tag a piece of syntax from your email marketing platform that contains the date. When doing this ensure the date will be formatted in one of these formats:
YYYY-MM-DD HH:MM
YYYYMMDDT0800
Mon, 06 Mar 2017 21:22:23
See https://momentjs.com/docs/#/parsing/string/ or ask our support team for more assistance.
The timezone can also be merged in, and must be in the 'Region/City' format. The available dropdowns
Under URL tracking you can add any UTM or custom parameters if you are planning on linking the countdown timer.
Under 'Customise tag' the identifier field is a piece of syntax you get from your email provider that identifies the individual opening the email. This could be the email address, or a customer ID. This ensures we can report on unique impressions.
Under the ‘Your Tag’ you will now see the HTML to copy and paste to your email template – use the copy button provided to ensure the whole tag is copied correctly.
The preview image will be showing you a live animated timer in action.