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 an animated number counter 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 a 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 services 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 widget builders 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 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), email timers with post-countdown messages, and other widgets on your website such as popup widgets (to convert exit traffic), customer testimonials widgets, progress bars, back-to-top widgets (direct visitors to the correct sections on a page), social proof software, and high-converting checkout pages.
Top Number Counter Widgets to Use Today
Elfsight Number counter widget
Elfsight is another site that provides HTML widgets for websites in various categories. Its total number of apps exceeds 80, and we have featured some of the 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, Twitter Feed, TikTok feed, and All-in-one social feed widget), and logo slider widget.
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 multiple number counters 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 to demonstrate 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 – Use background images, color schemes, fonts, and sizes, and enable mobile-specific settings to change the widget’s appearance on mobile and tablet devices.
- Change animation speed, custom CSS, widget sharing, number counter widgets templates, widget duplication, and more.
How to make a Number counter widget on Elfsight
Use the free number counter widget builder below. Select a template, click on the “Continue with this template” button, add your numbers, customize the widget, and click on the ‘Add to Website‘ 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" data-use-service-core defer></script>
<div class="elfsight-app-b15d97ed-171f-4870-9022-48aabf71b2a3" data-elfsight-app-lazy></div>If your site includes other Elfsight widgets, there is no need to add the JavaScript part again.
Demo
Pricing
Elfsight’s Number counter widget is free to use.
Its paid plans start from $5 per month, and prices depend on the pageviews the widget consumes each month. To learn more, read the Elfsight prices guide.
Click here to try Elfsight’s Number counter widget.
CommonNinja Animated Number Counter
CommonNinja is another site that provides HTML widgets for websites, an alternative to Elfsight, Powr, with over 170 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 CommonNinja that lets you design a counter widget for your site with its visual editor.
Features
- Multiple layouts and skins – Choose a preferred layout and a color scheme. Edit content and customize the widget.
- 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 – Change color schemes, font, sizes, etc., for each element easily with the visual editor under the Advanced and Custom styles tab. Also, you can use the ‘custom CSS’ field to add CSS codes to customize the widget moreover.
- Integrations – Upgrade your number counter widget with integrations such as Google Tag Manager, CSV, API, MySQL, Google Drive, and XML.
- 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 CommonNinja to create a number count widget.
Demo
Pricing
CommonNinja’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 CommoNinja’s Number Counter.
Powr Number Coutup and Countdown widget
Powr is an online service that provides useful widgets for websites for free. Its apps library has over 60+ different apps ranging from data collection to boosting conversions. We have featured some of its apps before on Pitiya. Some of them are responsive pricing table builder, counting up timer, and HTML PDF viewer for websites.
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 widget – Count up to show off your metrics for social proof.
- Count up number per visitor – The value on counter widget will increase on 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 circumstance, you might want to create a number counter 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 to increase sales conversions on 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 0 so your visitors know that a sale or event is over.
- Fixed header or banner – The fixed header lets you add the number counter widget on your website’s top section (displays while a user scrolls down the page), and the banner is an inline widget you can embed on any placement of 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 – Adjust the widget’s position (top, bottom), counter’s animation (ZoomIn, Flip, RotateOut, FadeOut, ZoomOut, RubberBand, FadeOut) & style, and change 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 consists of several limitations: No advanced customization features, Powr branding on widgets, etc. Its paid plans start from $5.49 per month, and features & controls such as Count Up Number per Visitor and Custom CSS & JS unlocks from the Pro plan (costs $13.49/month).
Click here to try the Powr Number Counter widget.
Fouita’s Number Counter
Fouita is another widget provider with over 50 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 no expert in coding, it’s recommended to use a no-code widget builder such as Elfsight to make a numbers counter widget.
Powr provides unique features such as count up from a value and count down to a value and unique timers for each visitor. Find differences between both services in Powr and Elfsight comparison.
Since most of these services are free to use, 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.