The Open Time Content Countdown Clock widget lets you create branded timers that count down to an event and refresh every time the email is opened.
Introduction
There are several countdown clocks templates pre-loaded into your account. You can use these or create a custom clock template, or you can upload your own. If you want to use a branded countdown clock, you must first create a template before creating the campaign.
It is possible to create a countdown clock to match any style, brand or design of your choice. To create a branded countdown timer in Open Time Content, simply create a timer background image for the design you want to use. Make sure to include the timer labels (days, hours, minutes, seconds) in the design. Once you’ve designed the background image you want to use, you can upload it in the template area of the platform and turn it into a clock template.
Here’s an example of a standard timer background image:
Creating a Countdown Clock template
On the Open Time Content page, open the Templates tab and click Countdown Clocks. Here you can see your library of countdown timers.
To create a new template, proceed as follows:
- Click New Template. This opens the image editor.
- Name your template and click in the workspace to display the Object Inspector.
- Upload your background image. You can adjust the size using the Layout controls on the right, but since this scales each axis independently it can distort the image so you should make sure the image is the right size before uploading it.
- You can ensure a high-quality image by uploading an image that is twice the size required and then scale it back in the email HTML.
Adding the timeparts
When your background image is ready, you can add the timeparts, which are the content blocks that show the time units counting down. Proceed as follows:
- Click the Add Timepart icon to place the timepart content block over your image.
- Click the timepart to display the Inspector controls on the right.
- Object Type - Here you define which unit of time the content block will display.
- Circle Clock - This adds a round border to the content block which slowly disappears as the time counts down.
- Layout - Enter the dimensions and location of the text field. Alternatively, you can move and resize it with your mouse cursor.
- Font - Here you define the font size, color and style. You can upload a custom font for Open Time Content on the Settings tab.
- 2D Transforms - Here you can add other styles such as rotate, skew or scale one of the axes.
Align the first timepart on the image and then repeat for the remaining timeparts, making sure to select the correct unit of time for each one.
When you are finished, use the preview toggle to test your design and save your changes to complete the template creation. You can now use this template to create a widget.
Editing Countdown Clock templates
You can edit a Countdown Clock template even after you have added it to a live email. Simply navigate to the template you want to change, make your updates and then save them. However, these will not be pushed through to the widget automatically.
To update a widget with the changes to the template, proceed as follows:
- Navigate to the campaign where the widget is being used and open it with the Edit campaign icon.
- Find the mailing which uses the template and click the Edit tag icon.
- In step 2 of the wizard, activate the Change template checkbox to display your templates and select the one that you have edited. Even if it is the same template, you must select it again.
Unless you are absolutely sure that the template is only being used in one email, we strongly recommend duplicating it and editing the copy. If a template is used across multiple campaigns and you edit the original, unless you reselect the template for every mailing you will soon lose track of which version of the template is used in which email.
Creating a Countdown Clock widget
To create a Countdown Clock widget, proceed as follows:
- In the Open Time Content page, navigate to the campaign you wish to add the widget to and open it, or create a new campaign.
- Click Create new Mailing and Tag and click the Countdown Clock icon to open the wizard.
- Step 1: Give the mailing a name (we recommend to use the same name as the email campaign where you will add it) and click Next.
- Step 2: Add a description and select the template you would like to use.
- Step 3: Add the URL that contacts will click through to, the end date and time for the countdown, and the timezone.
- Click Update preview to see the exact countdown figures for the given end date.
- Click Next to generate the tag and then copy and paste it into your email as normal.
Starting the countdown based on external variables
You can set a Countdown Clock widget to count down to an end time based on the time of sending, or any other variable. This can be used to show an offer valid for 48 hours from email send time, for example, or show an offer valid for 30 days based on the date of registration.
Counting down from a variable event
To set the countdown to start on a variable event, for example the launch time of a transactional email, proceed as follows:
- Create a Countdown Clock template and widget as usual, giving the clock an end date far in the future. The tag you generate would look something like this:
https://img.kickdyn.com/2690/66muQOL9OkVBuKXD1Fff/imgancnt.png- Rearrange the tag in the following format:
https://img.kickdyn.com/imgancnt.png?c=2690.66muQOL9OkVBuKXD1Fff&cntdate=- Now append the placeholder for the variable start time, e.g. the time of send:
#L_YEAR##S_MONTH##S_DAY##HOUR##MINUTE##SECOND# - Then add the number of hours (the number you add must always be in hours) of the countdown to the end of the tag.
- Your result would then look something like this:
https://img.kickdyn.com/imgancnt.png?c=2690.66muQOL9OkVBuKXD1Fff&cntdate#L_YEAR##S_MONTH##S_DAY##HOUR##MINUTE##SECOND#_48Here is an example of a tag that will count down 48 hours from 11:33 on 13th October, 2017:
https://img.kickdyn.com/imgancnt.png?c=2690.66muQOL9OkVBuKXD1Fff&cntdate=20171013113300_48Counting down to a variable end date
You can pull the end date for the timer from a database field, which will be added when the email is opened. Proceed as follows:
- Rearrange your tag as follows:
https://img.kickdyn.com/imgancnt.png?c=2690.66muQOL9OkVBuKXD1Fff&cntdate=$endtime$Where $endtime$ is the parameter for the database field that holds the end date. The format of this field needs to be the same as example above: yyyymmddhhmmss.
- When the contact opens the email, the tag will pull the end date from the database. This is how a tag would look for an event that takes place at 09:50 on 10th February, 2017:
https://img.kickdyn.com/imgancnt.png?c=2690.66muQOL9OkVBuKXD1Fff&cntdate=20170210095000Limitations
- Countdown clocks will tick for 30 seconds by default, and up to a maximum of 70 seconds. After that they stop and must be refreshed before they show the correct time again.
- Countdown clocks do not tick in the Outlook app on Windows machines.
- Countdown clock images cannot be transparent.