## 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](/content/docs/sdk/introduction/index.html) 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](https://framer.link/f0P1u3t)
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](https://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:**

| Property | Description |
| --- | --- |
| Redirect URL | Where to send users after login |
| Show “Forgot Password” | Toggle password reset link |
| Show “Sign Up” Link | Toggle 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:**

| Property | Description |
| --- | --- |
| Redirect URL | Where to send users after signup |
| Require Name | Make full name required |
| Show Login Link | Toggle 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:**

| Option | Description |
| --- | --- |
| Any Member | Any logged-in user |
| Specific Plan | Only members on selected plan(s) |
| Custom Rule | Advanced 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:

| Feature | Status |
| --- | --- |
| 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](/content/docs/platforms/framer/index.html) 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:

```javascript
// 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](/content/docs/platforms/framer/index.html) for SDK usage
- Join our [Discord community](https://discord.gg/gately)
- Contact [support@usegately.com](mailto:support@usegately.com)

## Changelog

| Version | Changes |
| --- | --- |
| 0.2.0 | Added page protection, auth buttons |
| 0.1.0 | Initial release with login/signup forms |