Embeddable Countdown Timer

You can embed a countdown timer on your church website so visitors see a live countdown to your next service. The timer automatically pulls from your Church Online schedule—no manual updates needed.

Before you begin

Download this countdown timer file: countdown-timer-example.txt

Step 1: Preview the timer

  1. Locate the downloaded file on your device.
  2. Drag and drop the file into a web browser (or go to File → Open File and select it).
  3. You should see a live countdown timer for Life.Church's online services. That's the timer working—now let's make it yours.

Step 2: Edit the file

  1. Open the file in a text editor.
    • Mac: Right-click the file → Open With → TextEdit
    • Windows: Right-click the file → Open With → Notepad
  2. Find the line that includes lifechurch.online.church. The file includes comments to help you find it.
  3. Replace lifechurch.online.church with your church's Church Online URL (e.g., gracebcnj.online.church).
  4. Save the file.

Step 3: Confirm it works

Drag and drop the updated file into a browser (or use File → Open File) and confirm the timer is now counting down to your church's next service.

Step 4: Embed on your website

Once confirmed, embed the file on your website. This works with any platform that supports HTML.

  • WordPress: Add an HTML block where you want the timer to appear.
  • Squarespace: Use a Code Block for the content, and Advanced → Code Injection for the script.
  • Wix: Use the HTML embed widget.

How it works

The countdown pulls your next service time directly from your Church Online schedule. As long as services are scheduled, the timer updates automatically.

Need inspiration? Here are a few churches using the countdown timer on their sites:

Platform-Specific Tips

WordPress

  • Create an HTML block on the page where you want the countdown to appear.
  • To add the countdown JavaScript to the header of your page, you’ll need a plugin. We recommend using Header and Footer Scripts for WordPress.
  • Once installed, paste the JavaScript into the header section and be sure to wrap it with <script> and </script> tags.

Squarespace

  • Use a Code Block for the <div>
  • Use Advanced → Code Injection for the <script>

Wix

  • Use the HTML embed widget and paste both parts together


How did we do?


Powered by HelpDocs (opens in a new tab)