Page Views Counter

Note: You will need a Supabase account to use this component (and the great part is Supabase provides free accounts in their plan). I also include steps on how to configure Supabase and how you will get your Supabase URL and API/anon key.

The Page Views Counter is a powerful page view counter component for Framer that connects directly to Supabase to deliver accurate and secure tracking. It works as a live visitor counter, updating in real-time with smooth animations and customizable styles. Whether you need a website visitor counter for blogs, a traffic counter for high-traffic apps, or an engagement counter to measure audience interaction, this tool is production-ready and effortless to use.

Instructions

1. Copy and paste the component into your Framer project file.

2. Set up your Supabase database using the provided SQL code (setup guide available).

3. Connect your Supabase credentials by entering your project URL and public API key in the Component Control panel.

4. Customize the component’s appearance and behavior by adjusting properties such as number formatting, animation settings, tracking frequency, and typography.

5. Deploy your project – the realtime page views will start tracking instantly once live.

How It Works

This realtime analytics counter features 7 main controllers that manage different aspects of functionality:

• Database Setup: Configure Supabase URL and public API key for live data connection.

• Count Frequency: Choose when to increment views - every visit, once per session, every minute, hour, 6 hours, 12 hours, daily, or weekly - preventing spam and optimizing performance.

• Display Option: Set preview numbers for canvas mode, choose number formatting (plain, commas, compact), and customize text labels.

• Animation Settings: Toggle smooth counting animations or instant updates for a polished smooth animation counter experience.

• Styling Controls: Customize text color and typography including font family, size, weight, and line height.

Main Features

• Production-Ready: Robust error handling, caching, and optimized performance for high-traffic websites.

• Live Stats Counter: Track visitors in real-time with intelligent caching to prevent database overload.

• Smooth Animations: Beautiful interactive number counter with spring physics and pulse effects when numbers update.

• Flexible Tracking: Multiple frequency options from real-time to weekly intervals.

• Smart Formatting: Display numbers with commas or compact notation (1.2K, 1.5M).

• Canvas Preview: Test display formats instantly in the editor.

• Accessibility Compliant: Full ARIA support with semantic HTML for screen readers.

• Responsive Design: Works across all devices and orientations.

• Security-First: Safe database functions with minimal permissions.

• Easy Integration: Simple, no-code setup with clear instructions.

Properties Control Panel

Use Cases

• Blog views: Track and show how many times a blog post has been read, supporting content popularity metrics.

• Landing page visits: Display the total number of visitors to a product or promotional landing page.

• Portfolio engagement: Visitor counts for project portfolios to demonstrate interest and reach.

• Product page analytics: Show view counts on e-commerce product or campaign pages.

• Visitor counter: General real-time visitor counters for websites.

The Page Views Counter transforms a simple website hit counter into a powerful realtime analytics counter that doubles as an engagement counter. It not only tracks and displays realtime page views but also enhances user experience with interactive motion and reliable Supabase-backed data. Perfect for blogs, landing pages, SaaS dashboards, or any project that needs a live visitor counter with style.

Made with ❤️ by Nitso

Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com