--- title: "Page Views Counter — Framer component · Best of Framer" description: "$9.00 · Framer component · by Soyeb · Interactive. The Page Views Counter is a powerful page view counter component for Framer that connects directly to Supabase to deliver accurate…" canonical: "https://framer.elliotli.dev/component/page-views-counter" --- [Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Page Views Counter # Page Views Counter Live page view analytics counter [View on Framer](https://framer.com/marketplace/components/page-views-counter/?via=elliot-li) ![Page Views Counter preview image 1](https://framer.elliotli.dev/og/component/page-views-counter/df6aa37bb0bc33bf/1600x1200.jpg) ## Summary The Page Views Counter is a powerful page view counter component for Framer that connects directly to Supabase to deliver accurate and secure tracking. ## Description **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 project Id and API/publishable 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 ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a6whea1h-o5sKw1N3t0xF4URk4G0bWy6rOjY6ZN) ## 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** [**Soyeb**](https://framer.link/market) Have questions or need a custom Framer component? Reach out at [heysoyebali@gmail.com](mailto:heysoyebali@gmail.com) ## Rank history [How rankings work →](/terms#rankings) - All · #6310 ## Details - **Author**: Soyeb - **Price**: $9.00 - **Published**: 2025-08-13 - **Updated**: 2026-05-27 - **Added**: 2025-08-08 - **Categories**: Interactive ## More like this - [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect - [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully - [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown - [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase