Jotform’s Number Counter Widget makes it easy to showcase important numbers on your website in a visually engaging way. Whether you’re highlighting customer counts, completed projects, years of experience, or other key achievements, you can customize the counter’s appearance and tailor it to your website.

Use it to highlight key statistics, showcase your accomplishments, and help visitors quickly understand the value of your business, organization, or content. In this guide, you’ll learn how to configure the widget 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 menu, 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, under the General tab, 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.
     • JSON Source — Choose the source that provides the JSON data for your counters.
     • JSON Endpoint URL — Enter the URL of the JSON endpoint that contains the data you want the widget to display.
     • Sample JSON — Show a sample JSON structure that you can use as a reference when formatting data for the widget. This helps ensure your external JSON data follows the correct format before connecting it to the widget.
   • 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. Then, depending on the number of counters you selected, click on the Pencil icon for each counter to configure these settings:
   • 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.
7. Once everything’s set, in the upper-right corner of the Edit Uptime menu, click on Back.

8. 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.

9. 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.

10. 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.
11. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

12. 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.
13. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

14. 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. 

15. 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 looks on a website.