# 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. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/funnels-websites-number-counter-widget - Section: Sites / Funnels and Websites - Reading time: 4 min - Images: 7, each explained below --- 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?](#what-is-the-number-counter-widget) - [Key Benefits of the Number Counter Widget](#key-benefits-of-the-number-counter-widget) - [How to Add the Number Counter Widget to a Site or Funnel](#how-to-add-the-number-counter-widget-to-a-site-or-funnel) - [Setting Up Each Counter Metric (Configuration Values)](#setting-up-each-counter-metric-configuration-values) - [Styling the Number Counter Widget (Customize Layout)](#styling-the-number-counter-widget-customize-layout) - [Important Notes](#important-notes) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049314932/original/ptqnlVkY3-4mtMRiyvasI6qZlowBnIq8bQ.png) **What is the Number Counter Widget? (image 1 of 7)** 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. - What this covers: 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. - Next: 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: --- ## **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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049551969/original/ojSqkTUNrpIpAsMiYpH4WzJA9BZD1n0DAQ.jpeg) **Step 1 of 4: Navigate to Sites → Funnels or Sites → Websites** 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. - Where to go: Navigate to Sites → Funnels or Sites → Websites - Controls: Sites → Funnels, Sites → Websites, Edit, + Add Element, Number Counter - Next: Click the blue Edit button on the desired page or step Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049551971/original/7To8UF75RQfwqrlub0LMkLeTuxAj5TpOGg.jpeg) **Step 2 of 4: Click the blue Edit button on the desired page or step** 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. - What to click: Click the blue Edit button on the desired page or step - Controls: Edit, Sites → Funnels, Sites → Websites, + Add Element, Number Counter - Next: Select + Add Element in the sidebar and locate the Number Counter element Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049551968/original/tbHMM05xTuNjpxPOYmg6xuiNA_75dbH2Jw.jpeg) **Step 3 of 4: Select + Add Element in the sidebar and locate the Number Counter…** 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. - Where to go: Select + Add Element in the sidebar and locate the Number Counter element - Controls: + Add Element, Number Counter, Sites → Funnels, Sites → Websites, Edit - Next: Drag Number Counter into your layout where you want the metrics to appear. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049551970/original/R4v3fTjPUq8FpArMtMz1ECfF-A4CkyLOjg.jpeg) **Step 4 of 4: Drag Number Counter into your layout where you want the metrics to…** 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. - What this covers: Drag Number Counter into your layout where you want the metrics to appear. - Controls: Number Counter, Sites → Funnels, Sites → Websites, Edit, + Add Element Full 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049551985/original/eQp8uWWlLOuhGfYRWtouQ2kQJW0xyd-iPw.jpeg) **Setting Up Each Counter Metric (Configuration Values) (image 6 of 7)** 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. - What to fill in: 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. - Next: 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: Full 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049552010/original/tInRGvNZT1klO--Igmt5T1TUE8haV0DC2w.jpeg) **Styling the Number Counter Widget (Customize Layout) (image 7 of 7)** 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…. - What to choose: 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. - Fields: Image Size: Adjust icon dimensions - Next: 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. Full 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. --- ## **Related Articles** - [Sites Overview](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) - [Getting Started - Launch A Funnel](https://docs.ghlcustomercare.com/docs/getting-started-w-ghl-customer-care/foundational-setup/how-top-launch-a-ghl-customer-care-funnel) - [Animation Customizations in Funnels & Websites](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/animation-customizations-in-funnels-websites) - [How to use Countdown Timers in Funnels?](https://docs.ghlcustomercare.com/docs/marketing/countdown-timer/how-to-use-countdown-timers-in-funnels) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com