The timer item allows you to add countdown timers to your pages. The timers can be set to trigger different actions when the countdown hits zero, like showing a popup, hiding or showing sections of your page, redirecting the user and more. Below we will go over the two different ways to customize your timers, with the 'Page Timer Settings' and the 'Timer Styles.'
You can add timers to your page by adding a 'timer item' to any block, or adding a 'done-for-you' section that includes a timer on to your page.
In This Article
Page Timer Settings
All timers on an individual page will 'listen' to the overall Page Timer Settings. Meaning, you can set the timer settings in one place, and every specific timer you add to that page, will use those settings!
NOTE: The timer 'styles' (or design) can be customized for each timer item.
You can access the Page Timer Settings by either clicking on the blue button at the top of the individual 'timer item' settings sidebar, or under the 'Page Settings' tab in the sidebar control panel.
The countdown option allows you to choose what type of timer you want to use. You can choose between a specific date (for example an event or deadline) or a specific period of time (like 30 minutes). Based on your choice here, you will see different options.
This is pretty simple. Choose the date, time and timezone you want the timer to countdown to
Specific Period of Time:
Select the days, hours and minutes you want to timer to countdown for
Timer Reset - Here you get to select what happens when the timer expires:
Keep timer expired: This will keep the timer expired indefinitely.
Reset timer on every page visit: This will reset the timer on every page visit, even if the user has been there before
Keep timer expired for time period: This setting will keep the timer expired for a certain amount of time, but after that amount to time it will reactivate for that user.
The expire action tells the page what to do after the timer expires. You can choose what will happen on the page when the timer expires, as well as what happens to the display of the timers themselves.
The expire action allows you to choose what will happen on the PAGE when the timer expires. Let's go over the options below
Business Center Page: Redirect the user to a specific page in your business center
Show Timer Popup: This will trigger the specific 'Timer Popup' on your page which is completely customizable. You can also set this popup to be 'un-closable' so it can potentially hide the page when the timer expires. The timer popup settings can be access from the Sidebar Control Panel. (Note: The timer popup settings will only be available when a countdown option has been set)
Go to URL: Redirect the user to a specific external URL
Go to Checkout Cart: Redirect the user to a specific checkout cart you've created in your business center
Go to Digital Download: Redirect the user to a specific 'digital download' file you uploaded to your business center
Timer Expire Settings
The 'timer expire settings' will tell the PAGE what to do with the timer item itself. Depending on your expire ACTIONS, this may or may not be important to you. Let's go over these options below:
Hide Timer: This will hide the entire timer item
Display Message: This will display an optional message in place of the timer. You will be given a limited text editor to create this message if you choose this option
Show Elapsed Time: The timer will begin counting UP to show the elapsed time
Section settings allow you to hide or show specific sections on your page when the timer expires. This can be very useful for many reasons. You may want to 'hide' the offer section after a deadline, and 'show' an expired 'wait-list' section. You may want to show an offer after a specific amount of time has been spent on the page. You have 3 options for each section:
None - Section will do nothing after the timer expires
Hide - Section will be hidden after the timer expires
Show - Section will start out hidden and will be shown after the timer expires
Unlike the page timer settings, Timer Styles can be customized for each timer you have on the page. These settings will customize the actual look and feel of the timer.
Choose between Boxed and Panel. a 'Boxed' look will add background boxes to each group of numbers, like minutes and seconds. A 'Panel' look will add a background box round the entire timer.
This setting allows you to change the font of the timer. Choose between 'condensed' and 'normal.'
You can change the number color, background box color and the label color (If you choose to show the labels in your timer, you can turn them on, and the words for example Days, Hours, Minutes will show up under their corresponding numbers.)
The maximum height of the timer can be set so that, regardless of how big the section or block is, the timer can never be above this maximum height. It's a good way to control how big the timer can be on the various device views.
Group spacing allows you to control the space between each of the sets of numbers. Increasing the group spacing will make the timer wider overall.
Group Spacer Icon
You can choose to show 'spacer icons' between the groups of numbers to better distinguish between the numbers themselves. You can choose to have them off, or add circle icons to the timer.
Use Number Flip Animation
This option, when turned on, will add a 'flip' style animation that will make the timer look more 3d. This setting is off by default.
The display settings allow you to control when the 'Days' and 'Hours' groups are shown. If left to automatic, they will only be shown when there are days or hours left in the countdown. For example, if there are only 23 hours left in the countdown, the 'Days' group will not be shown, as it would read '00'.
You can set these options to 'Always Hide' or 'Always Show' depending on the look you are going for with your timer.