Initialization

Call init() once when your app loads — before any agreements are rendered. The object it returns is used for everything else.

Basic setup

import { init } from '@propper/click-sdk';

const sdk = init({
  apiKey: 'YOUR_API_KEY',
});

Configuration options

const sdk = init({
  apiKey: 'YOUR_API_KEY',        // Required
  environment: 'production',     // 'production' | 'staging' | 'development'
  userId: 'user-123',            // Links acceptances to a specific user
  userEmail: 'user@example.com', // Attached to evidence records
  locale: 'en-US',               // Defaults to the user's browser language
  debug: false,                  // Logs SDK activity to the console
});

Option	Required	Description
apiKey	Yes	Your Propper organization API key
environment	No	Which environment to connect to — must match your deployment's environment. Defaults to 'production'.
userId	No	Your internal user ID — attached to every evidence record created in this session
userEmail	No	User's email address — attached to evidence records
locale	No	Language for displaying agreements. Defaults to the user's browser setting.
debug	No	Set to true during development to log SDK activity to the console

Enable debug mode during development

debug: true logs every step — fetching, rendering, recording — to your browser console, making it much easier to spot configuration issues before going live.

Coming Soon

Screenshot: click-sdk-debug-console, browser console showing SDK debug output with [ProperClick] prefixed log lines for fetching, rendering, and recording steps

---

Providing user identity

Passing userId and userEmail links every acceptance to a real person in your system. Without them, acceptances are tracked by browser fingerprint only — harder to match to a specific user if you're ever asked to produce records in an audit.

const sdk = init({
  apiKey: 'YOUR_API_KEY',
  environment: 'production',
  userId: currentUser.id,
  userEmail: currentUser.email,
});

See Evidence Collection for what gets recorded.

---

Keeping your API key secure

danger

Never commit your API key to source control. Use environment variables or a secrets manager.

Each key is scoped to your organization. Use separate keys for Production and Staging and label them accordingly — you can generate and manage keys in Click → Settings → API Keys.

Coming Soon

Screenshot: click-api-keys-settings, the API Keys section in Click Settings showing the key list with name labels, copy button, and rotation date

---

Troubleshooting

The SDK throws 401 Unauthorized. Your API key is invalid, expired, or not being passed correctly. Go to Click → Settings → API Keys and verify the key is active. Check that it isn't being truncated by your environment variable setup, and that it's passed to init() as the apiKey option. If the key was recently rotated, update it everywhere it's used.

The SDK is being initialized multiple times. Calling init() more than once can cause unexpected behavior. Initialize once at the top level of your application and reuse the returned instance — never inside a component or function that runs on every render.

The SDK doesn't work in my server-side rendering environment. The Click SDK requires a browser environment (window, document) and can't run during server-side rendering. Guard initialization with if (typeof window !== 'undefined'). In Next.js, use dynamic(() => import('./YourComponent'), { ssr: false }) for any component that uses the SDK.

---

Next: Choose a rendering mode →