You can insert two kinds of countdowns: 

  • date countdown timers (time remaining before a specific date)
  • simple countdown timers

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

Create a date countdown timer

Step 1: Open your popup in the editor.

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

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.

Step 4:

Customize the parameters of the URLs 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 but the countdown itself
  • styleClock: allows you to define a style for the countdown

Save your popup.

Create a countdown timer

Step 1: Open your popup in the editor.

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

Step 3: Add the follwing URL in the "iframe URL" field

http://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 to your website:

  • 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 but the countdown itself
  • styleClock: allows you to define a style for the countdown

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/.

Did this answer your question?