Skip to content
Sites

Funnels & Websites: Number Counter Widget

Showcase revenue milestones and social proof with GHL Customer Care's Number Counter Widget. Add animated, smart formatted stats to sites and funnels. No code needed.

4 min read843 words7 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of the Number Counter Widget
  2. How to Add the Number Counter Widget to a Site or Funnel
  3. Setting Up Each Counter Metric (Configuration Values)
  4. Styling the Number Counter Widget (Customize Layout)
  5. Important Notes
  6. Frequently Asked Questions
  7. Related Articles

This article will show you how to use the Number Counter Widget to highlight your most important metrics in a bold, animated way! From revenue milestones to happy clients and social-proof stats, the Number Counter transforms plain numbers into dynamic visuals that grab attention and reinforce your brand story.

TABLE OF CONTENTS

What is the Number Counter Widget?

The Number Counter Widget is a native element in the Funnels & Websites builder that transforms numerical values into lively, count‑up animations. By combining smart formatting, customizable layout controls, and on‑scroll triggers, it lets you present key achievements in a way that’s both visually compelling and brand‑consistent.

What is the Number Counter Widget? (image 1 of 7) What this shows The Number Counter Widget is a native element in the Funnels & Websites builder that transforms numerical values into lively, count‑up animations. What this shows Illustrates the "What is the Number Counter Widget?" section of "Funnels & Websites: Number Counter Widget". This screenshot appears in the "What is the Number Counter Widget?" section of "Funnels & Websites: Number Counter Widget". The text alongside this image reads: The Number Counter Widget is a native element in the Funnels & Websites builder that transforms numerical values into lively, count‑up animations. By combining smart formatting, customizable layout controls, and on‑scroll triggers, it lets you present key achievements in a way that’s both visually…. Immediately after, the guide continues: Animated numbers do more than decorate your page — they help capture attention and instantly communicate credibility. Here’s why this widget is a game-changer. Image 1 of 7 What this coversThe Number Counter Widget is a native element in the Funnels & Websites builder that transforms numerical values into lively, count‑up animations. By combining smart formatting, customizable layout controls, and on‑scroll triggers, it lets you present key achievements in a way that’s both visually compelling and brand‑consistent. Next stepAnimated numbers do more than decorate your page — they help capture attention and instantly communicate credibility. Here’s why this widget is a game-changer:

Key Benefits of the Number Counter Widget

Animated numbers do more than decorate your page — they help capture attention and instantly communicate credibility. Here’s why this widget is a game-changer:

  • Multiple Counters: Display many counters in a single element to visually highlight your most important metrics

  • Smart Number Formatting: Automatically abbreviates large figures with K, M, B, or T for instant clarity

  • Prefix & Suffix Fields: Add $, €, %, + or any custom text before/after values

  • Counter‑Specific Images: Pair each number with an icon, badge, or logo to reinforce meaning

  • Layout Precision: Control layout of columns and fine‑tune gaps for pixel‑perfect alignment on every device

  • Complete Styling Controls: Customize colors, borders, shadows, and typography to match any brand

How to Add the Number Counter Widget to a Site or Funnel

Quickly add the widget to any funnel or website page using the following steps:

  1. Navigate to Sites → Funnels or Sites → Websites

    Step 1 of 4: Navigate to Sites → Funnels or Sites → Websites What this shows Step 1 of 4: Navigate to Sites → Funnels or Sites → Websites What this shows Shows where to go for step 1 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". This screenshot accompanies step 1 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". At this point in the walkthrough you navigate to Sites → Funnels or Sites → Websites. The next step is to click the blue Edit button on the desired page or step. Step 1 of 4Image 2 of 7 Where to goNavigate to Sites → Funnels or Sites → Websites
    Buttons and menus referenced Sites → FunnelsSites → WebsitesEdit+ Add ElementNumber Counter
    Next stepClick the blue Edit button on the desired page or step
    All 4 steps in this procedure
    1. Navigate to Sites → Funnels or Sites → Websites this image
    2. Click the blue Edit button on the desired page or step
    3. Select + Add Element in the sidebar and locate the Number Counter element
    4. Drag Number Counter into your layout where you want the metrics to appear.

  2. Click the blue Edit button on the desired page or step

    Step 2 of 4: Click the blue Edit button on the desired page or step What this shows Step 2 of 4: Click the blue Edit button on the desired page or step What this shows Shows what to click for step 2 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". This screenshot accompanies step 2 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". At this point in the walkthrough you click the blue Edit button on the desired page or step. The next step is to select + Add Element in the sidebar and locate the Number Counter element. Step 2 of 4Image 3 of 7 What to clickClick the blue Edit button on the desired page or step
    Buttons and menus referenced EditSites → FunnelsSites → Websites+ Add ElementNumber Counter
    Next stepSelect + Add Element in the sidebar and locate the Number Counter element
    All 4 steps in this procedure
    1. Navigate to Sites → Funnels or Sites → Websites
    2. Click the blue Edit button on the desired page or step this image
    3. Select + Add Element in the sidebar and locate the Number Counter element
    4. Drag Number Counter into your layout where you want the metrics to appear.

  3. Select + Add Element in the sidebar and locate the Number Counter element

    Step 3 of 4: Select + Add Element in the sidebar and locate the Number Counter… What this shows Step 3 of 4: Select + Add Element in the sidebar and locate the Number Counter element What this shows Shows where to go for step 3 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". This screenshot accompanies step 3 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". At this point in the walkthrough you select + Add Element in the sidebar and locate the Number Counter element. The next step is to drag Number Counter into your layout where you want the metrics to appear. Step 3 of 4Image 4 of 7 Where to goSelect + Add Element in the sidebar and locate the Number Counter element
    Buttons and menus referenced + Add ElementNumber CounterSites → FunnelsSites → WebsitesEdit
    Next stepDrag Number Counter into your layout where you want the metrics to appear.
    All 4 steps in this procedure
    1. Navigate to Sites → Funnels or Sites → Websites
    2. Click the blue Edit button on the desired page or step
    3. Select + Add Element in the sidebar and locate the Number Counter element this image
    4. Drag Number Counter into your layout where you want the metrics to appear.

  4. Drag Number Counter into your layout where you want the metrics to appear.

    Step 4 of 4: Drag Number Counter into your layout where you want the metrics to… What this shows Step 4 of 4: Drag Number Counter into your layout where you want the metrics to appear. What this shows Shows what this covers for step 4 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". This screenshot accompanies step 4 of 4 in the "How to Add the Number Counter Widget to a Site or Funnel" section of "Funnels & Websites: Number Counter Widget". At this point in the walkthrough you drag Number Counter into your layout where you want the metrics to appear. Step 4 of 4Image 5 of 7 What this coversDrag Number Counter into your layout where you want the metrics to appear.
    Buttons and menus referenced Number CounterSites → FunnelsSites → WebsitesEdit+ Add Element
    All 4 steps in this procedure
    1. Navigate to Sites → Funnels or Sites → Websites
    2. Click the blue Edit button on the desired page or step
    3. Select + Add Element in the sidebar and locate the Number Counter element
    4. Drag Number Counter into your layout where you want the metrics to appear. this image

Setting Up Each Counter Metric (Configuration Values)

After the widget is on your canvas, you can shape each counter to fit your needs. Add new metrics, remove any you don’t need, and customize every detail directly from the settings panel.

  • Add/Remove Counters: Click Add Counter to create more metrics or the trash icon to delete one.

  • Caption: Type a label such as “Total Sales” so visitors know what the number represents.

  • Image: Upload a PNG, JPEG, or SVG icon and adjust its size with the slider.

  • Start & End Values: Define where the animation begins (e.g., 0) and ends (e.g., 10 000).

  • Prefix/Suffix: Add context with $, €, %, +, or custom text placed before or after the value.

Setting Up Each Counter Metric (Configuration Values) (image 6 of 7) What this shows Add/Remove Counters: Click Add Counter to create more metrics or the trash icon to delete one. What this shows Illustrates the "Setting Up Each Counter Metric (Configuration Values)" section of "Funnels & Websites: Number Counter Widget". This screenshot appears in the "Setting Up Each Counter Metric (Configuration Values)" section of "Funnels & Websites: Number Counter Widget". The text alongside this image reads: Add/Remove Counters: Click Add Counter to create more metrics or the trash icon to delete one. Caption: Type a label such as “Total Sales” so visitors know what the number represents. Image: Upload a PNG, JPEG, or SVG icon and adjust its size with the slider. Start & End Values: Define where the…. Immediately after, the guide continues: After configuring your metrics, use the options under Counter Layout to refine spacing, colors, animation speed, and overall layout so the counters blend perfectly with your brand. Key style controls include. Image 6 of 7 What to fill inAdd/Remove Counters: Click Add Counter to create more metrics or the trash icon to delete one. Caption: Type a label such as “Total Sales” so visitors know what the number represents. Image: Upload a PNG, JPEG, or SVG icon and adjust its size with the slider. Start & End Values: Define where the animation begins (e.g., 0) and ends (e.g., 10 000). Prefix/Suffix: Add context with $, €, %, +, or custom text placed before or after the value. Next stepAfter configuring your metrics, use the options under Counter Layout to refine spacing, colors, animation speed, and overall layout so the counters blend perfectly with your brand. Key style controls include:
All 5 steps in this procedure
  1. Add/Remove Counters: Click Add Counter to create more metrics or the trash icon to delete one.
  2. Caption: Type a label such as “Total Sales” so visitors know what the number represents.
  3. Image: Upload a PNG, JPEG, or SVG icon and adjust its size with the slider.
  4. Start & End Values: Define where the animation begins (e.g., 0) and ends (e.g., 10 000).
  5. Prefix/Suffix: Add context with $, €, %, +, or custom text placed before or after the value.

Styling the Number Counter Widget (Customize Layout)

After configuring your metrics, use the options under Counter Layout to refine spacing, colors, animation speed, and overall layout so the counters blend perfectly with your brand. Key style controls include:

  • Image Size: Adjust icon dimensions

  • Space Between Counters: Adjust horizontal gaps to fine-tune spacing between counters for a polished look.

  • Number of Columns: Choose how many counters appear per row (1-5)

  • Animation Options: Define animation duration (1 s – 15 s) to control how quickly numbers count up. Use the viewport trigger so numbers animate only when scrolled into view.
  • Colors: Select individual swatches for Number, Caption, Background, and Container Background. Add borders and shadows to align with your brand aesthetic.
Styling the Number Counter Widget (Customize Layout) (image 7 of 7) What this shows Image Size: Adjust icon dimensions Space Between Counters: Adjust horizontal gaps to fine-tune spacing between counters for a polished look. What this shows Illustrates the "Styling the Number Counter Widget (Customize Layout)" section of "Funnels & Websites: Number Counter Widget". This screenshot appears in the "Styling the Number Counter Widget (Customize Layout)" section of "Funnels & Websites: Number Counter Widget". The text alongside this image reads: Image Size: Adjust icon dimensions Space Between Counters: Adjust horizontal gaps to fine-tune spacing between counters for a polished look. Number of Columns: Choose how many counters appear per row (1-5) Animation Options: Define animation duration (1 s – 15 s) to control how quickly numbers…. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Performance: Keep counters ≤ 20 per widget for optimal load times Image formats: Supported types are PNG, JPEG, and SVG Smart Formatting: Numbers are auto-formatted (e.g., “2500000” becomes “2.5 M”) to keep large stats clean and easy to…. Image 7 of 7 What to chooseImage Size: Adjust icon dimensions Space Between Counters: Adjust horizontal gaps to fine-tune spacing between counters for a polished look. Number of Columns: Choose how many counters appear per row (1-5) Animation Options: Define animation duration (1 s – 15 s) to control how quickly numbers count up. Use the viewport trigger so numbers animate only when scrolled into view. Colors: Select individual swatches for Number, Caption, Background, and Container Background. Add borders and shadows to align with your brand aesthetic.
Fields in this part of the guide Image Size: Adjust icon dimensions
Next stepPerformance: Keep counters ≤ 20 per widget for optimal load times Image formats: Supported types are PNG, JPEG, and SVG Smart Formatting: Numbers are auto-formatted (e.g., “2500000” becomes “2.5 M”) to keep large stats clean and easy to read. Images: Images are optional and can be toggled on or off per counter Animation: The animation triggers only once per page load to maintain smooth performance.
All 5 steps in this procedure
  1. Image Size: Adjust icon dimensions
  2. Space Between Counters: Adjust horizontal gaps to fine-tune spacing between counters for a polished look.
  3. Number of Columns: Choose how many counters appear per row (1-5)
  4. Animation Options: Define animation duration (1 s – 15 s) to control how quickly numbers count up. Use the viewport trigger so numbers animate only when scrolled into view.
  5. Colors: Select individual swatches for Number, Caption, Background, and Container Background. Add borders and shadows to align with your brand aesthetic.

Important Notes

  • Performance: Keep counters ≤ 20 per widget for optimal load times
  • Image formats: Supported types are PNG, JPEG, and SVG
  • Smart Formatting: Numbers are auto-formatted (e.g., “2500000” becomes “2.5 M”) to keep large stats clean and easy to read.
  • Images: Images are optional and can be toggled on or off per counter

  • Animation: The animation triggers only once per page load to maintain smooth performance.

Frequently Asked Questions

Q: Can I add different colors to each individual counter?
Currently, global styles apply to all counters for consistency. You can adjust background or container color globally.

Q: Can counters include decimals?
Yes! You can include decimal points in start and end numbers.

Q: Will the animation restart if I scroll back up?
No. The counters animate once when they first enter the viewport.

Q: Do I have to use images for each counter?
 No. Images are completely optional and can be added only where needed.

Q: How many counters can I add in one widget?

Technically unlimited. For best performance, keep it to 20 counters or fewer; beyond that, animations may appear sluggish on low‑powered devices.

Q: Will the counters adjust automatically on mobile?

Yes. Column settings and gap spacing respond to screen size so counters remain legible on any device.

Q: How can I replay the animation while editing?

Within the Number Counter settings panel, click Preview Animation to watch the count‑up again without leaving the editor.

Was this guide helpful?

Related guides

How to Add a Two‑Step Order Form to a Funnel5 min read · 12 imagesTracking Scripts/Pixel Code1 min readSEO Meta Data1 min readClick-To-Call, Click-To-Text, and Click-To-Email Links & Buttons for Websites and Funnels3 min read · 5 images