Countdown Timer Implementation
This will walk you through the necessary steps for adding a countdown timer to your webpage. This is an advanced feature that allows visitors on your main church website to see a countdown and by clicking the link automatically be taken to your Church Online account. A live example for the Life.Church church online countdown has been created here
For this illustration, an event is set to go live daily at 10:00pm for one hour.
- Check that you have spelled your church url correctly at church url variable (i.e var churchUrl = "http://amazingchurch.churchonline.org")
(Please note that if you have a custom url, you will need to use the original churchonline url for this link and not your custom url
This is because the ajax request running may not be able to reach the event through the custom url.)
- Check the browser console
Countdown visible but in the wrong place or in a "weird" looking way
- This is a styling issue and you can view the countdown styling at the css bracets shown in the documentation.
Note: Styling can be done in many different ways as long as it follows css rules. Please check our initial countdown styling to make sure that none of your own custom styling conflicts with the one shown on the documentation. Adjust as needed.
Count down timer is not showing on page
Check to see if you have an event set up. The countdown timer is connected to your event therefore it will not show without an upcoming event.
The countdown timer is built to display errors on the browser console. Please open this console when debugging to see any other errors.
- Common issues include Jquery libry conflicts. If you are using Jquery on your already using Jquery on your site, please remove the library cdn from us.
Jquery version used in this illustration is 3.x snippet. However, the countdown will work with anything from the 1.x snippet. Please ensure consistency of your Jquery versions and only include it once on your page.