(Squarespace) How to add Number Counter to Squarespace

[tuanphan]

To add Number Counter to Squarespace.

• Number Counter

• Number will run on scroll

#Option 1. Use HTML Embed Code

You can also use this free tool , so you can add Number Counter easier.

#1 . Add Code Block

#2. Paste this HTML embed code

<style>
    .counter-container {
        display: flex;
        justify-content: space-around;
        padding: 50px 20px;
        text-align: center;
        background-color: white;
        font-family: Arial, sans-serif;
    }
    
    .counter-item {
        padding: 20px;
    }
    
    .counter {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .counter-text {
        font-size: 16px;
        color: #666;
    }
</style>
<div class="counter-container">
    <div class="counter-item">
        <div class="counter" data-target="10000" data-suffix="+">0</div>
        <div class="counter-text">Customers we have served</div>
    </div>
    
    <div class="counter-item">
        <div class="counter" data-target="97" data-suffix="%">0</div>
        <div class="counter-text">Of our clients recommend us</div>
    </div>
    
    <div class="counter-item">
        <div class="counter" data-target="30" data-suffix="+">0</div>
        <div class="counter-text">Years of meeting client needs</div>
    </div>
</div>
<script>
        const counters = document.querySelectorAll('.counter');
        let counted = false;
        
        function startCounting() {
            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                const suffix = counter.getAttribute('data-suffix') || '';
                const increment = target / 100;
                
                const updateCounter = () => {
                    const count = +counter.innerText.replace(/[^0-9.-]+/g, '');
                    if (count < target) {
                        counter.innerText = Math.ceil(count + increment) + suffix;
                        setTimeout(updateCounter, 15);
                    } else {
                        counter.innerText = target + suffix;
                    }
                };
                
                updateCounter();
            });
        }
        
        const counterSection = document.querySelector('.counter-container');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !counted) {
                    counted = true;
                    startCounting();
                }
            });
        }, { threshold: 0.1 });
        
        observer.observe(counterSection);
    </script>

#3. To change Number, you can change these lines.

To change text, change these

To change number style, change this.

To change text style, change this.

To change white background around number counter, change this.

#4. Result

#Option 2. Use Number Counter Widget

Toadd Number Counter to Squarespace, you can use this free tool. Follow these steps.

#1. First, access this free tool and click Create widget for free

#2. Choose Number Counte r layout and click Continue with this template .

#3. Next, Add Content

You can also Edit numbers, style layout here then click Add to website for free.

#4. Next, Click Publish on top right

#5. Choose Free Plan and click Copy Code .

#6. Add Code Block

#7. Paste your embed code

#8. Result