How to Add a Number Counter to a 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.

Creating Your Number Counter Widget and Getting the Embed Code for It

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:
   • 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.
     • Edit Counter (Pencil Icon) — Click on this to modify the counter’s settings, such as its value, label, icon, or animation.
     • Duplicate Counter (Duplicate Icon) — Create a copy of an existing counter and its settings to quickly add similar counters.
     • Delete Counter (Trash Can Icon) — Remove the counter from the widget.
6. To show you an example, click on the Pencil icon to edit the Uptime counter 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 — Choose the animation style used when the counter begins counting.
   • Color Scheme — 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.
     • Icon Size — Change the size of the counter icon.
   • Number Size — Adjust the thickness or boldness of the numbers displayed on the counter.
   • 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.
    • Custom CSS — Apply your own CSS code for additional customization beyond the built-in settings.

11. Now, under the Layout tab, configure these properties:
    • Layout — Choose how the counters are arranged within the widget.
    • Full Width — Expand the widget to fill the entire width of its card, making it more prominent on your webpage.
      • Width — Adjust the overall width of the widget to fit your website’s layout.
    • 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 — 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: