How Do You Do a Countdown on Webflow?

by

Are you looking to add a countdown feature to your Webflow website? Countdowns can be a great way to create a sense of urgency and grab your visitors’ attention. In this tutorial, we will walk you through the steps to create a countdown on Webflow using custom code.

Step 1: Create a new project in Webflow

If you haven’t already, start by creating a new project in Webflow. Once your project is set up, navigate to the page where you want to add the countdown.

Step 2: Add a Countdown Element

To add the countdown element, go to the Elements Panel on the right-hand side of the Webflow editor. Drag and drop an HTML Embed element onto your page.

Step 2.1: Customize Your Countdown

Open the HTML Embed element and paste in the following code:

<div id="countdown"></div>

This code creates an empty div with an id of “countdown” which we will use to display our countdown.

Step 3: Add Custom Code

In order to make our countdown work, we need to add some custom code that will handle the countdown logic. To do this, click on the “Custom Code” tab in the left-hand panel of the Webflow editor.

Step 3.1: Add JavaScript Library

In order for our custom code to work, we need to include a JavaScript library called “Moment.js”. Moment.js is a popular library for parsing, validating, manipulating, and displaying dates and times in JavaScript.

To add Moment.js to your project, click the “Add Custom Code” button at the bottom of the left-hand panel. In the “Head Code” section, paste in the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Step 3.2: Add Custom JavaScript

Now that we have included the Moment.js library, we can add our custom JavaScript code to handle the countdown logic.

Click on the “Dashboard” button in the top left corner of the Webflow editor to go back to your project dashboard. Select your project and click on “Custom Code” in the left-hand menu.

In the “Footer Code” section, paste in the following code:

<script>
  // Set the date and time for your countdown
  var countdownDate = moment("2022-12-31T23:59:59");

  function updateCountdown() {
    var now = moment();
    var duration = moment.duration(countdownDate.diff(now));

    // Display remaining days, hours, minutes, and seconds
    document.getElementById("countdown").innerHTML =
      "<b>Days:</b> " + duration.days() +
      "<br><b>Hours:</b> " + duration.hours() +
      "<br><b>Minutes:</b> " + duration.minutes() +
      "<br><b>Seconds:</b> " + duration.seconds();

    // Update every second
    setTimeout(updateCountdown, 1000);
  }

  // Call updateCountdown function to start the countdown
  updateCountdown();
</script>

Step 4: Style Your Countdown

Now that our countdown is working, we can style it to match the design of our website. You can use CSS to customize the appearance of the countdown element.

For example, you can add the following CSS code to your Webflow project to style the countdown:

#countdown {
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

Step 5: Publish Your Website

Once you have finished styling your countdown, click on the “Publish” button in the top right corner of the Webflow editor to publish your website and make your countdown live.

Congratulations! You have successfully added a countdown to your Webflow website. Now you can create a sense of urgency and engage your visitors with this powerful feature.

  • Tip: You can customize the date and time for your countdown by modifying the countdownDate variable in the JavaScript code.
  • Note: Remember to include a valid date and time format that Moment.js can parse. In this example, we used “YYYY-MM-DDTHH:mm:ss” format.

If you want to learn more about Webflow or explore other advanced features, be sure to check out our other tutorials and resources!