Add Authentication, Bookmarking & Social Login to Your Framer Site with Gately

By kayode•April 17, 2026•8 mins

Framer is one of the best tools for building beautiful, fast websites. But out of the box, it doesn't handle user accounts, authentication, or member-only content. That's where Gately comes in.

With the Gately Framer Plugin, you can add a complete membership layer to any Framer site — login, signup, Google OAuth, page protection, bookmarking, favourites, and more — without touching a backend or writing server code. Everything connects through the Gately dashboard.

Step 1: Install the Gately Framer Plugin

Open your Framer project, go to Plugins in the left sidebar, and search for Gately. Or install directly from the Framer Plugin Store:

👉 Install the Gately Plugin

Once installed, open the plugin panel. You'll see the Installation tab — this is the key step.

Step 2: Connect Your Framer Project to Gately

In the Gately plugin, go to the Installation tab. Click Inject SDK. Gately will automatically add the Gately Client SDK to your Framer project's Custom Code — no manual copy-pasting required.

This single step connects your entire Framer site to your Gately project. The SDK loads on every page and handles authentication state, session management, and component communication automatically.

If you prefer to do it manually, the SDK script looks like this:

<script
  src="https://cdn.usegately.com/gately.min.js"
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>

Your Project ID is in Settings → General in your Gately dashboard.

Step 3: Add Login and Signup

With the SDK connected, drag the Login and Signup components from the Gately plugin onto your canvas. These are fully styled, production-ready forms that work immediately.

Each component has a Redirect URL property — set it to the page you want users to land on after authenticating.

Step 4: Add Google OAuth and Social Login

Gately supports Google OAuth out of the box. In your Gately dashboard, go to Settings → Authentication and enable Google login. Add your Google Client ID and Secret.

Then in Framer, set the showSocialLogin property on your Login and Signup components to true. A "Sign in with Google" button appears automatically — no extra code needed.

Once enabled, members can sign in with their Google account. Their profile picture, name, and email are pulled from Google automatically and stored in your Gately member database.

Step 5: Protect Pages and Content

Use the Content Protection component to make any page or section members-only.

To protect an entire page:

1. Add the Content Protection component to the page
2. Set the protection type: Any Member, Specific Plan, or Custom Rule
3. Set a Fallback URL — where non-members are redirected (usually your login page)

To protect a section within a page, use ContentLock — wrap any content block and set the required plan. Members on the wrong plan see a paywall or are redirected.

Step 6: Add Bookmarking and Favourites

One of the most powerful Gately features for Framer is the Bookmarking Button. It lets logged-in members save any CMS item, page, or piece of content to their personal favourites list.

This works with Framer CMS collections — blog posts, products, courses, portfolio items, anything. Members click the bookmark icon and the item is saved to their account. They can view all their saved items using the Bookmark List component.

To add bookmarking to a blog post page in Framer:

1. Drag the Bookmarking Button component onto your blog post template
2. Set the itemId property to the CMS item's slug or ID (use a Framer variable)
3. Publish — logged-in members can now bookmark any post

Create a "My Saved Posts" page and add the Bookmark List component. It automatically shows the current member's saved items, filtered by content type.

Step 7: Show Member-Specific Content

Use the Userdata component to display personalized content for each member — their name, email, avatar, plan, or any custom field stored in Gately.

For example, add a "Welcome back, {{name}}" heading to your dashboard page using the Userdata component. It renders the logged-in member's name automatically.

All Available Gately Components for Framer

The Gately plugin gives you 25+ ready-to-use components. Here's the full list:

What You Can Build

With Gately and Framer together, you can build things that weren't possible with Framer alone:

• Membership sites — gated content behind login, tiered access by plan
• Course platforms — video lessons with progress tracking and completion marking
• Community portals — member profiles, bookmarked content, social login
• SaaS dashboards — authenticated app pages with user-specific data
• Client portals — branded login experience for clients to access their resources
• E-commerce stores — cart, checkout, and order management built into Framer

Get Started

The Gately Framer Plugin is free to install and takes under 5 minutes to set up. Install the plugin, hit Inject SDK in the Installation tab, and your Framer site is connected to Gately.

• 👉 Install the Gately Framer Plugin
• 👉 Create a free Gately account
• 👉 Read the Framer Plugin docs
• 👉 Browse all Framer components