1. Home
  2. Postcards
  3. Integrations
  4. How to Add a Countdown Timer in Email Template using Sendtric and NiftyImages
  1. Home
  2. Postcards
  3. Online Editor
  4. How to Add a Countdown Timer in Email Template using Sendtric and NiftyImages

How to Add a Countdown Timer in Email Template using Sendtric and NiftyImages

In this tutorial, we’ll be creating countdown timers in Sendtric and NiftyImages, adding them to an email template in Postcards, and changing the size of the counter using code.

Prerequisites

  • A Designmodo account
  • A Sendtric account
  • A NiftyImages account

Video Version

Steps

1. Create an email template in Postcards with a text field

The first thing we need is an email template in Postcards. Create a template in the Postcards app and make sure you have a UI piece that has a text field in it. The text field is important because this is where we’ll be adding code.

The template I created is just a “Content 6” piece:

How to Add a Countdown Timer in Email Template using Sendtric and NiftyImages

If you click the middle template image, that’ll open the customization options for the template element. In it, we want to customize the “Post Text” option like in this image:

Create an email template in Postcards with a text field

2. Create a countdown timer in NiftyImages

Go to NiftyImages and after you’re logged in, go to create a new image and select “Countdown Timer” like in this image:

Create a countdown timer in NiftyImages

Choose any timer you want and then it’ll take you to a page that looks like this:

Choose any timer

After you’re done customizing your timer options, press “Save” and then name your timer. When you’re done you should see a page that looks like this:

Customizing your timer

The “img” element is the countdown timer that we’ll be adding into our Postcards template.

But first let’s create another timer using Sendtric.

3. Create a countdown timer in Sendtric

Go to Sendtric and on the home page you should see a form to create a free timer.

Fill out the form and then press “Generate.” You’ll see your timer on the same page like this:

Create a countdown timer in Sendtric

Now we have both timers to add to our Postcards template.

4. Add the img elements to the Postcards template

Back in the Postcards app, click the “Post Text” and then “Tools” and then “Source Code” like below:

Add the img elements to the Postcards template

That’ll open up a text editor where you can add HTML code to it. Replace the contents with either of the timers you just created (they’ll both work in the same way) and then press save.

Your screen should look like this:

Source Code

Then your template should look something like this:

Countdown timer into your email template

And there you go! You just added a countdown timer into your Postcards app.

5. Edit the code to change the size of the timer

If you want to change the size of the timer you just have to add in some CSS code to the img element.

Currently, the img element looks something like this:

<img src="https://img1.niftyimages.com/38c/53wh/dfao"  />

We have to add a “style” attribute with some CSS properties to it, namely: display, width, and height.

Display should be set to “block.”

Height should be set to “auto.”

Width should be set to whatever you want your width to be. You can set the exact pixel width like “500px” or set a percentage like “50%.” Experiment with different width settings until you’re satisfied.

The new img element should look something like:

<img style="display: block; width: 50%; height: auto;" src="https://img1.niftyimages.com/38c/53wh/dfao"  />

With whatever width setting you choose.

What we covered

  1. How to create a template in Postcards.
  2. How to create a countdown timer in Sendtric and NiftyImages.
  3. How to add the img element in a Postcards template.
  4. How to edit the img element to change the size.
Updated on January 22, 2020
Was this article helpful?

Related Articles