Introducing the Number Counter Widget in Funnels & Websites

/in

Transform raw statistics into captivating, animated highlights that grab attention and reinforce your brand’s achievements. Ideal for showcasing revenue milestones, satisfied clients, social-proof metrics, and more!

Multiple Counters, One Element

Add as many counters as your narrative requires—whether it’s a single hero stat or an entire grid of accomplishments, it’s effortless.

Automatically abbreviate large numbers with K, M, B, or T, so “2,500,000” effortlessly converts to 2.5 M.

Incorporate currency symbols, “+”, “%”, or any custom text before or after the animated value.

Attach an optional image (icon, badge, or logo) to each counter for immediate visual context.

Image Size Slider: Adjust size independently.

Counters per Row: Determine how many counters are displayed side-by-side (1–5).

Gap Control: Achieve pixel-perfect spacing between counters for flawless alignment.

Duration Control: Specify how quickly numbers count up (1 s – 15 s).

Viewport Trigger: Animation activates only when the counter scrolls into view—eliminating unnecessary movement off-screen.

Utilise colour pickers for Number, Caption, Counter Background, and Container Background.

Incorporate Border & Box-Shadow options for the container to align with your design language.

Showcase Success at a Glance

Animated metrics draw attention to your most significant wins, transforming plain figures into compelling evidence.

Built for Flexibility & Brand Consistency

Whether you require a minimalist stat bar or a vibrant infographic-style section, the widget adapts seamlessly—no custom code needed.

Viewport-aware animation enhances user experience by delivering delight precisely when users see it, ensuring crisp performance and a premium UX.

  1. Drag the Number Counter widget onto your page.
  2. Add Counters: Click “Add Counter” for each statistic.
  3. Set Values: Input your start and end numbers, and add prefixes/suffixes.
  4. Attach Images (optional) and adjust size.
  5. Customise Layout: Specify counters per row and spacing.
  6. Style colours, borders, shadows, and backgrounds.
  7. Refine Animation duration & ensure the viewport trigger works in preview.