Using the Number Counter Widget

What Is the Number Counter Widget?

The Number Counter Widget is a built-in feature in your CRM’s site and funnel builder. It turns static numbers into animated, eye-catching counters that highlight key metrics—like revenue, client counts, or social proof—in a dynamic and engaging way.

Key Benefits

Using animated counters helps capture attention and build credibility by presenting data in a visually appealing format. Key advantages include:

• Multiple Counters: Show several metrics in a single widget.
• Smart Formatting: Large numbers are automatically abbreviated (e.g., 1,500 becomes 1.5K).
• Prefixes and Suffixes: Add symbols like $, %, or custom text before or after values.
• Custom Images: Pair each counter with an icon or logo.
• Layout Control: Adjust columns, spacing, and alignment for a polished look.
• Full Styling: Customize colors, borders, shadows, and fonts to match your brand.

Adding the Widget to a Page

To add a Number Counter Widget to your site or funnel:

1. Go to Sites → Funnels or Sites → Websites.
2. Click the blue Edit button on the page or step where you want the widget.
3. In the sidebar, select + Add Element and find the Number Counter.
4. Drag it to your desired location on the page.

Configuring Counter Metrics

Once the widget is placed, customize each counter through the settings panel:

• Add or Remove Counters: Use the Add Counter button or trash icon to manage metrics.
• Caption: Enter a label (e.g., “Happy Clients”) to describe the number.
• Image: Upload a PNG, JPEG, or SVG icon and adjust its size with the slider.
• Start and End Values: Set the beginning and final numbers for the animation (e.g., start at 0, end at 10,000).
• Prefix/Suffix: Add symbols or text before or after the number for context.

Styling the Widget

Use the style options to make the counters fit your brand:

• Image Size: Adjust the dimensions of icons.
• Space Between Counters: Control horizontal gaps for a clean layout.
• Number of Columns: Choose how many counters appear per row (from 1 to 5).
• Animation Duration: Set how long the count-up takes (1 to 15 seconds).
• Viewport Trigger: Enable so numbers animate only when scrolled into view.
• Colors: Customize colors for numbers, captions, backgrounds, and containers.
• Borders and Shadows: Add these elements to align with your design.

Important Notes

• Performance: For optimal loading, use 20 or fewer counters per widget.
• Image Formats: Supported types are PNG, JPEG, and SVG.
• Smart Formatting: Large numbers are automatically abbreviated for readability.
• Images Optional: You can toggle images on or off for each counter.
• Animation Behavior: Counters animate only once per page load.

Frequently Asked Questions

Can I use different colors for each counter?

No, color styles are applied globally to all counters in the widget for consistency.

Can counters include decimals?

Yes, you can use decimal points in start and end values.

Does the animation replay if I scroll back up?

No, it triggers only once when the counter first enters the viewport.

Are images required?

No, they are optional and can be added only where needed.

How many counters can I add?

While technically unlimited, we recommend using 20 or fewer for best performance.

Do counters adjust on mobile devices?

Yes, column settings and spacing respond automatically to screen size.

How can I preview the animation while editing?

In the settings panel, click Preview Animation to replay the count-up effect.