How to add a countdown timer

If you’re running a promo on your website, displaying a countdown timer will help you create a sense of urgency: the timer shows your website visitors that they’re running out of time and they better hurry up if they want to get the deal.

In Getsitecontrol, you can easily add a countdown GIF image generated by a third-party service to your promo widgets.

Follow the steps below to find out how to do that.

1. Create your countdown timer

First, create your countdown timer GIF. In this tutorial, we’re using Countdownmail.com to create our timer. Their server dynamically generates animated GIF images in real time.

Once you finish setting up and designing your timer, save the changes and copy the image source URL:

Copying the image source URL from Countdownmail.com

❗Please, note that you’ll only need the image URL, not the whole code from Countdownmail.com.

2. Place the timer to your widget

If you don’t have a widget yet or want to design a new one, click +Create widget in the Getsitecontrol dashboard.

The +Create widget button in the Getsitecontrol dashboard

Select a template from the Design Ideas gallery or create your widget from scratch. We recommend choosing a template that has an image because you can simply replace the image with the countdown timer.

Here is an example of a template you can grab and tailor to your needs:

When editing your widget, click on the image in the widget preview and hit Change image in the settings:

The Change image button in the image settings

Next, switch to Upload and select From link. Paste the link you copied from CountdownMail into the corresponding field:

Pasting the GIF link into the corresponding field

Click Set and you’ll see the timer on the widget, then press the OK button. The animated GIF timer has been added to your widget.

Next, you can adjust the timer’s size and position using the image settings.

Adjusting the image’s size and position on the widget

In our example, we have applied the following changes to the image settings to make the countdown timer fit perfectly into our widget:

  • changed the Fit settings to ‘Contain’
  • reduced the overall width of the timer
  • pushed it slightly to the bottom and to the right.

❗Feel free to tweak the image settings however you prefer to position the timer exactly where you want it to be, but make sure to select ‘Contain’ to display the whole timer on the widget.

Click Save & Close once you finish editing.

Done! As the server dynamically generates the GIF image in real-time, every time a visitor sees the widget on your website, they’ll see an updated GIF image of the timer.

If you face any issues while adding a countdown timer to your widget, do not hesitate to reach out to our tech Support team.

Browse by category