top of page
Search

How to Add a Dynamic Count‑Up Number in Wix Using HTML Embed – Free Method & No Developer‑Mode/Velo Required!

Table of Contents


1. Why Use a Count‑Up Animation? {#why}

Animated counters are visually engaging and effective trust builders. Show key stats—like “500+ clients served”—with a sleek animation that avoids heavy Wix apps forum.wixstudio.com+9dallastexaswebdesignco.com+9forum.wixstudio.com+9forum.wixstudio.comstackoverflow.com. Using custom HTML/JS gives you full design control without unnecessary app bloat (and saves you any additional cost, BECAUSE IT'S FREE!).



BEFORE



2. Prepping Your Wix Page {#prep}

  • Navigate to your Wix Editor.

  • Drag in a HTML embed element.

  • Resize it to fit where you’ll display your counter.

👍 No need to enable Dev Mode or use Velo!


3. Embedding the HTML/JS Code {#embed}

Copy &

Paste the snippet of code below into the HTML embed's code box:


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Dynamic Count-Up</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');


body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: 'Poppins', sans-serif;

background-color: transparent;

}


font-size: 50px;

font-weight: 800; /* Extra Bold */

color: #D6CC80; /* Updated color */

}

</style>

</head>

<body>

<div id="count">0+</div>


<script>

const countEl = document.getElementById("count");

const target = 170; // Set your target number here

const duration = 2000; // Duration in milliseconds


let start = 0;

const increment = target / (duration / 16); // ~60fps


const counter = () => {

start += increment;

if (start < target) {

countEl.textContent = Math.floor(start) + "+";

requestAnimationFrame(counter);

} else {

countEl.textContent = target + "+";

}

};


counter();

</script>

</body>

</html>


  • Wrap everything in the HTML embed window.

  • Styles, markup, and script all live here—super clean and portable.



4. Customizing Your Counter {#customize}

  • Target number: Change const target = 1000;

  • Animation time: Adjust duration = 2000; (in ms)

  • Plus symbol suffixed via + in textContent

  • Font & styling: We've used Poppins Extra Bold, 50px, color #D6CC80

You can easily modify font, size, and color inline.



AFTER

This of course just shows the one element updated with the dynamic counter, but this same code can be applied and used for all elements in this section!



5. SEO & UX Best Practices {#seo}

  • Use semantic text element IDs or aria-labels for accessibility (e.g., <h2 id="clients-count">).

  • Lazy-load the counter on scroll to reduce initial page load.

  • Optimize your HTML embed code for mobile—ensure fonts scale and colors pop across all devices.


✅ Summary

  • No Developer Mode or Velo required—just Wix's HTML embed.

  • Full control over font, animation, and design.

  • Lightweight, fast-loading custom counter without relying on third-party apps.

  • Little JS goes a long way if you want multiples or scroll-triggered animation.


Start embedding and impress clients with engaging dynamic stats — no code headaches!

Need help? Let us know in the comments below if you'd like support with scroll-trigger, multiple counters, or adding CSS effects like shadows, easing, or gradients!

Comentários

bottom of page