Landing Page Countdown Widget

The Countdown widget helps you add a countdown timer to your landing page.

In the age and time where people’s average attention span is continuously decreasing, it is particularly important that your landing pages capture the visitors’ attention. A countdown timer helps you do just that!

A countdown timer displays to your campaign recipients exactly how many days, hours, minutes, and seconds are remaining until a specific time and date. Adding an animated countdown timer to your landing pages helps you build buzz and excitement around product launches or upcoming events. It creates a sense of urgency and nudges your customers to signup for your event, buy your products, etc. You can use it in various ways – a timer that counts down to the moment a special discount is valid, or a timer that counts down to the moment you launch a new product, etc.

How to use a Countdown Widget in a Landing Page?

Step 1

Use the Main Menu on the left to create a landing page and subsequently navigate to the landing page builder.

Step 2: Add a Countdown widget to your landing page

The blank area on the left is the Work area where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as widgets.

To add a countdown timer to your landing page, drag and drop the Countdown widget to the work area.

Landing page builder countdown widget

Step 3: Specify the Countdown Type.

As you drop the widget into the work area, the widget Settings are displayed on the right (as highlighted in the screenshot below).

Setting of date and time for countdown in landing page

Use these settings to specify the type of countdown timer that you would like to add.

  • Standard Countdown – Select this option if you would like to display a timer that counts down to a future date and time. Use the field Standard Countdown Timer to specify the date and time to which you want the timer to count down to. As you enter the date and time, the count gets updated in the work area.

    Countdown settings for date and time

  • Daily Countdown – Select this option if you would like to display a timer that counts down to a later time on today’s date. Use the field Daily Countdown Timer to specify the time to which you want the timer to count down. As you enter the time, the count gets updated in the work area.

    Set date for countdown

Step 4: Specify the Countdown Actions.

Countdown Actions refer to the action that you would like to perform at the end of the countdown. Specify if you would want your recipients to be redirected to an external URL or another landing page.

Countdown actions for landing page

Note: This action would be performed only in case the user is viewing the landing page at the time when the countdown ends.

Step 5: Style your Countdown widget.

Styling of landing page countdown widget

Use the options available under the Style tab to customize the widget as per your design preferences:

5.1 Countdown Font settings and Background color

  • Widget Background Color to change the color of the widget background. You can also choose to make this area transparent by checking the box – Widget Background Transparent
  • Countdown Background Color to change the background color of the countdown text
  • Countdown Digit Color to change the color of the countdown digits
  • Rounded Corners sizing bar to add rounded corners to the widget.

5.2 Countdown Text Style

Use the fields under this section to style the text of the countdown widget.

5.3 Countdown Setting

Select the desired alignment option for the widget.

Click Save, and that’s it!  

You have successfully added a countdown timer to your landing page!

Let’s proceed, and have a look at how to add an NPS survey form to a landing page using the NPS Widget!