Countdown timer for your email campaign

Step-by-step guid to create an email count down timer

Farhan Ali
2 min readOct 13, 2016

There’s nothing like a countdown timer to add a little urgency to an email, especially one promoting an event like an office party or when concert tickets go on sale. This works by taking a PNG and using a PHP script to create a looping GIF counting down to a time.

It takes a flat PNG and super imposes the countdown based on your variables in the PHP script onto it.

Here is the client support:

You will need:

  • Web hosting with PHP support
  • The font you want to use’s font file (eg; Myriad.ttf)

#Setting up the script First of all, download all the files from this link. Add them all to a folder such as Countdown.

Next, you’ll want an image to impose the countdown onto. For this tutorial we’ll use the one that comes with the code:

Open up gif.php in your editor of choice. The first thing you’ll want to change is this:

date_default_timezone_set('Europe/London');

If your timezone is diferent of course.

Next up is:

$image = imagecreatefrompng('images/countdown.png');

When you add more images you’ll need to change this. It appears in the script 3 times

Text control variables. First up, the font size:

'size'=>23, // Font size, in pts usually.

Then the angle of the text:

'angle'=>0, // Angle of the text

As you can see by the comments, it’s the distance from the left hand side. It can be fiddly to get this where you want it.

Then the y-offset:

'y-offset'=>30, // The vertical alignment, trial and error between 20 and 60.

Same as above, but the verticle alignment.

Now to define the font:

'file'=>'./GillSans.ttc', // Font path

This is why you need the font file.

And finally to colour the text:

'color'=>imagecolorallocate($image, 55, 160, 130), // RGB Colour of the text

Adding to an email

Ok, now we’ve got all our variables set up it’s time to generate the image. This is why you needed the web hosting.

Open a browser and go to:

YOURHOST/countdown/gif.php?time=YOUR-TIME-TO-COUNTDOWN-TO

http://development.xm0001.com/nl-countdown-timer/gif.php?time=2016-10-14+12:55:60 Hopefully you can see how it’s working there.

So you take that link and whack it in an image tag to add it to an email, like this:

<img src="http://development.xm0001.com/nl-countdown-timer/gif.php?time=2016-10-14+12:55:60" alt="Countdown" border="0" style="display:block;">

The GIF-encoder tricks the email client into thinking the php link is actually a GIF.

--

--