03018 – How to setup a Countdown Timer Block

The Countdown Timer Block allows you to add a Countdown Timer anywhere in your Campaign page. Below is an overview of the various Countdown Timer settings.

You get 4 different types of Countdown Timers

Fixed Date

The Fixed Date Countdown Timer counts down to a specific date & time that you select.
By default, this is selected in the Countdown Timer Type drop-down menu.

  • End Time
    Select the Date & Time, when you want to Countdown Timer to stop. Click in the End Time field.
    The Date & Time Scheduler will appear
    Select the specific Date, Time and Time Zone you prefer
    Once done, click on Done
  • Email Countdown Timer
    If you would like to add your Countdown Timer in an email to users, simply copy the Countdown Timer image URL provided and insert the URL in to an HTML tag. It will look similar to this
    datetime=1540656000
    The above parameter represents the date and time you selected for the Fixed Countdown Timer.When the above tag is added to an email, the timer will show in your email and countdown to the exact same date & time as the Countdown Timer on your page.When the timer in your email hits ‘0‘, the word ‘Expired‘ will appear instead of the timer. Then, if users click on the page link in your email, they will be sent to the Redirect page you selected.
Evergreen

The Evergreen Countdown Timer is a repeatable countdown timer. This means that when a user arrives on the page for the first time, based on the timer settings, the countdown timer will start counting down the number of days selected.
In the Countdown Timer Type drop-down menu, select Evergreen.

  • Day
    Select the number of days you would like the Timer to begin counting down from, when users access this page for the first time
  • Hours
    Select the number of hours you would like the Timer to begin counting down from, when users access this page for the first time
  • Redirect To
    Select the page you would like users to reach, after the timer counts down to zero.
  • TIP! If you prefer to use a URL , scroll to the bottom of the drop-down menu and select Redirect to URL, then add the relevant URL in the field provided.
Auto Deadline

The Auto Deadline Countdown Timer is based on the Auto Deadline Widget that you setup in the Boosters section
In the Countdown Timer Type drop-down menu, select Auto Deadline.

  • Select Widget
    From the drop-down, select the Auto Deadline widget you want to link your Countdown Timer to.
  • Redirect To
    Select the page you would like users to reach, after the timer counts down to zero.TIP! If you prefer to use a URL , scroll to the bottom of the drop-down menu and select Redirect to URL, then add the relevant URL in the field provided.
  • Perform this action on redirect
    Select which action you would like applied when users are redirected.
  • Send Webhook
    Add the webhook URL you would like send, when users are redirected Apply Infusionsoft Tag
    From the drop-down, select the Infusionsoft tag that should be applied when users are redirectedTo create a new tag, scroll down to the bottom of the drop-down menu and select Create New Tag. A pop-up window will appear where you can add a new tag to your Infusionsoft Account.Apply Active Campaign Tag
    From the drop-down, select the Active Campaign tag that should be applied when users are redirected
  • Email Countdown Timer
    For details on how to use the Auto Deadline Countdown Timer in your emails, go to
    How to use the Email Auto Deadline Timer Url
Auto Webinar Start

“Auto Webinar Start” timer counts down to the start of your webinar.
In the Countdown Timer Type drop-down menu, select Auto Webinar Start.

  • Select Auto Webinar
    From the drop-down, choose the Auto Webinar that you would like the timer to countdown to.
  • Redirect To
    Select the Auto Webinar page you would like users to reach, after the timer counts down to zero.

The following fields are the styling options for your Countdown Timer:

Style

This feature allows you to customize the look of your Countdown Timer.

  • Size
    From the drop-down, select if you want to display a small, medium or large countdown timer.
  • Language
    From the drop-down, select the language you want your site to use for your timer text labels.
  • Labels Color
    Choose the color you prefer for the timer text labels (i.e. Days | Hours | Minutes | Seconds).
  • Text Color
    Choose the color you prefer for the timer text (i.e. color of the actual timer numbers)
  • Background Color
    Choose the color you prefer for the Timer background (i.e. color of the timer blocks)
Alignment

The feature allows you to reposition the Timer on the page.

  • Align
    You can choose either Left, Center or Right alignment from the drop-down
Spacing

  • Margin Bottom
    This feature allows you to add more space below the Countdown Timer Block
    Simply add the numeric (pixel) value to the field provided.
Options

This feature allows you to use the available options for extra coding (HTML/CSS/JavaScript)

  • Element Id:
    This shows the element id of a specific block, which can then be used by CSS and JavaScript to perform certain tasks for the element with the specific id value. To learn more, please checkĀ here
  • Classes:
    This feature allows is used to define equal styles for elements with the same class name. To learn more, please checkĀ here
Animation

This tool allows you to add animation effects to your Countdown Timer Block.

  • Type
    From this drop-down you can choose a trigger to activate the animation i.e.
    + None = no animation will be applied
    + On Page Load = the animation is triggered as the page loads
    + On Page Scroll = the animation is triggered only when the user scrolls to that section.
  • Style
    This feature adds an animation style to your Countdown Timer Block. Simply choose the preferred option from the drop-down menu.
    + Fade In = the Countdown Timer block will fade in from the background
    + Scale In = the Countdown Timer block scales in from the background
    + Top = the Countdown Timer block will slide in from the top
    + Right = the Countdown Timer block will slide in from the right
    + Bottom = the Countdown Timer block will slide in from the bottom
    + Left = the Countdown Timer block will slide in from the left
  • Delay (ms)
    If you want to add a time delay for when the bullet list appears, simply add the delay in milliseconds e.g. 3000ms will be 3 second delay.
Display

This feature allows you to choose the type of device you want the Countdown Timer block to display.

  • Display
    From this drop-down, you can choose which device you want to display the Countdown Timer block
    + All Devices = the Countdown Timer block will be displayed in both desktop and mobile devices
    + Desktop Only = the Countdown Timer block will be displayed in desktop devices only
    + Mobile Only = the Countdown Timer block will be displayed in mobile devices only

That’s it, click on SAVE CHANGES and you are done!