> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cryptique.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Multiple ways to install Cryptique on your website or dApp
## Overview
Cryptique can be installed via CDN script, npm package, or through tag managers. Choose the method that best fits your tech stack.
## CDN Installation
The fastest way to get started. Add this script to your HTML ``:
```html theme={null}
```
### Configuration Attributes
| Attribute | Type | Default | Description |
| ----------------------------- | ------ | --------------- | ----------------------------------------------------------------------------------------------------- |
| `site-id` | string | required | Your unique site identifier |
| `auto-events` | string | omitted (= off) | Set to **`true`** to enable automatic event tracking; any other value leaves auto-events **disabled** |
| `auto-events-disabled-paths` | string | `''` | Comma-separated paths to exclude |
| `auto-events-disabled-events` | string | `''` | Comma-separated auto event names to disable (see [Auto-Events](/data-in/auto-events)) |
### Full Configuration Example
```html theme={null}
```
### Complete HTML Example
```html theme={null}
My App
```
After loading via CDN, the global `Cryptique` object is available:
```javascript theme={null}
// Track events
Cryptique.track('button_clicked', { button_name: 'signup' });
// Identify users
Cryptique.identify('user_123');
// Set user properties
Cryptique.people.set({ plan: 'pro' });
```
## npm Installation
For JavaScript/TypeScript projects with a build system:
```bash theme={null}
npm install cryptique-sdk
```
Or with yarn:
```bash theme={null}
yarn add cryptique-sdk
```
### Basic Usage
```javascript theme={null}
import Cryptique from 'cryptique-sdk';
// Initialize (async – returns the same Cryptique instance)
await Cryptique.init({
siteId: 'YOUR_SITE_ID',
autoEvents: true
});
// Use the global Cryptique object
Cryptique.track('button_clicked', { button_name: 'signup' });
Cryptique.identify('user_123');
Cryptique.people.set({ plan: 'pro' });
```
### Configuration Options
```javascript theme={null}
import Cryptique from 'cryptique-sdk';
await Cryptique.init({
// Required
siteId: 'YOUR_SITE_ID',
// Optional
autoEvents: true, // Enable auto-tracking
autoEventsDisabledPaths: [ // Paths to exclude
'/admin',
'/checkout'
],
autoEventsDisabledEvents: [ // Auto event names to disable
'text_selection',
'copy_action'
],
debug: false // Enable console logging
});
```
### React Integration
```jsx theme={null}
// lib/cryptique.js
import Cryptique from 'cryptique-sdk';
let initialized = false;
export async function initCryptique() {
if (initialized) return;
await Cryptique.init({
siteId: process.env.REACT_APP_CRYPTIQUE_SITE_ID,
autoEvents: true
});
initialized = true;
}
// App.jsx
import { useEffect } from 'react';
import Cryptique from 'cryptique-sdk';
import { initCryptique } from './lib/cryptique';
function App() {
useEffect(() => {
initCryptique();
}, []);
useEffect(() => {
if (user) {
Cryptique.identify(user.id);
Cryptique.people.set({
email: user.email,
plan: user.plan
});
}
}, [user]);
return ;
}
```
### Next.js Integration
```jsx theme={null}
// lib/cryptique.js
import Cryptique from 'cryptique-sdk';
let initialized = false;
export async function initCryptique() {
if (typeof window === 'undefined') return;
if (initialized) return;
await Cryptique.init({
siteId: process.env.NEXT_PUBLIC_CRYPTIQUE_SITE_ID,
autoEvents: true
});
initialized = true;
}
// app/layout.jsx (App Router)
'use client';
import { useEffect } from 'react';
import { initCryptique } from '@/lib/cryptique';
export default function RootLayout({ children }) {
useEffect(() => {
initCryptique();
}, []);
return (
{children}
);
}
// Any component
import Cryptique from 'cryptique-sdk';
function MyComponent() {
const handleClick = () => {
Cryptique.track('feature_used', { feature: 'swap' });
};
return ;
}
```
### Vue Integration
```javascript theme={null}
// plugins/cryptique.js
import Cryptique from 'cryptique-sdk';
export default {
async install(app) {
await Cryptique.init({
siteId: import.meta.env.VITE_CRYPTIQUE_SITE_ID,
autoEvents: true
});
app.config.globalProperties.$cryptique = Cryptique;
app.provide('cryptique', Cryptique);
}
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import cryptiquePlugin from './plugins/cryptique';
const app = createApp(App);
app.use(cryptiquePlugin);
app.mount('#app');
// Component usage
import Cryptique from 'cryptique-sdk';
Cryptique.track('feature_used', { feature: 'swap' });
```
## Google Tag Manager
Deploy Cryptique via GTM without modifying your codebase.
### Setup Steps
In GTM, go to **Tags** → **New** → **Tag Configuration** → **Custom HTML**
Paste the following code:
```html theme={null}
```
Click **Triggering** → Select **All Pages**
Click **Save**, then **Submit** to publish
### Full Configuration
```html theme={null}
```
### Custom Events via Data Layer
Push events from your site to GTM, then forward to Cryptique:
**On your website:**
```javascript theme={null}
dataLayer.push({
event: 'cryptique_track',
eventName: 'button_clicked',
eventProperties: { button_name: 'signup' }
});
```
**GTM Custom HTML Tag:**
```html theme={null}
```
See the [Google Tag Manager guide](/integrations/google-tag-manager) for advanced configurations.
## Verification
After installation, verify it's working:
### 1. Check Browser Console
Open developer tools (F12) and look for:
```
[Cryptique] Initialized successfully
[Cryptique] Session started: abc123
[Cryptique] Event tracked: page_view
```
### 2. Check Live Events
1. Go to your Cryptique dashboard
2. Navigate to **Live Events** or **Debugger**
3. Perform actions on your site
4. Events should appear within 60 seconds
### 3. Network Tab
In browser dev tools → Network tab, look for requests to:
* `api.cryptique.io/events`
* `api.cryptique.io/sessions`
## Troubleshooting
Add these domains to your CSP:
```
script-src 'self' https://cdn.cryptique.io;
connect-src 'self' https://api.cryptique.io;
```
1. Verify Site ID is correct
2. Check domain is whitelisted in settings
3. Disable ad blockers temporarily
4. Check browser console for errors
Ensure the script is only loaded once. If using both CDN and npm, choose one.
The CDN script is \~15KB gzipped. If performance is critical:
1. Use `async` loading (default)
2. Consider npm package for bundling
3. Load after critical resources
## Next Steps
Configure automatic event tracking
Learn the track() method