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:

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:

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:

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:

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

Plugin not connecting

• Verify your Project ID is correct
• Check that your project is active in Gately dashboard
• Try disconnecting and reconnecting

Login form not working

• Ensure you’ve published your Framer site
• Check browser console for errors
• Verify your site domain is allowed in Gately settings

Protected content showing

• 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?

• Check the Framer integration guide for SDK usage
• Join our Discord community
• Contact support@usegately.com

Changelog