Installation
Before installing, make sure you have a published template and an active deployment in your Propper account. You'll also need your API key from Click → Settings → API Keys.
The Quickstart walks through creating your template, deployment, and finding your API key and deployment ID before handing off to your development team.
Option 1: npm
npm install @propper/click-sdk
import { init } from '@propper/click-sdk';
TypeScript types are included.
Option 2: CDN
Add this to your page's <head>:
<script src="https://cdn.propper.com/click-sdk/latest/click-sdk.min.js"></script>
The SDK is then available as window.ProperClick.
<script src="https://cdn.propper.com/click-sdk/2.x.x/click-sdk.min.js"></script>
This prevents unexpected changes if the SDK releases a breaking update.
Verify the installation
console.log(ProperClick.version); // prints current SDK version
Screenshot: browser console showing SDK version output confirming a successful install
Troubleshooting
The SDK isn't loading and I see CSP errors in my browser console. Your site's Content Security Policy is blocking the SDK. Add the following directives to your CSP configuration:
script-src 'self' https://cdn.propper.com;
connect-src 'self' https://api.propper.com;
frame-src 'self' https://click.propper.com;
style-src 'self' 'unsafe-inline' https://cdn.propper.com;
Check your browser console for the specific CSP violation message to confirm which directive is missing.
Next: Initialize the SDK →