Page Views Counter
A real-time page views counter that connects to Supabase to track and display visitor count with smooth animations and customizable formatting options.
Make it with Workshop
Build your own component with AI
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.
Instructions
Copy and paste the component into your Framer project file
Set up your Supabase database using the provided SQL code (setup guide available)
Connect your Supabase credentials by entering your project URL and public API key in the Component Control panel
Customize the component's appearance and behavior by adjusting the properties in the right-hand panel (number formatting, animation settings, tracking frequency, and typography)
The component automatically starts tracking page views once deployed to your live site
How It Works
This component 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, Every Hour, Every 6 Hours, Every 12 Hours, Daily, 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 number updates
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.
✅ Real-Time Analytics: Live page view tracking with intelligent caching to prevent database overload.
✅ Smooth Animations: Beautiful counting animations with spring physics and pulse effects when numbers update.
✅ Flexible Tracking: Multiple frequency options from real-time to weekly intervals, perfect for different use cases.
✅ Smart Formatting: Display large numbers elegantly with comma separators or compact notation (1.2K, 1.5M).
✅ Canvas Preview: See exactly how your formatting will look with customizable preview numbers.
✅ Accessibility Compliant: Full ARIA support with screen reader announcements and proper semantic HTML.
✅ Responsive Design: Works seamlessly across all device sizes and orientations.
✅ Security-First: Uses secure database functions with minimal permissions and protection against SQL injection.
✅ Easy Integration: Simple setup process with clear instructions.
Properties Control Panel
This component transforms a simple visitor counter into a powerful engagement tool that enhances user experience while providing valuable analytics insights for your website or web app.
