Skip to main content
The Gately Framer Plugin provides a seamless way to add membership functionality directly within the Framer editor. No code required.

Install Plugin

Get the Gately plugin from the Framer Plugin Store

​
Overview

The Gately Framer Plugin lets you:
  • Add login/signup forms to your Framer site
  • Protect pages and sections for members only
  • Display member-specific content
  • Show/hide elements based on authentication state
The Framer plugin is currently in early access with limited features. More functionality is being added regularly. For advanced use cases, consider using the JavaScript SDK alongside the plugin.

​
Installation

  1. Open your Framer project
  2. Go to Plugins in the left sidebar
  3. Search for “Gately” or click here to install
  4. Click Install

​
Setup

​
Connect Your Project

  1. Open the Gately plugin in Framer
  2. Enter your Project ID (found in Gately dashboard under Settings)
  3. Click Connect

​
Get Your Project ID

  1. Log in to app.usegately.com
  2. Go to Settings > General
  3. Copy your Project ID

​
Available Components

​
Login Form

Add a pre-built login form to any page:
  1. Open the Gately plugin
  2. Drag the Login Form component onto your canvas
  3. Customize styling to match your design
Properties:
PropertyDescription
Redirect URLWhere to send users after login
Show “Forgot Password”Toggle password reset link
Show “Sign Up” LinkToggle signup link

​
Signup Form

Add a registration form for new members:
  1. Drag the Signup Form component onto your canvas
  2. Configure required fields
  3. Set redirect URL for after signup
Properties:
PropertyDescription
Redirect URLWhere to send users after signup
Require NameMake full name required
Show Login LinkToggle login link

​
Auth Buttons

Add login/logout buttons that respond to auth state:
  • Login Button: Shows when user is logged out
  • Logout Button: Shows when user is logged in
  • User Avatar: Displays member’s profile picture

​
Protected Content

Wrap any content to make it members-only:
  1. Select the content you want to protect
  2. Right-click > Wrap in Gately Protection
  3. Configure access rules
Access Options:
OptionDescription
Any MemberAny logged-in user
Specific PlanOnly members on selected plan(s)
Custom RuleAdvanced access logic

​
Page Protection

Protect entire pages from non-members:
  1. Select the page in Framer
  2. Open Gately plugin
  3. Enable Protect This Page
  4. Set redirect URL for non-members

​
Current Limitations

The Framer plugin is in active development. Current limitations include:
FeatureStatus
Login/Signup Forms✅ Available
Page Protection✅ Available
Auth State Detection✅ Available
Plan-based Access🚧 Coming Soon
Member Profile Display🚧 Coming Soon
Form Embeds🚧 Coming Soon
Course Components🚧 Planned
For features not yet available in the plugin, use the JavaScript SDK with custom code.

​
Using SDK Alongside Plugin

For advanced functionality, you can use the Gately SDK with custom code in Framer: 
<!-- Add to your Framer site's custom code (Settings > General > Custom Code) -->
<script src="https://cdn.usegately.com/gately.min.js" data-project-id="YOUR_PROJECT_ID" defer></script>
Then use code overrides for custom logic: 
// Code Override in Framer
import { useEffect, useState } from "react"

export function withAuthCheck(Component) {
  return (props) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    
    useEffect(() => {
      if (window.Gately) {
        setIsLoggedIn(window.Gately.isAuthenticated())
      }
    }, [])
    
    if (!isLoggedIn) return null
    return <Component {...props} />
  }
}

​
Troubleshooting

  • Verify your Project ID is correct
  • Check that your project is active in Gately dashboard
  • Try disconnecting and reconnecting
  • Ensure you’ve published your Framer site
  • Check browser console for errors
  • Verify your site domain is allowed in Gately settings
  • Clear browser cache and cookies
  • Check that protection is properly configured
  • Verify the page is published (not just preview)

​
Support

Need help with the Framer plugin?

​
Changelog

VersionChanges
0.2.0Added page protection, auth buttons
0.1.0Initial release with login/signup forms