How to add Number Counter to Google Sites

[tuanphan]

To add Number Counter to Google Sites.

• Number Counter
• Number will run on scroll

#Option 1. Use HTML Embed Code

#1 . You can add an Embed widget

#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>

Like this

#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.

#Option 2. Use Number Counter Widget

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

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

#2. Choose Number Counter 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. You can add it to Google Sites via Embed Feature.

#7. Paste your embed code

#8. Result