Insert a Countdown

Lisa Fockens Updated by Lisa Fockens

OUTDATED. We now have a built-in countdown block

You can insert two kinds of countdowns into your Wisepops popups:ย 

  • Date countdown timers (time remaining before a specific date)
  • Simple countdown timers

In this article, we'll share the methods to add both types of countdown.

Create a date countdown timer

Step 1: Open your popup in the Wisepops builder.

Step 2: In the left menu, click Blocks and drag and drop an iframe block into your popup, as shown below.

Step 3: Add the following URL in the iframe URL field:

https://app.wisepops.com/static/countdown/index.html?endDate=2020/08/03%2014:30:00&sentenceBefore=There%20is&sentenceAfter=left%20before%20the%20deadline.&styleAll=font-family:%20Arial;text-align:center;color:%235e5e64&styleClock=font-weight:bold;color:red

Adjust the height of the iframe to suit your design.

Step 4:

Customize the parameters of the URL to adapt the countdown to your website:

  • endDate: The deadline
  • sentenceBefore: What you want to include before the countdown (please reformat it using this tool:http://meyerweb.com/eric/tools/dencoder/)
  • sentenceAfter: What you want to include after the timer
  • styleAll: Allows you to choose the style for everything in your countdown except the countdown timer itself
  • styleClock: Allows you to define a style for the countdown timer

Save your popup and you're done!

Create a countdown timer

Step 1: Open your popup in the Wisepops builder.

Step 2: In the left menu, click Blocks and drag and drop an iframe block into your popup.

Step 3: Add the following URL in the iframe URL field:

https://app.wisepops.com/static/countdown/index.html?timeout=0000:45:00&sentenceBefore=You%20have&sentenceAfter=left%20before%20this%20deal%20expires.&styleAll=font-family:%20Avenir;text-align:center;color:%235e5e64&styleClock=font-weight:bold;color:red

Customize the parameters to adapt it for your popup:

  • timeout: Your delay (format: HHHH:MM:SS)
  • sentenceBefore: What you want to include before the countdown (please reformat it using this tool:http://meyerweb.com/eric/tools/dencoder/)
  • sentenceAfter: What you want to include after the timer
  • styleAll: Allows you to choose the style for everything in your countdown, apart from the countdown timer itself
  • styleClock: Allows you to define a style for the countdown timer

Save your popup.


If you're in a hurry or want more design options, you can also use a third-party solution such as https://www.sendtric.com/.

Not seeing your popup on your website? Try these tips.

How did we do?

Contact