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

# Use Cases

> How teams use Gately to build membership businesses

Gately is built for one thing: adding a membership layer to any website. Here are the most common ways teams use it.

***

## Framer Membership Site

The most popular use case. Add login, gated content, and paid plans to a Framer site — without touching backend code.

<Card title="Framer + Gately" icon="f" href="/docs/platforms/framer-plugin">
  Install the native Framer plugin for the fastest setup
</Card>

**What you can build:**

* Members-only pages that redirect guests to `/login`
* Plan-gated sections (Free vs Pro vs VIP)
* Magic link login so members never need a password
* Member profile display (`Hello, Jane 👋`)
* Bookmark and like buttons on CMS content

**How it works:**

1. Install the Gately Framer Plugin
2. Click **Inject SDK** — your site is connected
3. Drag Login, Signup, and ContentLock components onto your canvas
4. Set up plans in the Gately dashboard
5. Publish — membership is live

***

## SaaS Application

Add auth and subscription billing to your web app. Members sign up, choose a plan, and get access to the right features.

<Card title="SaaS Example" icon="laptop-code">
  **Features used:** Members, Plans, Webhooks, API
</Card>

```javascript theme={null}
const gately = new GatelyClient('YOUR_PROJECT_ID')

// Protect a route
if (!gately.isAuthenticated()) {
  redirect('/login')
}

// Gate a feature by plan
const user = gately.getUser()
if (user.plan_id === 'pro') {
  showAdvancedEditor()
}
```

**Webhook for plan changes:**

```javascript theme={null}
app.post('/webhooks/gately', (req, res) => {
  const { event, data } = req.body
  if (event === 'member.plan_changed') {
    updateUserPermissions(data.member_id, data.new_plan)
  }
  res.status(200).send('OK')
})
```

***

## Paid Newsletter

Monetize your writing with a free tier + paid subscriber access. Send campaigns to your list directly from Gately.

<Card title="Newsletter Example" icon="envelope">
  **Features used:** Members, Plans, Campaigns, Gated Content
</Card>

**Setup:**

1. Create two plans — Free and Pro
2. Protect your archive pages with `data-gately-protect="pro"`
3. Use Campaigns to send weekly newsletters to all subscribers
4. New sign-ups go on the Free plan automatically

```html theme={null}
<!-- Free teaser visible to everyone -->
<p>Here's a preview of this week's issue...</p>

<!-- Full issue — Pro only -->
<div data-gately-protect="pro">
  <p>Full article content here...</p>
</div>

<!-- Upgrade prompt for free members -->
<div data-gately-show="free">
  <a href="/pricing">Upgrade to read the full issue →</a>
</div>
```

***

## Online Community

Gate a community space. Members pay to access discussions, resources, and exclusive content.

<Card title="Community Example" icon="users">
  **Features used:** Members, Plans, Discussions, Gated Content
</Card>

**Typical plan structure:**

| Plan   | Price   | Access                       |
| ------ | ------- | ---------------------------- |
| Free   | \$0     | Public content, read-only    |
| Member | \$9/mo  | Full community access        |
| Pro    | \$29/mo | Member + exclusive resources |

```javascript theme={null}
// Show different content per plan
const user = gately.getUser()

switch (user.plan_id) {
  case 'pro':
    showExclusiveContent()
    break
  case 'member':
    showCommunityContent()
    break
  default:
    showPublicContent()
    showUpgradePrompt()
}
```

***

## Client Portal

Give each client a branded login experience to access their deliverables.

<Card title="Client Portal Example" icon="briefcase">
  **Features used:** Members, Gated Content, Email Invitations
</Card>

**How it works:**

1. Create a project for your client work
2. Invite clients via email — they get a magic link to set their password
3. Upload deliverables to a members-only page
4. Set a custom domain (`portal.clientname.com`)

**White-label options:**

| Setting       | Description                       |
| ------------- | --------------------------------- |
| Custom domain | portal.clientname.com             |
| Branding      | Your client's logo and colors     |
| Sender name   | Emails come from your agency name |

***

## Getting Started

<Steps>
  <Step title="Create your project">
    Sign up at [usegately.com/signup](https://usegately.com/signup)
  </Step>

  <Step title="Set up plans">
    Create Free, Pro, or custom tiers with Stripe pricing
  </Step>

  <Step title="Add to your site">
    Framer plugin, SDK script tag, or npm package
  </Step>

  <Step title="Protect content">
    Gate pages and sections by plan or login status
  </Step>

  <Step title="Launch">
    Invite members and start growing
  </Step>
</Steps>

<CardGroup cols={2}>
  <Card title="Quickstart Guide" icon="play" href="/docs/quickstart">
    Up and running in 5 minutes
  </Card>

  <Card title="Framer Plugin" icon="puzzle-piece" href="/docs/platforms/framer-plugin">
    No-code setup for Framer
  </Card>

  <Card title="API Reference" icon="code" href="/docs/api-reference/overview">
    Build custom integrations
  </Card>

  <Card title="Join Slack" icon="slack" href="https://join.slack.com/t/usegately/shared_invite/zt-3llscjz41-PuVEY5Xu0M2DCi8WEojN0Q">
    Get help from the community
  </Card>
</CardGroup>