About the Number Counter Widget
Zyff's number counter widget shows your key figures counting up as visitors scroll to them, free — projects delivered, years in business, countries served, percentage who would recommend you. Each figure takes a prefix, a suffix and its own decimal places, so "£1,200", "98%" and "4.9" all sit correctly in the same row. The count starts when the widget scrolls into view, uses tabular figures so nothing jitters while it runs, and shows the final numbers immediately to anyone who has asked for reduced motion. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add animated counting numbers to your website
Add your figures
Each one takes a number, a label, and optionally a prefix or suffix. The prefix and suffix sit still while the number counts, because animating a pound sign reads as a glitch.
Pick a layout
A simple row with dividers under a hero, cards that read as separate claims, a tinted band that acts as a section break, or bare numbers with no chrome at all.
Set the pace
Choose how long the count takes, or set it to zero for no animation. Preview it as many times as you like with the replay button.
Copy the embed code
Paste the container div and script tag where the figures should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Number Counter Widget does
Counts on scroll, not on load
The animation starts when the widget comes into view, so a figure near the bottom of a long page is still counting when the visitor gets there rather than having finished minutes earlier.
Prefixes and suffixes stay put
They are separate fields from the number, so "£" and "%" sit still while the figure counts. Animating them along with the digits is the most common way this effect looks broken.
No jitter while it runs
Tabular figures keep every digit the same width, so the row does not shift on every frame as the numbers change — which otherwise reads as a rendering fault rather than an animation.
A separator you choose
Comma, full stop or none. A European site can show 1.200 without Zyff guessing a locale, and the preview and the live embed always agree because nothing is locale-formatted.
Respects reduced motion
A visitor whose system asks for less motion sees the final figures immediately. A rapidly changing number is exactly the kind of movement that setting exists for, and unlike a fade it makes the content unreadable while it runs.
No claims a machine can read
The widget publishes no structured data. These are your own figures with nothing verifying them, and machine-readable markup asserting them would be a checkable claim on your domain.
At a glance
| Figures | Up to 8, each with a value, prefix, suffix, label and decimal places |
|---|---|
| Layouts | 4 templates: simple row, cards, boxed band, minimal |
| Animation | 0 to 5 seconds, eased; 0 disables it |
| Separator | Any character, or none |
| Columns | 1 to 6, stacking to 1 below 640px |
| Structured data | None — no markup asserts the figures |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add animated counting numbers to my website?
Add your figures in Zyff's builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
When does the count start?
When the widget scrolls into view, not when the page loads. A counter near the bottom of a long page would otherwise finish counting long before anyone reached it, which defeats the point of animating it at all.
Can I turn the animation off?
Yes — set the duration to zero and the final figures show immediately. It also switches itself off for visitors whose system asks for reduced motion, without you doing anything.
Why are the prefix and suffix separate fields?
So they stay still while the number counts. If "£" were part of the value it would animate along with the digits, and a currency symbol flickering through a count is the single most common way this effect looks broken.
Can I show decimals?
Yes, up to two places, set per figure. A rating of 4.9 and a count of 1,200 can sit in the same row with the right precision each — a single setting for the whole widget would force one or the other to look wrong.
Which thousands separator does it use?
Whichever you choose — a comma, a full stop, or none at all. It is a setting rather than a guessed locale, which also means the builder preview and the live embed always show the same thing.
Will these numbers show up in Google?
Not as structured data. The widget publishes none, because nothing verifies "10,000 happy customers" and machine-readable markup asserting it would be a checkable false claim on your own domain. The numbers are there for your visitors to read.
Where do I paste the counter embed code?
Wherever the figures should appear — usually a band under the hero on a home page, or partway down an about page. Put the container div in that spot and keep the script tag with it.
Is the number counter widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Counter by Zyff" link, which is how the tool stays free. The simple row and minimal layouts are free, and so is the animation itself along with the separator setting: the animation is the widget's whole point, and the separator is a correctness setting rather than a style one. A paid plan adds the cards and boxed layouts, full colour control and removes the attribution link.