Skip to main content

Customization

Visual styling — colors, fonts, button labels, logo — is defined in your template's appearance settings and applied automatically by the SDK. This page covers runtime behavior you can adjust in code.

Locale override​

By default, the SDK uses the user's browser language. To display an agreement in a specific language for a particular render:

await sdk.render('YOUR_DEPLOYMENT_ID', {
  locale: 'fr-FR',
  onAccept: (acceptance) => { /* ... */ },
});

To check which languages a deployment supports:

const locales = await sdk.getSupportedLocales('YOUR_DEPLOYMENT_ID');
// ['en-US', 'fr-FR', 'de-DE']

Custom metadata​

Attach additional context to an acceptance record. This is stored alongside the evidence bundle and searchable in the dashboard — useful for tagging by plan tier, experiment variant, or internal session ID.

await sdk.accept('YOUR_DEPLOYMENT_ID', {
  planTier: 'business',
  experimentVariant: 'A',
  sessionId: 'sess-abc-123',
});
Coming Soon

Screenshot: click-custom-metadata-evidence, evidence bundle detail view in the dashboard showing the custom metadata fields (planTier, experimentVariant, sessionId) visible in the record

See Viewing Evidence for how to find and filter evidence records in the dashboard.

Cache management​

The SDK caches acceptances in browser local storage so users aren't re-prompted on repeat visits. In some situations — testing a new deployment, resetting a user's state — you may need to clear it.

// Force a re-render on the next sdk.render() call
sdk.clearCache();
note

Clearing the cache removes only the local browser record. It does not delete evidence records from Propper. The user will be prompted again, and a new evidence record will be created.

Domain restrictions (SDK-level)​

To prevent the SDK from rendering on domains you don't control, configure an allowed domains list in Click Settings → Security. Requests from any unlisted domain are refused before anything loads.

Next: Advanced integration patterns →