How to Add Number Counter to Any Website. The Full Guide

By using an animated number counter you can prove you are a company anyone can rely on. Moreover, you’ll be able to showcase successful deals, history in numbers, notable results. It might be useful for almost everyone: designers, writers, chefs, photographers, and, of course, businessmen.

Counter widgets for websites

Wishing to share your impressive statistics or present your history in numbers, you might want to do it as quickly as possible. However, creating dynamic content always requires JavaScript skills, and it’s not an option for those who want to have a swift and easy-to-create solution. 

When using an animated counter widget, you’ll get an amazing opportunity to present splendid numbers in a professional and appealing way, create an animated counter in a visual configurator, specify any ending numbers and animation settings. After this, the widget will be ready to be installed on any website!

Choosing Elfsight Number Counter widget, you get loads of incredible benefits:

• Any number of columns
• Modifiable width of the counters and space between them
• Chance to attach headings, postfixes, prefixes and captions
• Choose the icon format - get it from Elfsight collection or upload a personalized one
• Opportunity to embed links
• Any number of figures
• Numerous ready-made customizable templates

You shouldn’t worry if you’ve never ever coded before: with Elfsight, creating and adding a beautiful and professional Counter widget won’t require any additional skills.

Our number counter works on all websites: Squarespace, Wix, WordPress, and Weebly. Additionally, you can add it to HTML code and Elementor. Also, if you don’t see any opportunity to add a custom HTML code in your website admin panel, keep in mind you can install the counter with the help of a GTM.

Below, you’ll find the most detailed instructions on adding the widget, have a good time.

How to add counter widgets on GTM

When you use any CMS or website builder, you usually have an option to add custom HTML and place the widget you’ve created by pasting just two lines of code. However, not all of the CMS allow you to do so. 

Fortunately, there’s an opportunity to add the widget with the help of a third-party tool called Google Tag Manager. In short, you’ll create a tag and a trigger for it to appear on a website, and simply place it on a web page. Here’s the process in greater detail:

1. Sign up or log into Google Tag Manager
2. Create a new tag, choose ‘Custom HTML’
3. Put the first line of the Elfsight installation code to the tag
4. Create a trigger for adding the tag to the web page
5. Save the tag and publish the changes

That’s above it! Your widget will appear as soon as you finish with publishing the changes.

Adding counters to HTML code

The process of adding number counters to HTML is the easiest one. However, it’s not so easy to create one in JS, HTML and CSS, to make it look professional and make it dynamic. Never mind if you can’t imagine what to do with your numbers and how to make them turn over.

By the usage of a special tool called widget, you simply create your beautiful and functional number counter, paste two lines of code to the needed block on a web page, and voila! - you have stunning numbers increasing dynamically right there!

Wish to learn more about the installation process and watch a video? You are welcome to do it on the HTML Number Counter page!

How to add and use the WordPress Number Counter plugin

WordPress is among the very best platforms for anyone creating a portfolio website. Most likely you need to gain time and truly want your counter to look professional on the site. In this case, the wisest choice is to use a special widget. 

Benefits you get by using a plugin

1. You don’t have to code anything in your WordPress animated counter
2. There are numerous templates putting forward professional ideas for your tool
3. You create the counter yourself, without a web designer or developer, and you never have to bother about the widget design and functionality
4. You can test the widget in a online demo

With the Elfsight plugin you can promptly spot any counters on the site, improve the UX in mere seconds and adjust the number counter the way you want. 

Features of the Elfsight Counter for WordPress website

• Any amount of counters
• Opportunity to add prefixes, titles, headings, and postfixes
• Flexible width of the counters and space between them
• Various customizable templates
• Chance to add links
• Unrestricted amount of columns
• Choose the icon category - pick it from Elfsight library or upload a personalized one

You are free to explore the widget in greater detail on this page. 

In addition, take into consideration that there are 10+ premade customizable templates that you can find in the free online demo. You can consider how to display different types of animated counters on WordPress, whether it’s work in numbers, success in numbers, or customer satisfaction. Below, are some of the examples, enjoy:

• Online Store
• Writer work in numbers
• University in numbers

How to add Counter to WordPress

You can add the Counter plugin to WordPress in a few diverse ways. You can effortlessly do it yourself after viewing our guideline and minding a video on this page. 

Below there are a few more methods to add the Number Counter to WordPress. For example, you may attach the widget with the help of Google Tag manager. 

Install the plugin through WordPress admin panel

1. Log into WordPress admin panel
2. Go to ‘Pages’ and select the page where you need the plugin. 
3. Add a custom HTML block to the required part of the page. 
4. Paste your plugin code in this block. 
5. Click ‘Update’.

This is like this, your widget will show up on the web page as soon as this! 

Ask a professional Elfsight support team to help:)

Yes, if your widget is on any paid plan, you can always drop them a line and they’ll be happy to add the animated Counter widget to WordPress for you. Barely contact them through the Elfsight Help Center and obtain your Number Counter plugin added by professionals!

How to add Number Counter to Wix

Wix is one of the main platforms for anyone creating a website for their business on their own. Probably you need not to waste your time and really need your counter to appear professional on the site. In such circumstances, the best choice is to use an exclusive widget. 

Benefits you get by using a widget

1. You don’t have to write JavaScript code in your animated counter for Wix
2. There are many templates putting forward professional ideas for your number counter
3. You create the counter on your own, without a web designer or developer, and you never have to bother about the widget's design and functionality
4. You may test the plugin in a free visual editor

With the Elfsight widget you may immediately position any counters on the site, strengthen the UX in mere seconds and customize the number counter anyhow you need. 

• Features of the Elfsight Counter for Wix website
• An unlimited amount of counters
• Various customizable templates
• Opportunity to attach links
• Unrestricted amount of columns
• Decide on the icon format - pick it from Elfsight collection or upload a custom one
• Chance to attach headings, captions, postfixes and prefixes
• Adaptive width of the counters and space between them

You can explore the widget in more detail on this page

What is more, take into consideration that there are 10+ professional adaptive templates which you are free to discover in the free online demo. You are free to discover how to display different types of counters, whether it’s work in numbers, success in numbers, or customer satisfaction. Here you can find some of the templates, have a look: 

• Online Store
• Writer work in numbers
• University in numbers

How to add a Number Counter app to Wix

There’s a chance to add the Counter plugin to Wix websites in diverse ways. You can easily do it on your own after minding a video and checking our guideline on this page. 

Here are a few more ways to install the Number Counter on Wix. For example, you may add the tool with the help of Google Tag manager. 

Install the plugin through Wix admin panel

1. In the Wix admin panel choose a website for the widget and click “Edit Site”. 
2. Open the website editor, click “Plus” icon
3. Go to the ‘Embed’ section and select “HTML i-frame”. 
4. Click ‘Enter code’ and paste the installation code to this block
5. Click “Apply”. 
6. Move the widget block to the right place on the page, adjust its size. 
7. Publish the changes.

That’s it, your widget will show up on the website as soon as this! 

Ask a professional Elfsight support team to help:)

And, of course, in case you use a widget on any paid plan, you can always drop them a note and they’ll be happy to add the animated Counter to Wix for you. Barely reach them out through the Elfsight Help Center and acquire the Number Counter widget added by professional developers!

How to add Squarespace Number Counter

Squarespace is among the very best platforms for anyone creating an ecommerce website. It’s somewhat evident that you need to save your time and money, and the best thought here is to use a ready-made tool called plugin. 

Benefits you get by using a plugin

1. You don’t need to code anything in your Squarespace counter
2. There are many templates offering professional ideas for your animated number counter
3. You build the counter on your own, without a web developer or designer, and you will never bother about the widget design and functionality
4. You can check the plugin in a free online editor

With the Elfsight plugin you may promptly position any counters on the site, strengthen the UX in just minutes and adjust the number counter anyhow you need. 

Features of the Elfsight Counter for a Squarespace website

• Decide on the icon format - take it from our library or upload a personalized one
• Unlimited number of columns
• An unlimited number of counters
• Numerous ready-made templates
• Adjustable space between the counters and their width
• Opportunity to attach headlines, postfixes, prefixes and captions
• Option to add links

You are welcome to get a closer look at the widget on this page. 

Moreover, take into consideration that there are more than 10 professional adjustable templates that you are free to easily find in the free online demo. You are welcome to consider how to present diverse types of counters, whether it’s work in numbers, customer satisfaction, or success in numbers. Below, you can find some of the examples, have a look: 

• Online Store
• Writer work in numbers
• University in numbers

How to add an animated Counter to Squarespace

You can add the plugin to Squarespace in various ways. You can smoothly do it on your own after minding a video and viewing our guideline on this page. 

Here are a few more ways to add the Number Counter to Squarespace. For instance, you may attach the widget with the help of Google Tag manager. 

Install the plugin through Squarespace admin panel

1. Choose a site for the plugin after you’ve logged in. 
2. Click “Edit” next to the page area where you need to display the widget 
3. Add a Code block. 
4. Paste your widget’s code to this block. 
5. Save your changes.

That’s it, your widget will appear on the web page right after you finish! 

Ask a professional Elfsight support team to help:)

Yes, in case your widget is on any paid plan, you can always ask them for installation and they’ll be happy to install the animated Counter on Squarespace for you. Just contact them through the Elfsight Help Center and obtain your Number Counter plugin added by professional developers!

How to add Counter to Weebly

Weebly is among the main platforms for anyone creating a portfolio website. It’s pretty clear you are willing to save your money and time, and your best thought here is to use an already created no-code instrument called plugin. 

Benefits you get by using a plugin

1. You don’t need to code anything in your Weebly counter
2. There are numerous templates presenting professional ideas for your tool
3. You create the counter on your own, with no web developer or designer, and you will never bother about the widget functionality and design
4. You can test the plugin in a free visual editor

With the Elfsight plugin you may immediately spot any counters on the site, enhance the UX in mere seconds and customize the number counter anyhow you wish. 

Features of the Elfsight animated counter for Weebly

• Decide on the icon format - get it from Elfsight collection or upload a personalized one
• Numerous ready-made customizable templates
• Opportunity to attach links
• Chance to add prefixes, captions, headlines and postfixes
• An unlimited amount of counters
• Unlimited amount of columns
• Flexible space between the counters and their width

You are welcome to explore the widget in greater detail on this page. 

Also, bear in mind that there are more than 10 pre-made adaptive templates which you can easily discover in the free online demo. You are welcome to consider how to display diverse types of counters, whether it’s customer satisfaction, work in numbers, or success in numbers. Here are some of the templates, enjoy: 

• Online Store
• Writer work in numbers
• University in numbers

How to add a Number Counter plugin to a Weebly website

There’s a chance to add the plugin to Weebly websites in a few various ways. You may effortlessly do it yourself after reading our guideline and minding a video on this page. 

Below you’ll find some more methods to install the Number Counter on Weebly. For instance, you can attach the tool with the help of Google Tag manager. 

Install the plugin through Weebly admin panel

1. Start editing your Weebly site
2. Drag and drop “Embed Code” element to the needed page area
3. Click on the block on the page and then press “Edit Custom HTML”
4. Paste the installation code into the block 
5. Publish the changes

This is like this, your widget will appear on the website right after you finish! 

Ask a professional Elfsight support team to help:)

Yes, in case you use a widget on any paid plan, you are always most welcome to drop them a line and they’ll be happy to add the animated Counter to Weebly for you. Barely reach them out through the Elfsight Help Center and obtain your Number Counter plugin added by professionals!

How to add Number Counter to Elementor

Elemntor is among the main plugins for those who make websites for small businesses and use WordPress. Most likely, if you use this extension, you wish to save your time and genuinely want your counter to look professional on the website. In this case, the wisest choice is to apply an exclusive widget. 

Benefits you get by using a widget

1. You don’t have to write JS code in your Elementor counter
2. There are various templates presenting professional ideas for your animated number counter
3. You make the counter yourself, with no web developer or designer, and you would never bother about the widget's functionality and design
4. You have an opportunity to try out the widget in a free online editor

With the Elfsight plugin you can immediately spot any counters on the website, improve the UX in just minutes and adjust the number counter anyhow you wish. 

Features of the Elfsight Counter for Elementor website

• Opportunity to attach postfixes, titles, prefixes and headings
• An unlimited amount of figures
• Flexible space between the counters and their width
• Various ready-made templates
• Unlimited amount of columns
• Decide on the icon format - pick it from our collection or upload your own
• Chance to attach links

You are welcome to take a closer look at the widget on this page. 

Moreover, keep in mind that there are 10+ professional adjustable templates which you can find in the free online demo. You can discover how to show various types of counters, whether it’s success in numbers, customer satisfaction, or work in numbers. Here are some of the templates, enjoy: 

• Online Store
• Writer work in numbers
• University in numbers

How to add a Number Counter widget to Elementor

You can add the plugin to Elementor websites in different ways. You may effortlessly do it on your own after viewing our guideline and watching a video on this page. 

Below you’ll find a few more ways to install the Number Counter on Elementor. For example, you may add the tool with the help of Google Tag manager. 

Install the plugin through Elementor panel

1. Go to the “Pages” section in the WordPress admin panel and select the required page. 
2. Click ‘Edit with Elementor’
3. Drag and drop the ‘HTML’ element to the right page area
4. Paste the installation code to the “HTML Code” field in the left-hand menu
5. Press “Update” to save the changes. 
6. If you need to install the widget to other pages, follow the same instructions for each page.

That’s it, your widget will come out on the website as soon as this! 

Ask a professional Elfsight support team to help:)

And, of course, in case your widget is on any paid plan, you can always drop them a note and they’ll be happy to add the animated Counter to Elementor for you. Just contact them through the Elfsight Help Center and get your Number Counter plugin installed by professionals!

How to add Number Counter to Google Sites

Google Sites is one of the best platforms for anyone creating a portfolio site. Very likely you want to save your time and really need your counter to look professional on the website. In such circumstances, the wisest decision is to use an exclusive widget. 

Benefits you get by using a plugin

1. You don’t need to code anything in your Google Sites counter
2. There are various templates offering professional ideas for your number counter
3. You make the counter yourself, with no web designer or developer, and you should never bother about the widget functionality and design
4. You have an option to check the widget in a free visual configurator

With the Elfsight plugin you may immediately position any counters on the website, improve the UX in just minutes and personalize the number counter the way you want. 

Features of the Elfsight Counter for Google Sites

• Chance to attach links
• Opportunity to add titles, headlines, prefixes and postfixes
• Decide on the icon type - get it from Elfsight library or upload your own
• Modifiable space between the counters and their widthAn unlimited number of counters
• Unlimited number of columns
• Various ready-to-use customizable templates

You are most welcome to explore the widget in more detail on this page. 

Also, keep in mind that there are more than 10 premade customizable templates which you are free to discover in the free online demo. You can explore how to show different types of counters, whether it’s customer satisfaction, work in numbers, or success in numbers. Below, are some of the examples, have a look: 

• Online Store
• Writer work in numbers
• University in numbers

How to add a Number Counter plugin to Google Sites

There’s an opportunity to add the Counter plugin to Google Sites in a few various ways. You can smoothly do it yourself after checking our guideline and watching a video on this page. 

Below there are a few more ways to add the Number Counter to Google Site. For instance, you can add the widget with the help of Google Tag manager. 

Install the plugin through Google Sites admin panel

1. Select the website to edit.
2. Click the “Embed” button on the “Insert” tab.
3. Paste your installation code on the “Embed Code” tab
4. Click “Next” and then “Insert”.
5. Adjust your widget’s size and position on a web page
6. Publish the changes.

This is like this, your widget will appear on the website as soon as this! 

Ask a professional Elfsight support team to help:)

Yes, if your widget is on any paid plan, you are always most welcome to ask them for installation and they’ll be happy to add the animated Counter plugin for you. Just contact them through the Elfsight Help Center and get the Number Counter plugin installed by professional developers!

Facebook Counter

You can draw more loyal clients and showcase your extraordinary achievements by placing a Number counter widget on your Facebook page. There is no opportunity to place any custom code in a usual page or group. However there is such a possibility on a Facebook page with more than 2000 likes. Also, if you wish to install the widget smoothly and without doubt, you should use a third-party solution, such as Woobox.

To Install the widget on Facebook, you’ll need to: open the dropdown menu in the upper right corner and choose your page -> click Static Tabs in the menu -> press Create a New Tab -> choose HTML Tab -> in the appeared editor, add your content or enter the code -> Press Save Settings. 

And you are done!

Website Counter Examples

There are a lot of different ideas of how you can use the widget on a website. Depending on your job, creativity, details you wish to share, you can choose a template specifically for you. You are free to customize any selected template the way you wish, to make it a concise element of your website style. 

Success in numbers

This is one of the classical website counter examples, with animated numbers, contrast background, and highlighted figures. You can add any details about your company, and they will all look extremely professional, as well as stylish.

Customer Satisfaction

The Customer Satisfaction template is the brightest and the most dynamic one. It gives an opportunity to tell your customers about your previous clients and their opinions. Add your own details, emojis, and make figures bigger in size.

Successful start

Shout out about your sparkling achievements after launching your company. Tell about the number of team members, as well as about happy clients.

FAQ

Wishing to master your number counter and make it the most appealing instrument on your website? You might be wondering what styling options are available for all the counters, what templates you can use in each case.