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

> Add authentication, user management, and interactive components to your Framer site

Gately provides a complete suite of pre-built Framer components that you can drag and drop into your projects. No code required.

<Card title="Framer Plugin" icon="puzzle-piece" href="/docs/platforms/framer-plugin">
  **New!** Install the native Gately Framer Plugin for the easiest integration experience.
</Card>

## Getting Started

<Steps>
  <Step title="Install the Gately Plugin">
    Open the Gately Framer plugin from your Gately dashboard or search for "Gately" in Framer's plugin marketplace.
  </Step>

  <Step title="Add Components">
    Browse available components in the plugin and drag any component directly onto your Framer canvas.
  </Step>

  <Step title="Configure">
    Select the component and configure its properties in the right panel.
  </Step>
</Steps>

## Available Components

Gately provides 25+ ready-to-use Framer components. Open the Gately plugin in Framer to browse and add them to your pages.

### Authentication Components

| Component          | Description                     |
| ------------------ | ------------------------------- |
| **Login**          | Email/password login form       |
| **Signup**         | New user registration form      |
| **Logout**         | Logout button                   |
| **Magic Link**     | Passwordless login via email    |
| **Password Reset** | Reset forgotten password        |
| **Accept Invite**  | Accept team/project invitations |

### User Management Components

| Component            | Description                           |
| -------------------- | ------------------------------------- |
| **Profile Settings** | Update user profile information       |
| **Update Password**  | Change account password               |
| **Userdata**         | Display user profile data dynamically |
| **Google Avatar**    | Display user's Google profile picture |

### Content Protection Components

| Component              | Description                                     |
| ---------------------- | ----------------------------------------------- |
| **Content Protection** | Protect pages for authenticated users           |
| **ContentLock**        | Advanced content locking with plan-based access |

### Engagement Components

| Component              | Description                     |
| ---------------------- | ------------------------------- |
| **Like Button**        | Heart icon with like counter    |
| **Bookmarking Button** | Save items to member favourites |
| **Mark Complete**      | Let members mark progress       |
| **Bookmarking Button** | Save content to favorites       |
| **Bookmark List**      | Display saved bookmarks         |
| **Mark Complete**      | Mark tasks/items as completed   |

### Payment & Billing Components

| Component     | Description                      |
| ------------- | -------------------------------- |
| **Subscribe** | Subscription checkout button     |
| **Billing**   | Manage billing and subscriptions |

### E-commerce Components

| Component              | Description                   |
| ---------------------- | ----------------------------- |
| **Add to Cart Button** | Add products to cart          |
| **Cart Icon**          | Shopping cart with item count |
| **Cart Items**         | Display cart contents         |
| **Cart Subtotal**      | Show cart total price         |
| **Cart Overlay**       | Slide-out cart panel          |
| **Checkout Button**    | Initiate Stripe checkout      |
| **Inventory Label**    | Show stock status             |
| **Quantity Selector**  | Product quantity input        |

## How to Use Components

### Method 1: Gately Plugin (Recommended)

1. Open your Framer project
2. Click **Plugins** in the toolbar
3. Search for and open **Gately**
4. Browse components and click to add them to your canvas
5. Configure component properties in the right panel

### Method 2: Copy Component Link

1. Copy the component link from the table above
2. In Framer, press `Cmd/Ctrl + V` to paste
3. The component will be added to your project
4. Configure properties as needed

## Setup Requirements

Before using components, ensure your Framer site has the Gately SDK installed:

1. In Framer, go to **Site Settings > General > Custom Code**
2. Add to the `<head>` section:

```html theme={null}
<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>
```

<Note>
  Replace `YOUR_PROJECT_ID` with your actual project ID from the Gately dashboard.
</Note>

## Component Configuration

Each component has configurable properties:

### Common Properties

| Property       | Description             |
| -------------- | ----------------------- |
| `projectId`    | Your Gately project ID  |
| `theme`        | Light or dark theme     |
| `primaryColor` | Brand color for buttons |
| `borderRadius` | Corner rounding         |

### Authentication Components

| Property          | Description                  |
| ----------------- | ---------------------------- |
| `redirectUrl`     | Where to redirect after auth |
| `showSocialLogin` | Show Google/GitHub buttons   |
| `showRememberMe`  | Show "Remember me" checkbox  |

### Content Protection

| Property       | Description                         |
| -------------- | ----------------------------------- |
| `requiredPlan` | Plan required for access            |
| `fallbackUrl`  | Redirect URL for unauthorized users |
| `showMessage`  | Show access denied message          |

## Protected Pages

Use the **Content Protection** component to protect entire pages:

1. Add the Content Protection component to your page
2. Set the protection type (logged in, specific plan, etc.)
3. Configure the fallback behavior

Or use **ContentLock** for granular content control:

```jsx theme={null}
// Wrap specific content sections
<ContentLock type="plans" requiredPlan="pro">
  <PremiumContent />
</ContentLock>
```

## Best Practices

<AccordionGroup>
  <Accordion title="Always Test Authentication Flow">
    Test login, signup, and logout flows before publishing your site.
  </Accordion>

  <Accordion title="Configure Redirect URLs">
    Set appropriate redirect URLs for post-authentication navigation.
  </Accordion>

  <Accordion title="Match Your Brand">
    Customize component colors and styling to match your site design.
  </Accordion>

  <Accordion title="Handle Edge Cases">
    Consider what happens when users are logged out or on wrong plans.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Components not working">
    * Verify the SDK script is in your site's `<head>` section
    * Check that your project ID is correct
    * Ensure your domain is added in Gately dashboard
  </Accordion>

  <Accordion title="Authentication not persisting">
    * Check that cookies are enabled
    * Verify your site domain matches Gately settings
  </Accordion>

  <Accordion title="Styling issues">
    * Use component properties to customize appearance
    * Check for CSS conflicts with your Framer styles
  </Accordion>
</AccordionGroup>

## Need Help?

<CardGroup cols={2}>
  <Card title="Join our Community" icon="slack" href="https://join.slack.com/t/usegately/shared_invite/zt-3llscjz41-PuVEY5Xu0M2DCi8WEojN0Q">
    Get help from the Gately community on Slack
  </Card>

  <Card title="Contact Support" icon="envelope" href="mailto:support@usegately.com">
    Reach out to our support team
  </Card>
</CardGroup>