Skip to main content

​
Package Installation

npm install @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>
AttributeDescriptionDefault
data-api-keyYour Gately API keyRequired
data-auto-initAuto-initialize the SDKtrue
data-auto-protectAuto-enable page protectiontrue
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:
  1. Open your Framer project
  2. Go to Site Settings > General > Custom Code
  3. Add to the <head> section:
<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  defer
></script>
  1. 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

  1. Go to Project Settings > Custom Code
  2. Add to the Head Code section:
<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-api-key="YOUR_API_KEY"
  defer
></script>
  1. 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

Ensure you’ve installed the package:
npm install @gately/sdk
  • 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
  • Ensure your domain is added to the allowed origins in project settings
  • Check that you’re using HTTPS in production
  • Check browser console for errors
  • Verify the script URL is correct
  • Ensure defer attribute is present