Add a Countdown Timer to Your Landing Pages

---

Deadlines are important. Whether for internal timelines or for driving sales, keeping teams and clients organized and on time is critical to your success as a business owner or manager.
For landing pages, a ticking clock is a powerful tool that can drive sales and action from your prospects and leads. For sales, timelines are typically tied to a promotion, offer, or task completion.

Enter the all-mighty ticking clock…

If you missed our last Pardot Design workshop, we built a few Pardot Hosted Landing Pages using Bootstrap 4.1.3 and went over adding Pardot Content regions so your team can quickly build custom Pardot Landing Pages.

Don’t Miss the next Workshop or Bootcamp: Sign-up for Future Courses

Here’s a quick snippet of code you can add to your Pardot Landing Pages to implement a countdown. It uses Javascript to get the current date and build a countdown from the date specified by the developer. Descriptions are included in the snippet below. Styling is not included in this snippet, but with a little CSS, your countdowns will shine!

Here’s the Code:

<!-- Display the countdown timer in an element.  Add a div around this element to spruce up the design. -->

<p id="countdown"></p>


<!--This is the JavaScript that controls the Countdown -->

<script>

// Set the date we're counting down to

var countDownDate = new Date("Feb 15, 2020 0:0:25").getTime();

// Update the count down every 1 second

var x = setInterval(function() {

  // Get today's date and time

  var now = new Date().getTime();

  // Find the distance between now and the count down date

  var distance = countDownDate - now;


  // 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);

  // Display the result in the element with id="countdown". The portions of the strings within "" can be edited. 

  // For example, "d" can be changed to "Days ", "h " can be changed to "Hours ".. and so forth

 document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text. The string can be adjusted for your Page

  if (distance < 0) {
    clearInterval(x);
   document.getElementById("countdown").innerHTML = "THIS DEAL HAS EXPIRED";
 }
}, 1000);

</script>

Have some fun and give this a try!

Are you working towards your Pardot Certification, or just want to be a better Pardot Admin? Attend our 2-day Pardot Admin Bootcamp! Space is limited!