How to Add Number Counter to Your Website

Jotform’s Number Counter Widget you can showcase important numbers on your website in a visually engaging way. Use it to highlight customer counts, completed projects, years of experience, or other key achievements, then customize the counter to match your site’s design.

The widget helps visitors quickly understand the value of your business, organization, or content. In this guide, you’ll learn how to configure it and add it to your website.

Before you can add the Number Counter Widget to your website, you’ll first need to enter the numbers you want to display, customize how the widget looks, and copy the embed code for it. Here’s a quick walkthrough:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget from the assets.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget window, enter Number Counter.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
   • Widget Heading — Keep this on to show the title above the counters. 
   • External JSON Data — Enable this to populate your counters with data from an external JSON source instead of entering the values manually.
   • Counters
     • Add Counter — Use this to add a new counter to display another number, statistic, or milestone on your website.
     • Pencil icon — Click on this to modify the counter’s settings, such as its value, label, icon, or animation.
     • Duplicate icon — Create a copy of an existing answer choice, making it easier to create similar options.
     • Trash Can Icon — Remove the selected answer choice from the poll.
6. Next, click on the Pencil icon beside each counter to edit its settings.

7. Then, change the settings below to set up your counter:
   • Value — Enter the number you want the counter to display. This can represent any statistic, such as the number of customers, projects completed, downloads, or years of experience.
   • Prefix — Add text or symbols before the number, such as $, +, or #.
   • Postfix — Add text or symbols after the number, such as %, K, M, or +.
   • Title — Add a title to describe what the counter represents.
   • Description — Include additional information or context below the counter title.
   • Icon — Select an icon to visually represent the statistic or achievement being displayed.
   • Link URL — Add a URL to make the counter clickable and direct visitors to another page or website.
8. Once everything’s set, in the upper-right corner of the Edit Uptime menu, click on Back.

9. Next, under the Styles tab, customize these properties:
   • Animation — Click on the Downward Arrow iocn and choose the animation style used when the counter begins counting.
   • Color Scheme — Click on the Downward Arrow icon and select a preset color scheme or customize the widget’s colors to match your website.
   • Show Icon — Display an icon alongside each counter to make the statistic more visually appealing and easier to recognize.
   • Number Size — Click on and hold the slider handle, then drag it to set the thickness or boldness of the numbers displayed on the counter.
   • Icon Size — Click on and hold the slider handle to change the size of the counter icon.
   • Corner radius — Control how rounded the corners of each counter card appear.

10. Then, scroll down and adjust these settings:
    • Jotform Branding — Show or hide Jotform branding on the widget, depending on your subscription plan.
    • Font — Toggle this on to select and match your website’s font.
    • Custom CSS — Turn this on to add custom CSS code and apply advanced styling to the widget.

11. Now, under the Layout tab, configure these properties:
    • Layout — Click on the Downward Arrow icon and choose how the counters are arranged within the widget.
    • Full Width — Keep this enabled to extend the announcement bar across the available width.
    • Alignment — Choose how the counters are aligned within the widget, such as left, center, or right.
    • Animation Duration — Set how long the counting animation takes to reach the final value.
    • Number Format — Click on the Downward Arrow icon and then choose how numbers are displayed, such as with commas, abbreviations, or other formatting styles.
12. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

13. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
14. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

15. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

16. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Number Counter widget will appear on your website with all your customizations applied to it. The screenshot below shows how it’ll look:

Discover

Website Widgets

Supercharge your website with interactive widgets that empower visitors to take action.

Discover Now