Are you using LifeChurch's Online Church Platform? They offer a great countdown widget that you can access and add to your webpage, but unfortunately, it doesn't work on a Rock powered website (at least not for me). 

Desiring to have the countdown we rocked there code. 

To add the countdown to your Rock site:

  1. Add a new HTML block to the page you desire the countdown on. 
  2. Inside the block settings allow "webrequests". 
  3. Enter the HTML below updating everywhere that says "[YOUR Church Online URL]" to your church's unique URL. 
  4. Celebrate. 

<style type="text/css"> .countdown{ background-color: #323232; background-position: center; background-size: cover; color: #fff; Padding: 20px 20px; text-align: center; } .CoundownTime { } </style> {% webrequest url:'[YOUR Church Online URL]/api/v1/events/current' %} {% for item in results %} {% capture isLive %} {{ item.response.item.isLive }} {% endcapture %} {% capture eventStartTime %}{{ item.response.item.eventStartTime }}{% endcapture %} {% endfor %} {% endwebrequest %} {% if isLive == 'true' %} <div class="row no-gutter countdown"> <h1>Watch our live stream now: <a href="[YOUR Church Online URL]/" class="btn btn-lg btn-primary">Join</a><h1> </div> {% elseif isLive contains 'false' %} <div class="row no-gutter countdown"> <div class="col-md-5"> <h1>Our next live stream is in:</h1> </div> <div class="col-md-4"> <div class="col-xs-3"> <h3 id="Day"></h3> <p>days</p> </div> <div class="col-xs-3"> <h3 id="Hours"></h3> <p>hours</p> </div> <div class="col-xs-3"> <h3 id="Minutes"></h3> <p>mins</p> </div> <div class="col-xs-3"> <h3 id="Seconds"></h3> <p>Secs</p> </div> </div> <div class="col-md-3"> <br><a href="[YOUR Church Online URL]" class="btn btn-lg btn-primary">Learn More</a> </div> </div> <script> // Set the date we're counting down to var countDownDate = new Date("{{ eventStartTime | Date:'MMM dd, yyyy HH:mm:ss'}}").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now - 14400000; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("Day").innerHTML = days; document.getElementById("Hours").innerHTML = hours; document.getElementById("Minutes").innerHTML = minutes; document.getElementById("Seconds").innerHTML = seconds; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> {% endif %}