How to add a timer to my landing page?

You can add a timer to your landing page to count down to a specific future date. You can also set up an evergreen countdown. It will count down from a moment your visitors open the page and trigger an upsell redirection. This is a great way to advertise a sale, upsell or build anticipation for an event. It helps create a sense of urgency to encourage potential contacts to sign up to your list.

timer

Adding a timer

  1. In the landing page editor, click on the Add elements button.

    landing page add element

  2. Drag and drop the Timer element into your page content. Note that the editor will highlight the spots where you can drop it.

    add timer

Setting up the countdown

You can choose between two types of countdown in the Type section: Evergreen or Fixed date.

timer set


Here are the options for each type:

  • Evergreen
    • Countdown duration – set length of time of the timer in days, hours, minutes and seconds.
    • Format – choose units of time that will display in your timer
  • Fixed date
    • When does the countdown end? – select the date and time by typing or using the calendar and clock widgets.
    • Time zone – choose the timezone you want to sync the timer with.
    • Format — choose units of time that will display in your timer.

Timer’s design

Click on the timer to open the settings toolbar.

  • Counter design – You can customize font type, size, style, and color, select the background color, and set up padding, border and radius.

    counter design

  • Label design – Select the font type, size, style and color of the timer’s labels.

    label design

  • Block settings – the timer block is a framed workspace around your counter with a Timer label on the left. You can only see the frame after clicking on the object. It won’t be visible on your landing page. You can customize its color, padding, border, radius, and shadow.

    block settings

  • Absolute positioning – enable this option to place the timer in any place on your landing page. We only recommend using this option if you have some unusual design that can’t be created in any other way. Using objects with absolute positioning can make your page less responsive on mobile devices. You can find more information about this feature here.
  • Hide on mobile devices – enable this option to hide your timer when your page is opened on a mobile device.
Steps for legacy landing pages

To add a countdown to your legacy landing page:

  1. Open the Landing Page Editor.
  2. From the toolbar, select Countdown and drag it to the workspace.
    Countdown timer icon
  3. Click the element and choose Customize.
  4. Set up countdown timer and customize the upsell URL.
    Countdown setup
  5. Choose the time zone for the countdown.
  6. Confirm your settings by clicking Save.

If you want to customize the look of the countdown, double-click the specific element you want to change. You’ll see the options to change the font, font color, background color, and set bold, italics, underscore or strikethrough for the text.

Click back on the workspace to confirm your changes when you’re done.

What happens when the countdown ends?

Standard timer countdown

Once the countdown ends, the timer will stop, but your landing page will stay active. The end of the countdown doesn’t stop contacts from signing up to your list. For this reason, it’s a good idea to sort them based on their subscription method and date. This way you’ll see who signed up before and after the countdown ended.

Evergreen timer countdown

After the countdown ends, a visitor can stay on the page or get redirected to another page of your choice.