Getting Started

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 days

Tyler 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 coutdown 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