> ## 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.
# Installation
> Install the Gately SDK in your project
## Package Installation
```bash theme={null}
npm install @gately/sdk
```
```bash theme={null}
yarn add @gately/sdk
```
```bash theme={null}
pnpm add @gately/sdk
```
## CDN Installation
For quick prototyping or non-bundled projects, use the CDN:
```html theme={null}
```
The SDK will be available globally as `window.Gately`.
### CDN Options
```html theme={null}
```
| 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](https://app.usegately.com).
## Framework-Specific Setup
### React
```jsx theme={null}
import { GatelyProvider } from '@gately/sdk'
function App() {
return (
)
}
```
### Next.js
```jsx theme={null}
// app/providers.tsx
'use client'
import { GatelyProvider } from '@gately/sdk'
export function Providers({ children }) {
return (
{children}
)
}
// app/layout.tsx
import { Providers } from './providers'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
### Vue.js
```javascript theme={null}
// 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')
```
```vue theme={null}
```
### Vanilla JavaScript
```javascript theme={null}
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 `` section:
```html theme={null}
```
4. Use in code overrides:
```javascript theme={null}
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
}
}
```
## Webflow Integration
1. Go to **Project Settings > Custom Code**
2. Add to the **Head Code** section:
```html theme={null}
```
3. Add to the **Footer Code** section:
```html theme={null}
```
## Verifying Installation
After installation, verify the SDK is working:
```javascript theme={null}
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:
```bash theme={null}
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