Realtime Reaction Pro

Supabase

Setup Guide

1. Create a New Project

Go to supabase.com and sign up/in.
Click "New Project".
Name your project, set a secure database password, and choose a region close to your users.
Click "Create new project". Wait for it to initialize.

2. Get Your API Keys

Go to API Docs > Introduction in your project's dashboard.
Find your Project URL (https://your-project-ref.supabase.co).
Go to Project Settings > API Keys > Legacy API Key in your project's dashboard.
Find your anon/public key
Copy these. You will need them for the Framer component's supabaseUrl and supabaseAnonKey properties.

3. Run the SQL to Create the Table

Go to the SQL Editor in the left sidebar.
Click "New query".
Copy the code below and Paste the entire SQL code block below into the editor.
Click "Run" to execute it.access.

Copy Code

Copied

-- Create the table and set up security policies
CREATE TABLE reactions (
  id TEXT PRIMARY KEY,
  counts JSONB DEFAULT '{}',
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable read access for everyone
CREATE POLICY "Allow public read access" ON reactions FOR SELECT USING (true);

-- Enable update access for everyone
CREATE POLICY "Allow public update access" ON reactions FOR UPDATE USING (true);

-- Enable insert access for everyone
CREATE POLICY "Allow public insert access" ON reactions FOR INSERT WITH CHECK (true)

4. You're Done!

Your database is now ready. Use the API keys from Step 2 to connect your Framer component. The table will automatically be created and secured for public read/write access.

CMS

Setup Guide

1. Drag & Drop

Grab the Realtime Reaction Pro the Insert menu and drop it onto your canvas.

2. Connect to your CMS Field

You just need to set a 'Custom ID' by connecting it to the (title/slug) field.
Once someone reacts to your article, it will automatically appear in the Supabase database according to the connected title.

You can see an example of its application on the Articles page.