Step 1: Choose your type of countdown
Add the Countdown Timer section to any Site Page
Open the Timer settings group and configure the settings
Make sure the Enabled option is checked
Choose where you would like to use the Standard (Date Based) timer or the Evergreen (Time Based) timer. See their respective settings below
Select an option for the What should happen when the timer is expired? dropdown
When selecting Redirect to another page, be sure to configure the Redirect Link page
When selecting Reveal & Hide sections option, be sure to follow the necessary additional steps below* for using the Countdown Reveal & Hide section
Select an option for the Who should we enable this for (when enabled)? dropdown
When selecting Enrolled in.. or Not Enrolled in... be sure to also select the Enrolled Product and choose a course, community or bundle
When selecting Everyone, then no additional steps are needed
Step 2: Configure your timer date and time options
Standard Timer (Date based):
This type of timer will expire on a specific day and time.
Open the Standard Timer settings group
Choose the Expiry Date that the timer will expire
Enter the Expiry Time that the timer will expire. This must be in HH:MM AM or HH:MM PM format
Choose the timezone you are entering this information in (the timer will automatically adjust for the users day and time). If you do not know what your GMT offset is, just search Google
Evergreen Timer (Time based):
This type of timer will start when a user visits one of your Site Pages that has the Countdown Timer on. It will then countdown the amount of time based on the Days, Hours, Minutes options.For example:Sammie visits a page on April 1st and the countdown timer is set for 7 days. When she visits the page on April 2nd, the timer will continue counting down from the first visit and show 6 daysTyler visits the same page on April 2nd and for him, the countdown will just beging and he will see that he has 7 days remaining.
Enter the number of days, hours and minutes that the timer will countdown from
Enter a unique ID that will be used for this timer. This not only allows you to use the same timer across multiple pages, but if you put in a new ID, then the timer will restart for everyone. We suggest that you use an online GUID generator to create one
Step 3: Choose your Widget Style
The widget offers multiple style and formatting options for the countdown widget timer to be displayed on your page. You can also optionally add inline text based countdown timers inside of any Site Page section (see below)
Choose if you want the widget to be enabled. When the widget is disabled, the timer will still run if the Timer enabled setting is checked
Choose if you want to Allow timer widget to close. When the user closes the timer widget, it will be removed from the page.
Choose when you would like the widget to appear on the page by selecting an option from the When should we display the widget?
Choose the Type of Widget
Append to the header - this will show the widget above the standard Thinkific navigation header and it will also remain sticky. If your Header is set to Transparent or "Sticky" then the timer will hide the navigation, so be sure to set it to Solid and disable the "Sticky navigation" Header setting
Inline - this will show the widget where the section is placed on the page and the layout be horizontal
Inline (Stacked) - this will show the widget where the section is placed on the page and the layout be vertically centered
Sticky Card (Left or Right) - this will show the widget in a "card" style that floats on the lower left or right of the page
Floating Bar (Bottom) - this will create a sticky floating widget on the bottom of the page
Enter your Heading text to display on the widget. Press the enter key if you want to force a line break
Enter your Button Text and Button Page. If you do not want to use a CTA, then remove the Button Text
Choose an Icon type
None - will not show any icon next to the heading text
Select one of the preloaded icons
Select Custom SVG if you would like to provide the SVG code. If chosen, be sure to copy and paste the SVG code in the Custom SVG Icon setting. We love Icons 8 for all of our SVG's. Download and copy and paste the code here.
Avatar Image (below)
Be sure to upload an image with a square ratio. Recommended 100x100
Choose if you want a border to be applied around the image
Also adjust the Avatar Size if you wish to make it smaller
Enable custom colors if would like to change the style. By default we will use your Theme Settings and specifically the Primary Button colors for the widget style. If you want to choose your own color combinations, then make sure the Use Custom Colors option is chosen and then adjust the colors
Adjust the Padding of the widget if you wish to change the size of an Inline type of widget
Step 4: Add Inline Text Timers (Optional)
The widget is not the only place you can display your countdown timer. You can insert the countdown text (time and labels) in any Site Page section on your page
Open any Site Page section on your page
Go to the setting that allows for basic text entry
Place one of the Countdown Inline Text Timer tags where you would like the timer to appear
<countdown-inline/>will inject the timer text in the same line as the surrounding text<countdown/>will inject the timer text as a "block" and force it to appear on it's own line
Step 5: Adjust your Timer Labels
The timer labels are the text that appears below the numbers in both the Widget and the Inline Text timer. You can adjust the text that is used for each time period
Open the Timer Labels settings group and adjust the text for each time period. There is both singular and plural options
These are meant to be short text- Be sure to check how it appears after making changes
Step 6: Add Countdown Reveal & Hide sections*
When using the Reveal & Hide sections option for the action to take when the timer is expired, you will need to add the Countdown Reveal & Hide section to your page. This will allow your page to change dynamically based on the state of the Countdown Timer.For example, maybe you are doing a "close cart" launch model where you will only allow people to enroll for a certain period. During the "open cart" period, your page could include all sections geared towards selling the course. When the timer expires, you would probably want to hide all of those sections and reveal a "Sorry you missed it" sections that will have a different call to action (Join the waitlist)Another more simple example, would be for using this for sales. You could hide the "sales" call to action sections and reveal the "normal price" call to actions sections.
Be sure you have Reveal & Hide sections option chosen for the What should happen when the timer is expired dropdown
Add a new section to the page and search for Countdown Reveal & Hide from the list of site page sections
Place this section above the section that you would like to have an effect on
Go into the Countdown Reveal & Hide section and choose and option from the How will the next section be effected? setting
Reveal when expired - the next section will start off hidden and then be revealed when the timer has expired
Hide when expired - the next section will start off visible and then be hidden when the timer has expired