Use the widget builder below to create your Animated Number Counter widget for free. Select a template and click the “Continue with this template” button to get started.

How to use the Website Number Counter Widget Builder

1. Choose a template: Select a preferred template and click the “Continue with this template” button. Some of the available templates include a white theme, a black theme, colored numbers, multicolor counters, and a single counter.
2. Add counters: Click on the “Add Counter” button, and you will first see the add counter values. There are two options: Manual and External URL. For the manual option, enter start and end values. If you want to use absolute and live data on the number counter automatically, create a URL that returns data in JSON format and paste it into the field. Additionally, you can add captions, prefixes, postfixes, icons, links (including URLs, emails, or phone numbers), and custom colors to each counter. Drag and drop each counter to its placement to set its order.
3. Customize widget: Take control of the layout of your number counters widget. You can specify the width in pixels or percentages, set the number of columns and space between them, and choose a counter elements layout that best fits your design. This level of customization ensures that your widget will seamlessly integrate with your website’s aesthetic.
4. Customize style: The animated number counter widget builder lets you customize the appearance in various ways. First, make the background transparent, add color, or use an image. Then, several customization options are available to change colors, fonts, icon sizes, and more. There is a custom CSS field where you can add your styles to enhance the widget according to your specific requirements.
5. Settings: In this section, you can change the number and decimal formats, animation type, and speed. For instance, changing the number format to ‘comma-separated’ can make large numbers easier to read, adjusting the animation type to ‘fade’ can create a smooth transition between numbers, and increasing the speed can make the counter update more frequently. You can also add your tracking scripts using the custom JavaScript field.
6. Once you have finished designing the HTML number counter for your website, click on the “Add to website for free” button and sign up on the following page to save your widget.
7. Use the embed code for the number counter on your website.

The Number Counter widget’s HTML embed code

Paste the embed code on your website’s template, theme, or HTML source code editor in places where you want to embed the number counter widget.

How to manage your number counter widget

Once you have created your number counter widget for website, you can easily manage it on your account. In your dashboard, search for the “Number Counter” app under the list of apps. As you can see from the following screenshot, you can create more Number Counter widgets, edit existing ones, and get HTML embed code.