When designing a new Wix website you may have asked yourself: “How do I add a number counter to my website?”
Don’t worry, you’re not alone.
Applying code can be confusing to new website builders, so we found an easy solution to help.
👨💻👩💻
For Advanced Users:
There is a great forum on the Wix website that provides code and insight on adding a number counter to your website. You can check it out here.
In this blog, we are going to walk you through a very simple process to implement a number counter on your Wix website that is designed to look great.
What is a number counter?
A number counter on a website displays animated numbers, with the counter going from zero to the number or dollar amount you specify.
Example number counter:
Common uses for a number counter would be:
How many years in business
How many clients served
How much money you have earned/ saved for your clients
How can a number counter help?
A number counter can help show your website visitors and potential clients data related to your company to help improve important buying decisions such as trust, experience, and expertise.
Build trust with your website visitors
Showcase your work experience
Prove yourself with data-backed success
Steps to add a number counter to your Wix website
Wix Number Counter app
We are going to use a third-party plugin from Elfsight that syncs perfectly into your Wix website without the need for complicated code.
Elfsight has over 60+ widgets that work great with Wix if you’re looking to add new design elements to your website.
To get started, go to the Elfsight website and create a free account.
After creating your account, you will be dropped right into the Elfsight app center
In the search bar provided, type in Number Counter and select the number counter application
After selecting the number counter, the next screen will show the displays available to you that can be placed on your Wix Website
The left-hand column is the selector that allows you to view and select the different number counter designs
After selecting the design that best meets your need, clicking Continue with this template will allow you to adjust the content, layout, settings, and style for your template
Content
Here you can adjust and add the data that is displayed on the widget once added to your website.
Layout
Under layout, you can adjust the space between columns, add columns, and adjust how it should look on mobile.
Settings
The settings tab allows you to increase or decrease animation speed and format of the data displayed such as $ vs %.
Style
Style is where you can customize your chosen template to match your branding and overall design before placing the widget on your website.
You can adjust elements such as the background, icons, heading, and even add custom CCS.
After designing and adding your data to your number counter template it's time to add to your website.
Click Save in the top right corner after you are finished designing and adding all your data to the template.
After clicking save you will be directed to the Elfsight pricing page. Here you will see multiple packages, but we are going to stick with the Lite package.
After selecting the package that best meets your needs, you will be taken to the dashboard listing your new Widget.
After clicking on Add to Website, a new window will appear that provides the code that needs to be placed on your Wix website.
Copy this code or keep this page up to use later after completing the next steps.
Installing the Number Counter code on your Wix Website
Installing the Elfsite Code on your Wix Website is easy.
After copying the code that was provided for your new widget, login into your Wix Website, and navigate to the page you want the number counter to appear on.
After logging in and navigating to your page, you will then want to add the following element: Embed - HTML iframe Element.
After selecting the HTML iframe, your new element will be displayed on your page.
Next, select your HTML iframe and hit Enter Code and place the ElfSight code copied earlier from your new widget into the HTML Settings and click Apply to make active.
After clicking Apply, your new number counter will appear on your website.
The great thing about the Elfsight widget and using Wix is that you have the same control over how you want the banner to be displayed as many other elements in the Wix editor.
We hope this helps - a number counter is a great way to show value to your customers and prospective clients.
Have questions or need help? Let us know!