Number Counter Widget for Funnels and Websites in Sparkforge

The Number Counter Widget animates numeric values inside Sparkforge funnels and websites. Use it for revenue milestones, client counts, social proof, or any metric you want to highlight on a landing page.

What the Number Counter Widget does

The widget converts static numbers into count-up animations that fire when the element scrolls into view. Each counter supports a caption, optional icon, custom start and end values, prefixes, and suffixes.

• Multiple counters per widget for grouped metrics
• Smart formatting auto-abbreviates large figures (K, M, B, T)
• Prefix and suffix fields for $, €, %, +, or custom text
• Per-counter images in PNG, JPEG, or SVG
• Layout controls for columns (1–5) and gap spacing
• Style controls for color, border, shadow, and typography

Add the widget to a page

1. Go to Sites → Funnels or Sites → Websites.
2. Click the blue Edit button on the page or step.
3. In the sidebar, choose + Add Element and find Number Counter.
4. Drag it into the layout where you want the metrics to appear.

Configure each counter

With the widget on the canvas, open the settings panel to add or remove counters and edit values:

• Add/Remove Counters: Click Add Counter or the trash icon.
• Caption: Label the counter (for example, "Total Sales").
• Image: Upload PNG, JPEG, or SVG and adjust size with the slider.
• Start & End Values: Set where the animation begins and ends.
• Prefix/Suffix: Add $, €, %, +, or custom text.

Style the layout

Open Counter Layout to refine spacing, color, and animation:

• Image Size: Adjust icon dimensions.
• Space Between Counters: Tune horizontal gaps.
• Number of Columns: 1–5 per row.
• Animation: Set duration (1–15 seconds) and enable the viewport trigger so numbers animate only when scrolled into view.
• Colors: Pick swatches for number, caption, background, and container background. Add borders and shadows.

Performance and behavior notes

• Keep counters at 20 or fewer per widget for smooth animation on low-powered devices.
• Numbers auto-format ("2500000" becomes "2.5M").
• The animation triggers once per page load and does not replay on scroll-up.
• Column and gap settings respond to screen size, so counters stay legible on mobile.
• Click Preview Animation in the settings panel to replay while editing.