Number Counter

How to add NW Number Counter Tool in Webflow?

‍

Step#1

Adding the script within Page Settings on Webflow.

Integrating our Number Counter tool into your website is simple! Follow these steps to get started:

1. Click on "Pages" in the left navigation or press "P" on your keyboard.
2. Select the settings icon beside the page you want to add the script to.
3. Scroll down to the "Before </body> tag" section.
4. Simply copy the script we've provided and paste it here.
   ‍

Step#2

Set Custom Attribute

To ensure your number counter works seamlessly, apply custom attributes directly to your number elements.

1. Select the number element you want to animate.
2. Go to the Element Settings panel.
3. Add the following custom attributes:
   • Name: 'nw-counter' and Value: 'true' (eg. nw-counter="true")
   • Name: 'nw-start-number' and Value: 'starting value of your animation' (eg. nw-start-number="0")
   • Name: 'nw-duration' and Value: 'duration of your animation' (eg. nw-duration="2")

‍‍‍“NOTE: The ending value of the animation is the value you put in the text element itself.
‍

Step#3

Publish Your Site

It's recommended to publish your site in a staging environment first to ensure the number counter works as expected. Once confirmed, publish it to your live site.

‍

By following these steps, you'll successfully implement the Number Counter on your Webflow site.