Litmus logo color
Litmus logo white
  • Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Discussions
  • Snippets
  • Templates
  • Jobs

2019 State of Email workflows: How long is your email production cycle? Benchmark your email workflow with insights from 3,000+ email marketers.

Download report

    How to: Add a Countdown Timer to your Email

    • Posted by Alex Ilhan

    What we'll be making

    right gif We'll be making a nice little GIF like this that counts down to a specific date. This can help create a sense of urgency for events or product offers you may be using email for.

    How it works and support

    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.

    When a user receives it in their inbox, they'll see it loop for 1 minute and reset. However, if they leave the email and return it will have adjusted to countdown again. The likelyhood of a user watching it reset is very low. Here is the client support:

    Client Displays Image Counts down
    AOL YES YES
    Gmail YES YES
    Yahoo! YES YES
    Outlook.com YES YES
    Thunderbird YES YES
    Outlook 02/03 YES YES
    Outlook 07/10/13 YES NO*
    Outlook 2011 YES YES
    Apple Mail YES YES
    iPhone YES YES
    Android YES YES

    * Displays first frame of animated GIF only.


    What you'll need

    You will need:

    • Web hosting with PHP support
    • The font you want to use's font file (eg; futura.ttc)
    • A bit of patience to get it working
    #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: image save this in the images folder.

    Now, this is where it can get a tiny bit scary. Don't worry, we'll get through this! Open up gif.php in your editor of choice. A lot of the code here you don't need to worry about and I have added comments to help you with the parts you do.

    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');
    

    For the sake of this tutorial we'll leave that as it is for now, but when you add more images you'll need to change this. It appears in the script 3 times

    Now is the important part, the variables that control the text style. Lets run through them one-by-one.

    First up, the font size:

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

    Unfortunately, as this is a PHP script we don't have huge control over font size. You'll just have to get as close to what you need as possible.

    Then the angle of the text:

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

    I'm guessing most of the time you'll leave this at 0, unless you're doing a crazy angled banner or something.

    Now the x-offset:

    'x-offset'=>7, // The larger the number the further the distance from the left hand side, 0 to align to the left.
    

    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
    

    RGB values are simple, right?

    Boom, we're done! Move on to the next stage, adding your image into an email.


    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
    

    Confusing right? No! Here is an example:
    http://mosaichosting.co.uk/countdown/2/gif.php?time=2014-12-25+00:00:01 - This will countdown until Christmas 2014. 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://mosaichosting.co.uk/countdown/2/gif.php?time=2014-12-25+00:00:01" alt="Countdown" border="0" style="display:block;">
    

    But Alex, you can't use that PHP script as an image src in email!!!

    Actually, yes I can. The GIF-encoder tricks the email client into thinking the php link is actually a GIF. Pretty cool eh?


    Get in touch

    If you have any questions post them here on Community or send me a tweet

    • Avatar of Michael MuscatMM
      Michael Muscat said:
      How do you get around image caching in Gmail?
      Edit | Delete
    • Avatar of Alex IlhanAI
      Alex Ilhan said:
      If you test it, you'll see it works fine. The image is generated by the script so each time you reload the email it reloads the image with a new cache.
      Edit | Delete
    • PB
      Paul Barton said:
      Hey Alex, great post. Enjoyed the read. Come across this post as we, http://motionmailapp.com, use Litmus to test our email count down timers. We are an interesting option for anyone who does not have the technical chops to build their own from scratch.
      Edit | Delete
    Login to leave a comment
    Litmus Logo
      Company
    • Team
    • Customers
    • Careers
    • Contact
    • Brand
      Product
    • Features
    • Pricing
    • Enterprise
    • Extension
      Tools
    • Events
    • Labs
    • Scope
    • Resources
      Help
    • Knowledgebase
    • Status
    • Community
    • Trust
    Subscribe to our emails

    Copyright © Litmus Software, Inc. 2005-2019. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

    Sign in to Community

    Are you new to Litmus Community?

    Create a Free Litmus Account

    Use your existing Litmus login to connect with the world’s most amazing email designers.

    Having trouble signing in? Try Forgot password

    Join the Litmus Community

    Sign up to Community

    Already have a Litmus login? Sign in

    Get more out of your Litmus account

    Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

    • Email Previews

      Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

    • Builder

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Checklist

      Get screenshots in popular email clients to ensure your email looks great everywhere.

    • Code Editor Integrations

      Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

    • ESP Integrations

      Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

    • Spam Testing

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Email Analytics

      Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

    • Private Litmus Teams

      Get full team visibility. Manage Litmus access and monitor usage across private teams.

    No thanks, just sign me up without a trial

    Forgot password

    Enter your email address to reset your password

    Already have a Litmus login? Sign in