Using an animated number counter widget will be useful when you have some numbers to show off on your website.
Why?
According to studies, 90% of the information our brain processes is visual, and research jointly done by 3M Corporation and the University of Minnesota concluded that “Presentations using visual aids were found to be 43% MORE PERSUASIVE than unaided presentations.”
That means a number counter gadget is an easy way to provide key metrics (i.e., clients served, ratings, customer satisfaction ratio) to your website users to boost conversion rates.
But how do you add a number counter to your website?
You can accomplish it by using an HTML number counter widget creator. In this article, you will find several number counter widgets for websites, how to use them, features, and things to consider when using them.
Some platforms mentioned below let you create recurring number counters (unique to each visitor) and number countdown widgets (best to use on your online store to entice the scarcity by showing the number of available items).
4 things to consider when using a numbers counter widget on a website
- Customize the widget: Most animated counter generators listed below allow you to add multiple number counters, customize the number of columns, change the color scheme, fonts, widget size, and more. Make use of customizing tools to integrate the widget with your site using the brand color palette, font families, etc. Before adding the widget to your site, preview it on the mobile view to ensure number counters are visible and readable without an issue.
- Concern about the page loading speed: The last thing you want is to increase your website’s loading time because of the numbers counter widget! According to a report, page loading speed directly correlates with the conversion rate. You can load the widget’s script code (JS) asynchronously to load the widget after other contents are loaded on the page. Furthermore, you can use a script manager such as Google Tag Manager or Cloudflare Zaraz and prevent using widgets that use large-sized resources and JavaScript libraries such as jQuery in number counters widgets.
- A/B test your landing pages: You would not know if adding numbers counters to a website resulted in increased conversions if you did not split-test your pages — experiment using different layouts, styles, and widget placements on your site.
- Use other conversion boosters: It is not guaranteed that using a number-counting HTML widget on a site alone will boost sales on your site. Utilize other techniques such as email marketing techniques such as using good email subject lines, high-converting email templates (e.g., promo emails), and other widgets on your website such as popup widgets (to convert exit traffic), customer testimonials widgets, progress bars, scrolling notification bar (show off message, promotion, etc., across the entire website), social proof software, and high-converting checkout pages.
Top Number Counter Widgets to Use Today
Elfsight Number counter widget
Elfsight is a platform that provides various website widgets to help businesses upgrade their websites in many ways. Its total number of apps exceeds 90, and we have featured some apps before on Pitiya.
Several popular ones are Review widgets (Google Review plugin, Yelp reviews widget, Amazon Reviews widget, and All-in-one Reviews widget), File viewer widgets (embed 20+ file formats), Social feed widgets (Instagram Feed, X Feed, TikTok feed, and All-in-one social feed widget), and many other widgets to showcase data like Job Board, Google Maps, Visitor Counter, and Before-After Slider.
Elfsight’s Number Counter widget allows you to create a count widget for your website effortlessly with its visual editor. It provides many customization options to help you edit the widget to fulfill your requirements.
Features
- 20+ templates: Elfsight has created several number counter widgets templates to get you started. Each template has its unique purpose, such as demonstrating the existing client base, number of days served, company growth in a year, store performance, etc. And those widgets include several number counters (and you can edit them).
- Add multiple counters: Elfsight lets you use more than one number counter in a single widget. It can help demonstrate several statistics. Additionally, each number counter enables you to add a custom number value, prefix & postfix, caption, icon, and link to URL, email, or phone.
- Two data input methods: Manual or from a URL. The manual option is best for demonstrating static values (i.e., numbers that don’t change). On the other hand, the URL option lets you update the number from an external URL. Learn more.
- Change appearance: To change the widget’s appearance on mobile and tablet devices, you can use background images, color schemes, fonts, and sizes and enable mobile-specific settings.
- Number counter animation settings, custom CSS & JS code insertion, widget sharing, duplication, and more.
How to make a Number counter widget on Elfsight
Use the free number counter widget builder below. Select a template, click the “Continue with this template” button, add your numbers, customize the widget, and click the “Add to website for free” button to get the embed code.
Or sign up on Elfsight for free and start creating your widget. To learn more, watch the following video tutorial.
Number counter widget embed code
Copy the code and paste it into your website’s HTML editor where you want to display it.
The embed code consists of two parts: 1) a JavaScript file (bolded below) and 2) an HTML div element with a class name.
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-b15d97ed-171f-4870-9022-48aabf71b2a3" data-elfsight-app-lazy></div>If your site includes other Elfsight widgets, you do not need to add the JavaScript part (bolded above) again.
Demo
Pricing
Elfsight’s Number counter widget is free to use.
The paid plans start at $5 per month, and prices depend on the number of pageviews the widget consumes each month. To learn more, read the Elfsight prices guide.
Click here to try Elfsight’s Number counter widget.
Common Ninja’s Animated Number Counter
Common Ninja is another platform that provides HTML widgets for websites, an alternative to Elfsight, Powr, with over 200 widgets in its catalog. Widgets cover a wide range of categories. The following are some of them:
- User engagement: Brackets Maker, Image Hotspot, Contact Form, Form Builder
- Social: Telegram Chat, YouTube Feed, Trustpilot reviews
- Interactive: Charts & Graphics, Image Slider, Comparison Tables
- Media: PDF Viewer, Image Magnifier, Timeline
- Utilities: Progress bars, FAQ, Review Badge
- Informative: SiteJabber reviews, Process, Announcements
- Boost sales: Side-in Panel, Testimonials slider
Animated Number Counter is another feature-rich widget in Common Ninja that lets you design a counter widget for your site with its visual editor.
Features
- Templates: Common Ninja has several pre-designs that you can edit.
- Multiple layouts and skins: You can choose a preferred number counter layout and skin that combines different color schemes.
- Set starting & ending numbers and prefix & suffix: Specify the counter’s starting and ending numbers and the prefix (ex: currency sign) or suffix (ex: plus sign) before and after the number.
- Automation: Add an increment to the ending number by a specific value on every given period (hour, day, etc.).
- Animations: Use one of the available “counting” animation types to make your widget stand out.
- Add links: Direct users to specific URLs when clicking the counter number widget.
- Customize appearance: Common Ninja is one of the highest-quality animated number counters in terms of the number of customization options. With the visual editor, you can easily change the color schemes, fonts, sizes, etc., for each element. You can also modify the look and feel of the widgets for specific devices, such as mobile phones. If you need more options, you can add CSS codes in the ‘custom CSS’ field.
- Localization: This is another unique feature of Common Ninja. It enables you to translate content into the local languages of potential users and serve the suitable variant. For example, you could translate captions of number counters into Spanish and display the version only to people with Spanish language settings on their devices. Note that this does not guarantee that all Spanish speakers will see the variant.
- Add number counter widgets to emails: If you want to embed created animated number counters into email marketing campaigns, Common Ninja has a unique feature that essentially generates an optimized version of the HTML number counters to the website widget. You can embed it on Gmail, MailChimp, ActiveCampaign, AWeber, or any HTML email template through HTML code insertion. See the screenshot below for an example.
- Integrations: Upgrade your number counter widget with integrations such as Google Tag Manager, CSV, API, MySQL, Google Drive, and XML. These integrations are useful for fetching, analyzing, and manipulating data in real time.
- Device-specific editing tools, previewing the widget before publishing, sharing the widget with others with a direct link, adding team members, managing widgets with projects, and more features.
Watch the video below to learn how to use Common Ninja to create a number count widget.
Demo
Pricing
Common Ninja’s Number Counter widget is free to use. However, the free plan is limited to one project, one widget, and up to 300 monthly pageviews. For an increased number of widgets and projects, unlocking features such as automation, auto-refresh number counters, and removing the Common Ninja brand from widgets, you have to upgrade to a paid plan starting at $10 per 5 widgets.
Click here to try Commo Ninja’s Number Counter.
Powr Number Coutup
Powr is an alternative to Common Ninja and Elfsight, with over 60+ different apps ranging from data collection to boosting conversions.
Powr’s Count Up Timer widget is one of the powerful apps that lets you create many different widgets. Three possibilities are:
- Cout up number – Count up to show off your metrics for social proof.
- Count up number per visitor – The counter widget value will increase each given period. Perfect for showing the popularity of your products to new visitors
- Countdown number per visitor widget – A unique countdown number widget for each visitor landed on your site. Perfect for evergreen sales funnels to add scarcity.
Features
- Count up or count down: Create a number counter widget that counts up or down.
- Fixed or unique number counter widget: Depending on your circumstances, you might want to create a number counter widget with a fixed or unique value (for each visitor) for your site. The widget with a fixed value consists of a specified number (best for showcasing your work portfolio), and the unique number counter is special for each visitor (best for increasing sales conversions in your sales funnel or online e-commerce store).
- Display message during and after count: Powr allows you to display different messages during your countdown and once it’s reached zero so that your visitors would know that a sale or event is over.
- Fixed header or banner: The fixed header lets you add the number counter widget to your website’s top section (it displays while a user scrolls down the page), while the banner is an inline widget you can embed anywhere on your site.
- Define active dates for the number counter widget: You can make the widget always functional or choose a starting date and target date for which the number counter widget will remain active. Powr will use your local timezone, so you might want to use a timezone converter like Time.is to specify exact targeted times for active dates for your number counter widgets.
- Number counter settings: You can specify a custom starting number and period (in seconds, minutes, hours, or days), which number on the counter widget will count up or down.
- Customization: You can adjust the widget’s position (top, bottom), the counter’s animation (ZoomIn, Flip, RotateOut, FadeOut, ZoomOut, RubberBand, FadeOut), and the style, as well as the appearance (fonts, colors, sizes, borders).
- Google Tag Manager Integration, custom CSS, add a CTA button, preview on mobile & tablet appearance before publishing, app sharing, embed number counter widget on emails, add collaborators, duplicate widgets, and more.
How to create a number counter widget for websites using Powr
Register your account on Powr and start building your widget.
Watch the video tutorial below to learn how to use Powr to make a number counter widget.
Number counter embed code
Copy the embed code and place it on your site’s HTML editor.
If your site already includes any Powr plugin, such as the Google Maps widget and the Before and After image slider, you need not have the JavaScript file again.
Demos
Number count-up widget (Unique to every visitor)
Number countdown widget (Displays a message after the counter surpasses zero)
Pricing
Powr’s Count Up Timer widget app is free to use. However, the free plan has several limitations: no advanced customization features, Powr branding on widgets, etc. Its paid plans start at $5.49 per month, and features and controls such as Count Up Number per Visitor and Custom CSS & JS are available only on the Pro plan (which costs $13.49/month).
Click here to try the Powr’s Number Counter widget.
Fouita’s Number Counter
Fouita is another widget provider with over 60 widget types. Unlike other solutions, Fouita is agency-friendly and has a flexible pricing structure. Its free Number Counter widget includes several templates and options to customize according to your requirements.
Features
- Templates: Select one out of the available ones and customize it.
- Add counters: Click on the ‘Add counter’ button under the ‘Content’ tab of the widget editor and enter counter details such as starting and ending numbers, prefixes and suffixes, captions, icons, links, and colors. You can drag and drop each counter on the widget to organize its order.
- Customize widget: The visual editor includes several options to customize your widget, including changing the header and footer, width, background, fonts, and colors.
- Triggers and display conditions: This section contains many options for dictating when, where, and how your widget should be displayed on your website. It also includes a widget scheduling option that can be useful for showing or hiding it based on the time and day of the week.
Compared to other solutions, Fouita’s Number Counter has limited features. For example, it does not have automation or integrations to input data dynamically.
Demo
Pricing
Fouita’s widgets are free to use. However, the free plan is limited to 1,000 page views per month. Pricing is flexible, so you can create a custom plan according to your usage.
Click here to try Fouita’s Number Counter.
Number Counter and Animated Numbers [WordPress Plugin]
Numbers – Number Counter and Animated Numbers plugin by Themeflection is a free number counter plugin for WordPress sites. It supports dynamic numbers like a number of articles, categories, and authors, so you can integrate the plugin with your existing dynamic data and make a “true” number counter based on real numbers.
Features
- Include dynamic numbers
- Unlimited counters anywhere on the page, post, or custom post type
- Shortcode support (Add counter widget on any place of your WordPress site, even in the sidebar or footer)
- Customization (change title, colors, background, sizes, fonts, icons, etc.), layouts, and responsive designs.
The plugin is free to use. However, if you want to use more extended features, such as controlling the counter speed, setting a custom starting number, prefix and suffix, parallax, and showcasing WooCommerce sales, number of products, customers, and more, you will have to upgrade to a premium plan.
CodePen
CodePen is a place where coders share their work with others. And with a simple search, you can find dozens of examples of number counter widgets made with HTML, CSS, and JavaScript. Some use JavaScript libraries such as jQuery.
These widgets (called “pens” in CodePen) can be customizable within CodePen and embeddable on your site for free. Here are a few free number counter showcase widget examples.
Animated Number
See the Pen Animated Number – Counter Widget by Solygambas (@solygambas) on CodePen.
jQuery Number Counter
See the Pen jQuery Number Counter by Sayed Rafeeq (@syedrafeeq) on CodePen.
Velocity JS: Animated Progress Counters
See the Pen Velocity JS: Animated Progress Counters by Doug Hill (@quickstep25) on CodePen.
Final words on best number count widgets for websites
Why should you use an animated number counter widget? There are many reasons. Here are a few:
- Add animation to static pages: Make your content less boring and more engaging by representing metrics in an animated numbers widget.
- Make Stats More Noticeable: Due to the abundance of characters on a page, people might get lost finding out key details you want to highlight – whether it’s the number of users you have, active installations, days of service, sales, or anything else. You can draw readers’ attention to those details with animation effects.
- Build trust, boast your work experience, and prove your expertise: Whether you run a local business or a SaaS business, you can utilize a numbers counter widget to showcase the number of your existing clients (to build trust), years of work (to showcase your work experience) and the number of achievements (to prove your expertise) to retain existing customers and acquire new ones.
You can create a number counter widget with coding (by yourself or hiring a freelancer) or use a no-code widget builder to build one. If you are not an expert in coding, it’s recommended that you use a no-code widget builder such as Elfsight to make a numbers counter widget.
Powr provides unique features such as a count-up from a value and a count-down to a value, as well as unique timers for each visitor. Find differences between both services in Powr and Elfsight comparison.
Since most of these services are free, you can try as many as you want and use only the one that suits you.
Utilize other conversion boosters, such as HTML evergreen countdown timers and exit-intent popups using services such as ConvertBox, to maximize conversions on your funnels.