Click API Quickstart

Deploy a clickwrap consent agreement and capture user acceptance in under 10 minutes.

Prerequisites

• A Propper account with API access
• API credentials from the dashboard
• A web page or application where you want to display consent

Step 1: Get an Access Token

Exchange your client credentials for an access token with Click scopes.

cURL

curl -X POST "https://auth.propper.ai/oauth2/token" \
  -H "Content-Type: application/json" \
  -d '{
    "grant_type": "client_credentials",
    "client_id": "YOUR_CLIENT_ID",
    "client_secret": "YOUR_CLIENT_SECRET",
    "scope": "click:admin click:read"
  }'

JavaScript

const getAccessToken = async () => {
  const response = await fetch('https://auth.propper.ai/oauth2/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      grant_type: 'client_credentials',
      client_id: process.env.PROPPER_CLIENT_ID,
      client_secret: process.env.PROPPER_CLIENT_SECRET,
      scope: 'click:admin click:read',
    }),
  });

  const { access_token } = await response.json();
  return access_token;
};

const token = await getAccessToken();

Response:

{
  "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...",
  "token_type": "Bearer",
  "expires_in": 3600,
  "scope": "click:admin click:read"
}

Step 2: Create a Template

Create a clickwrap template with your consent language.

cURL

curl -X POST "https://api.propper.ai/v1/click/templates" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Terms of Service",
    "description": "Standard terms of service agreement",
    "content": "<p>By clicking Accept, you agree to our <a href=\"https://example.com/terms\">Terms of Service</a> and <a href=\"https://example.com/privacy\">Privacy Policy</a>.</p>",
    "type": "clickwrap"
  }'

JavaScript

const createTemplate = async (token) => {
  const response = await fetch('https://api.propper.ai/v1/click/templates', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: 'Terms of Service',
      description: 'Standard terms of service agreement',
      content: '<p>By clicking Accept, you agree to our Terms of Service and Privacy Policy.</p>',
      type: 'clickwrap',
    }),
  });

  return response.json();
};

const template = await createTemplate(token);
console.log('Template ID:', template.id);

Response:

{
  "id": "tpl_abc123",
  "name": "Terms of Service",
  "description": "Standard terms of service agreement",
  "status": "DRAFT",
  "createdAt": "2025-01-15T10:00:00Z"
}

Step 3: Create and Publish a Version

Create a version of the template and publish it to make it available for deployment.

cURL

# Create a version
curl -X POST "https://api.propper.ai/v1/click/templates/$TEMPLATE_ID/versions" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "content": "<p>By clicking Accept, you agree to our <a href=\"https://example.com/terms\">Terms of Service</a> and <a href=\"https://example.com/privacy\">Privacy Policy</a>.</p>",
    "changeNotes": "Initial version"
  }'

JavaScript

const createVersion = async (token, templateId) => {
  const response = await fetch(`https://api.propper.ai/v1/click/templates/${templateId}/versions`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      content: '<p>By clicking Accept, you agree to our Terms of Service and Privacy Policy.</p>',
      changeNotes: 'Initial version',
    }),
  });

  return response.json();
};

const version = await createVersion(token, template.id);
console.log('Version ID:', version.id);

Step 4: Create a Deployment

Deploy the published template version to a site.

cURL

curl -X POST "https://api.propper.ai/v1/click/deployments" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "TEMPLATE_ID",
    "versionId": "VERSION_ID",
    "siteId": "my-website",
    "locale": "en-US"
  }'

JavaScript

const createDeployment = async (token, templateId, versionId) => {
  const response = await fetch('https://api.propper.ai/v1/click/deployments', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      templateId,
      versionId,
      siteId: 'my-website',
      locale: 'en-US',
    }),
  });

  return response.json();
};

const deployment = await createDeployment(token, template.id, version.id);
console.log('Deployment ID:', deployment.id);

Response:

{
  "id": "dep_xyz789",
  "templateId": "tpl_abc123",
  "versionId": "ver_def456",
  "siteId": "my-website",
  "locale": "en-US",
  "status": "ACTIVE"
}

Step 5: Render and Accept in the Browser

Use the Render API to load the consent experience and the Accept API to record consent.

<div id="click-consent"></div>

<script>
  const DEPLOYMENT_ID = 'dep_xyz789';

  // 1. Fetch the experience JSON from the Render API
  const response = await fetch(
    `https://api.propper.ai/v1/click/render/deployment/${DEPLOYMENT_ID}`
  );
  const experience = await response.json();

  // 2. Render the consent UI (simplified example)
  const container = document.getElementById('click-consent');
  container.innerHTML = `
    <div class="consent-box">
      ${experience.content}
      <button id="accept-btn">I Agree</button>
    </div>
  `;

  // 3. Handle acceptance
  document.getElementById('accept-btn').addEventListener('click', async () => {
    const result = await fetch('https://api.propper.ai/v1/click/accept', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Idempotency-Key': crypto.randomUUID(),
      },
      body: JSON.stringify({
        deploymentId: DEPLOYMENT_ID,
        userId: 'user-123',
        userAgent: navigator.userAgent,
      }),
    });

    if (result.ok) {
      console.log('Consent recorded successfully');
    }
  });
</script>

Use the JavaScript SDK

In production, use the Propper Click JavaScript SDK instead of raw API calls. The SDK handles rendering, accessibility, evidence collection, and error handling automatically.

Step 6: Verify Consent

Query the consent state for a user to verify their acceptance.

cURL

curl "https://api.propper.ai/v1/click/consent/user-123" \
  -H "Authorization: Bearer $TOKEN"

JavaScript

const getConsentState = async (token, userId) => {
  const response = await fetch(`https://api.propper.ai/v1/click/consent/${userId}`, {
    headers: { Authorization: `Bearer ${token}` },
  });

  return response.json();
};

const consent = await getConsentState(token, 'user-123');
console.log('Consent given:', consent);

What's Next?

Management API

Templates, deployments, and analytics

Accept API

Consent acceptance endpoint

Render API

Experience rendering endpoint