Share Image

Adding a Countdown timer to enhance time sensitive offers

Posted on Categories Content Creation, Guides

Adding a countdown timer to enhance time-sensitive offers

Time sensitive offers are one of the most powerful ways to give your sales messages impact. They increase urgency and promote greater impulse purchasing.

Adding a countdown timer to your website would normally be tricky job for a programmer. However Bunting makes it easy for anyone to do it. Whether in a lightbox or as part of a targeted banner, countdown timers can be added anywhere on your website. The syntax to add a countdown timer is as follows:

*|TIMER|end time|expiry message|skin|key|*

There are four parameters that can be passed to the timer. The first is mandatory, while the second, third and fourth are optional. However you can complete all four parameters for good practise. Any parameters you pass must be seperated by|pipe|characters. See below:

*|TIMER|* Parameters

Parameter Description Example
1) end time The value which the timer is counting down to. A numerical value between 1 and 8765 represents a countdown in hours from the time the visitor first sees the timer. 8765 is the number of hours in one year, thus one year is the maximum timer of this type. This timer starts relative to when each visitor sees it. If visitor A first sees the timer 10 minutes before visitor B, then they will also see the timer reach completion 10 minutes earlier. To synchronise two timers together, see parameter 4 – key – below.

Any numerical value above 8765 represents a Unix Timestamp. A Unix Timestamp is a 10-digit number that can be used to identify any time to a precise second. Say you wanted all visitors to see the same countdown to a specific date and time (such as mid-night on New Year’s Eve) you would use a timestamp. This website will let you easily create a timestamp to your needs.

Any other value entered will set the timer to countdown towards midnight of the day it is loaded. Once midnight is reached the timer will automatically reset and start counting down to the next midnight. We recommend you enter the value Midnight to help your code remain easily identifiable.

Countdown 48 hours: *|TIMER|48|*

Countdown to Christmas Day 2013: *|TIMER|1387987623|*

Countdown to Midnight: *|TIMER|MIDNIGHT|*

2) expiry message A message that will be presented to visitors when the countdown timer reaches zero. This can contain HTML. Alternatively, enter “HALT_ACTION“, and the action containing this timer will no longer be displayed to the visitor. For example, a lightbox showing a countdown to New Year’s Eve will no longer show when it gets to New Year’s day. Stops the containing action loading when timer expires: *|TIMER|24|HALT_ACTION|*
3) skin Bunting timers come pre-loaded with a skin (visual design), available in small (S), medium (M), large (L), or extra large (XL). This parameter allows you to define which sized skin you want. Alternatively you can turn the skin off (OFF) and add your own CSS styling (see section below). If omitted the timer will use the medium sized skin (M).

This parameter is irrelevant when the *|TIMER|* is being placed in a Header Bar action. Timers within Header Bars appear as simple text, such as “3 hours and 25 minutes”.

Extra large countdown timer: *|TIMER|24||XL|*

Unskinned timer: *|TIMER|24||OFF|*

4) key This is only relevant to timers where the end time (first parameter, above) is set between 1 and 8765. Keys are a way of syncronising two or more timers. Say you have a 72 hour timer that begins counting down when executed in a lightbox. You may then want to show a second, separate timer with its time syncronised to that of the first timer, also counting down from 72. To do this you give the two timers the same key parameter. If you don’t pass a key then all timers with end time values between 1 and 8765 will count down separately from the time they were first individually loaded. Two syncronised timers: *|TIMER|24||XL|timer1|*

*|TIMER|24||S|timer1|*

Example timers

Extra large timer, 6 hours go to.

*|TIMER|6|Time’s Up!|XL|*

: :
Unstyled timer, Midnight tonight

*|TIMER|midnight||OFF|*

: :
Medium sized timer, New Year’s Day 2015

*|TIMER|1420070400||M|*

: : :
Days Hours Mins Secs
Small timer, now expired

*|TIMER|1262304000|You shouldn’t see a timer here…|S|*

You shouldn’t see a timer here…


Styling a timer yourself

You can easily style a timer yourself with CSS. First, make sure that the third timer parameter – skin – is set to “OFF”. This will remove Bunting’s default skin. You can then add CSS to your own website’s stylesheet to style the timer to however you want it appear. Timer HTML generated by Bunting looks like that below:

<table class="bunting_timer" remaining_seconds="96621839">
	<tbody>
		<tr>
			<td class="bunting_timer-days">02</td>
			<td><span class="bunting_timer_number bunting_timer_number-colon">:</span></td>
			<td class="bunting_timer-hours">07</td>
			<td><span class="bunting_timer_number bunting_timer_number-colon">:</span></td>
			<td class="bunting_timer-minutes">52</td>
			<td><span class="bunting_timer_number bunting_timer_number-colon">:</span></td>
			<td class="bunting_timer-seconds">12</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Days</td>
			<td></td>
			<td>Hours</td>
			<td></td>
			<td>Mins</td>
			<td></td>
			<td>Secs</td>
		</tr>
	</tfoot>
</table>

The ‘days’ countdown, and <tfoot> section with the time annotations of days, hours, minutes and seconds, only appears on timers that are counting down from greater than 24 hours.

Positioning a timer

Skinned or not, all Bunting timers are enclosed in a HTML <table> without a CSS ‘position:’ attribute. Unless your website has generic rule for positioning HTML tables, Bunting timers will normally appear on a new line, separated from text above and below. However, you can enter CSS onto your website, or into each Bunting action, to accurately position timers. This is normally done by entering something like:

TABLE.bunting_timer {
	position:absolute;
	top:50px;
	left:150px;
}

The latter CSS declaration will position the timer 50 pixels from the top of the containing positioned element, and 150 pixels from it’s left position.

Help Request

Can't find the answer to your question?

Contact Us