> ## Documentation Index
> Fetch the complete documentation index at: https://usegately.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer Plugin

> Native Gately integration for Framer sites

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

<Card title="Install Plugin" icon="download" href="https://framer.link/f0P1u3t">
  Get the Gately plugin from the Framer Plugin Store
</Card>

## 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

<Note>
  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](/docs/sdk/introduction) alongside the plugin.
</Note>

## 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           | ✅ Available    |
| Page Protection        | ✅ Available    |
| Auth State Detection   | ✅ Available    |
| Plan-based Access      | 🚧 Coming Soon |
| Member Profile Display | 🚧 Coming Soon |

For features not yet available in the plugin, use the [JavaScript SDK](/docs/platforms/framer) with custom code.

## Using SDK Alongside Plugin

For advanced functionality, you can use the Gately SDK with custom code in Framer:

```html theme={null}
<!-- 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 theme={null}
// 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

<AccordionGroup>
  <Accordion title="Plugin not connecting">
    * Verify your Project ID is correct
    * Check that your project is active in Gately dashboard
    * Try disconnecting and reconnecting
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="Protected content showing">
    * Clear browser cache and cookies
    * Check that protection is properly configured
    * Verify the page is published (not just preview)
  </Accordion>
</AccordionGroup>

## Support

Need help with the Framer plugin?

* Check the [Framer integration guide](/docs/platforms/framer) 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 |