Page View Counter

Page View Counter

Track and display page views on your Framer website with a lightweight, animated counter powered by Supabase. The component automatically detects the current page, creates a database record if one doesn't exist, and increments the view count on every visit.

Perfect for blogs, portfolios, documentation, landing pages, and business websites. No external analytics service or backend setup is required—just connect your own Supabase project and publish.

Features

• 👁 Automatic page view tracking

• ⚡ Powered by Supabase

• ✨ Smooth animated counter

• 📍 Detects the current page automatically

• 🔄 Creates page records automatically

• 🎨 Fully customizable design

• 📱 Responsive by default

• 🔐 Uses your own Supabase project

• 🚀 No coding required

Setup Guide

1. Create a Supabase Project

Create a free project at supabase.com.

2. Create the Database Table

Run this SQL in SQL Editor:

CREATE TABLE page_views ( id BIGSERIAL PRIMARY KEY, slug TEXT UNIQUE NOT NULL, views INTEGER DEFAULT 0, updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() );

3. Enable Row Level Security (RLS)

Enable RLS on the page_views table.

4. Create Policies

CREATE POLICY "Allow public read access" ON page_views FOR SELECT USING (true); CREATE POLICY "Allow public insert access" ON page_views FOR INSERT WITH CHECK (true); CREATE POLICY "Allow public update access" ON page_views FOR UPDATE USING (true);

5. Connect the Component

Go to Project Settings → API and copy:

• Project URL

• Anon (Public) Key

Paste both values into the component's property controls in Framer.

6. Publish

Publish your site and visit any page containing the component. Each page automatically creates its own record and updates its view count.

Important: Never use your Service Role Key. Only use the Anon (Public) Key in Framer.

Need help? Feel free to reach out—I'm happy to help you get everything working.