Skip to main content

Quickstart

This guide walks you through setting up a live Click agreement from start to finish.

The first three steps happen in the Click dashboard and can be completed by anyone with Admin or Editor access. Steps 4 onward involve embedding the agreement in your application and require developer access.

Prerequisites:

  • A Propper account with Click enabled
  • Admin or Editor role on your organization
  • (For SDK steps) A web application where you want to embed the agreement

Step 1: Create a Template​

A template is the agreement your users will see. Start here.

  1. Go to Click → Templates and click New Template.
  2. Choose the type that fits your use case:
    • Static Clickwrap: the same content for every user — best for Terms of Service or Privacy Policies
    • Generated Clickwrap: personalized content using variables — best for NDAs or custom contracts
    • Consent Management: category-based opt-in/out — best for GDPR cookie banners
  3. Give the template a name (this is an internal label, not shown to users).
  4. Write your agreement content in the editor. For Generated templates, use {{variableName}} syntax to insert user-specific values — for example, {{userName}} or {{startDate}}.
  5. Configure the display: title, button labels, and whether to show a decline option.
tip

Keep your agreement text clear and concise. Users are more likely to read and accept shorter, plain-language terms.

Coming Soon

Screenshot: Template editor showing content area and variable insertion

Step 2: Publish a Version​

Publishing locks your content so it can be deployed. A template must be published before you can use it.

  1. When you are satisfied with the content, click Publish.
  2. Confirm whether this is a content-only update or a policy change. A policy change will eventually prompt users who accepted an earlier version to accept again — see Versioning.
  3. Click Confirm Publish.

The template moves from Draft to Published. You cannot edit a published template — any further changes require creating a new version, while your current version continues serving users.

Coming Soon

Screenshot: Publish confirmation dialog showing the content vs. policy change toggle

Step 3: Create a Deployment​

A deployment connects your published template to a specific location in your product.

  1. Go to Click → Deployments and click New Deployment.
  2. Select the template you just published.
  3. Configure the deployment:
    • Domain: your application's domain (e.g. app.yourcompany.com)
    • Path: the URL path where this agreement should appear (e.g. /signup). Use / to cover all pages on the domain.
    • Environment: start with Development or Staging to test before going live
    • Display mode: how the agreement appears to users — modal, inline, or popup
  4. Click Save.

The deployment is saved in an inactive state. It will not show to users until you activate it, giving your team time to complete the integration and test first.

Coming Soon

Screenshot: New deployment form showing domain, path, environment, and display mode fields

Step 4: Get Your API Key and Deployment ID​

The next steps require your developers to embed the agreement in your application. They will need two values:

  1. API Key: Go to Click → Settings → API Keys. Copy your key — it is shown once, so store it securely in an environment variable.
  2. Deployment ID: Open your deployment and copy the ID shown at the top of the detail page.

Share these with the developer completing the integration.

Coming Soon

Screenshot: Settings → API Keys page showing the key generation button and masked key value

Coming Soon

Screenshot: Deployment detail page with the Deployment ID field highlighted

Step 5: Install the SDK​

npm:

npm install @propper/click-sdk

CDN:

<script src="https://cdn.propper.com/click-sdk/latest/click-sdk.min.js"></script>

Step 6: Initialize the SDK​

Initialize the SDK once when your application loads — not inside the function that renders the agreement.

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

const sdk = init({
  apiKey: process.env.REACT_APP_CLICK_API_KEY,
  environment: 'development', // change to 'production' when ready
  userId: currentUser.id,     // your internal user identifier
  userEmail: currentUser.email,
});
tip

Initialize the SDK at the top level of your application, not inside a component render or event handler. Repeated initialization can cause unexpected behavior.

See SDK Initialization for the full options reference.

Step 7: Render the Agreement​

Call sdk.render() where you want the agreement to appear. Add a container element to your page first if you are using modal or inline display:

<div id="click-agreement-container"></div>

Then render the agreement:

async function showAgreement() {
  // Skip rendering if the user already accepted
  if (sdk.hasAccepted('YOUR_DEPLOYMENT_ID')) {
    proceedWithoutPrompting();
    return;
  }

  try {
    await sdk.render('YOUR_DEPLOYMENT_ID', {
      containerId: 'click-agreement-container',

      onAccept: async (receipt) => {
        // Save the receipt ID to your database for audit cross-referencing
        await saveToDatabase({
          userId: currentUser.id,
          receiptId: receipt.receiptId,
          acceptedAt: receipt.timestamp,
        });

        proceedWithNextStep();
      },

      onDecline: () => {
        showMessage('You must accept the terms to continue.');
      },
    });
  } catch (error) {
    console.error('Click SDK error:', error.message);
    showMessage('Failed to load the agreement. Please refresh and try again.');
  }
}

Key patterns to follow:

  • Always call sdk.hasAccepted() before rendering to avoid re-prompting users who already accepted
  • Always save receipt.receiptId in your database so you can cross-reference Click's evidence records during audits
  • Always handle onDecline — do not silently ignore it if you are gating access behind acceptance
  • Always wrap sdk.render() in a try/catch so SDK errors do not crash your application

See Events & Callbacks for the full callback reference.

Step 8: Test Before Going Live​

With your deployment still set to Development or Staging:

  1. Activate the deployment in the Deployments list.
  2. Load the page in your application where you call sdk.render().
  3. Verify the agreement appears correctly.
  4. Accept the agreement and confirm:
    • The onAccept callback fires with a valid receipt
    • The receipt ID is saved to your database
    • An evidence record appears in Click → Evidence within a few seconds
  5. Reload the page and verify sdk.hasAccepted() returns true — the agreement should not appear again.
Coming Soon

Screenshot: Evidence record in the dashboard showing the acceptance timestamp, user reference, and content hash

Step 9: Go Live​

When testing is complete:

  1. Create a new deployment with Environment set to Production (or update your existing deployment's environment setting).
  2. Update your SDK initialization to use environment: 'production'.
  3. Activate the production deployment in the Deployments list.

Your agreement is now live. Click will serve it automatically to every user who visits the configured path.

Coming Soon

Screenshot: Deployments list showing the production deployment with an active status badge

What's Next​