Installation

Package Installation

NPM
Yarn
pnpm

npm install @gately/sdk

yarn add @gately/sdk

pnpm add @gately/sdk

CDN Installation

For quick prototyping or non-bundled projects, use the CDN:

<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  defer
></script>

The SDK will be available globally as window.Gately.

CDN Options

<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  data-auto-init="true"
  data-auto-protect="true"
  defer
></script>

Attribute	Description	Default
`data-api-key`	Your Gately API key	Required
`data-auto-init`	Auto-initialize the SDK	`true`
`data-auto-protect`	Auto-enable page protection	`true`

Get your API key from Settings → API Keys in your Gately dashboard.

Framework-Specific Setup

React

import { GatelyProvider } from '@gately/sdk'

function App() {
  return (
    <GatelyProvider apiKey="gately_pk_live_xxxxxxxx">
      <YourApp />
    </GatelyProvider>
  )
}

Next.js

// app/providers.tsx
'use client'

import { GatelyProvider } from '@gately/sdk'

export function Providers({ children }) {
  return (
    <GatelyProvider apiKey={process.env.NEXT_PUBLIC_GATELY_API_KEY}>
      {children}
    </GatelyProvider>
  )
}

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Vue.js

// main.js
import { createApp } from 'vue'
import { GatelyClient } from '@gately/sdk'

const app = createApp(App)

// Create and provide the client
const gately = new GatelyClient({
  apiKey: 'gately_pk_live_xxxxxxxx'
})
app.provide('gately', gately)

app.mount('#app')

<!-- Component.vue -->
<script setup>
import { inject } from 'vue'
const gately = inject('gately')
</script>

Vanilla JavaScript

import { GatelyClient } from '@gately/sdk'

const gately = new GatelyClient({
  apiKey: 'gately_pk_live_xxxxxxxx'
})

// Use the client
document.getElementById('login-btn').addEventListener('click', async () => {
  const email = document.getElementById('email').value
  const password = document.getElementById('password').value
  
  try {
    await gately.login(email, password)
    window.location.href = '/dashboard'
  } catch (error) {
    alert(error.message)
  }
})

Framer Integration

For Framer sites, add the SDK via custom code:

Open your Framer project
Go to Site Settings > General > Custom Code
Add to the <head> section:

<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  defer
></script>

Use in code overrides:

export function withAuth(Component) {
  return (props) => {
    const [user, setUser] = React.useState(null)
    
    React.useEffect(() => {
      if (window.Gately) {
        setUser(window.Gately.getUser())
        window.Gately.onAuthStateChange((user) => setUser(user))
      }
    }, [])
    
    return <Component {...props} user={user} />
  }
}

Webflow Integration

Go to Project Settings > Custom Code
Add to the Head Code section:

<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  defer
></script>

Add to the Footer Code section:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // SDK is ready
    if (window.Gately.isAuthenticated()) {
      // Show logged-in content
      document.querySelectorAll('.logged-in-only').forEach(el => {
        el.style.display = 'block'
      })
    }
  })
</script>

Verifying Installation

After installation, verify the SDK is working:

import { GatelyClient } from '@gately/sdk'

const gately = new GatelyClient({
  apiKey: 'gately_pk_live_xxxxxxxx'
})

// Check authentication status
console.log('Authenticated:', gately.isAuthenticated())

// Get current user (if logged in)
const user = gately.getUser()
console.log('User:', user)

Troubleshooting

Module not found

Ensure you’ve installed the package:

npm install @gately/sdk

Invalid API key

Check that your API key starts with gately_pk_ (public) or gately_sk_ (secret)
Verify it matches your project in the dashboard
Ensure you’re using the correct key type for your environment

CORS errors

Ensure your domain is added to the allowed origins in project settings
Check that you’re using HTTPS in production

SDK not loading (CDN)

Check browser console for errors
Verify the script URL is correct
Ensure defer attribute is present

Getting Started

Features

Platform Guides

SDK

Authentication

Users

Campaigns

Contacts

Protection

Package Installation

CDN Installation

CDN Options

Framework-Specific Setup

React

Next.js

Vue.js

Vanilla JavaScript

Framer Integration

Webflow Integration

Verifying Installation

Troubleshooting

​Package Installation

​CDN Installation

​CDN Options

​Framework-Specific Setup

​React

​Next.js

​Vue.js

​Vanilla JavaScript

​Framer Integration

​Webflow Integration

​Verifying Installation

​Troubleshooting

Package Installation

CDN Installation

CDN Options

Framework-Specific Setup

React

Next.js

Vue.js

Vanilla JavaScript

Framer Integration

Webflow Integration

Verifying Installation

Troubleshooting