ClicktermDom renders inline clickwrap checkboxes directly inside your page. Unlike ClicktermDialog (which shows a modal overlay), inline mode embeds a checkbox + agreement text in a container you provide, giving you full control over the submission flow.
Access
const { ClicktermDom } = window.Clickterm;
Methods
renderInline
Renders an inline clickwrap checkbox inside the specified container element.
ClicktermDom.renderInline(containerId, request, options?)
| Parameter | Type | Required | Description |
|---|
containerId | string | Yes | The id of the HTML element to render into |
request | ClickwrapTemplateRequest | Yes | The request payload (see below) |
options | ClicktermInlineOptions | No | Callbacks and style overrides (see below) |
| Field | Type | Required | Description |
|---|
endUserId | string | Yes | Your identifier for the end user (max 256 chars) |
clickwrapTemplateId | string | Yes | Template ID from the ClickTerm dashboard |
language | string | No | Language code (e.g., "en", "de"). Falls back to the configured default. See supported languages |
templatePlaceholders | object | No | Key-value pairs for placeholder substitution |
| Field | Type | Required | Description |
|---|
onChange | (checked: boolean) => void | No | Called every time the checkbox state changes. Use this to enable/disable your submit button |
style | ClicktermInlineStyleOptions | No | Visual customization (see Styling reference) |
Promise<ClicktermInlineHandle>
Throws: ClickwrapError if:
- The container element is not found in the DOM
- An inline clickwrap is already rendered in that container
- The backend response is missing inline content
- A network or server error occurs
Example:
const handle = await ClicktermDom.renderInline(
'consent-checkbox',
{
endUserId: 'user-123',
clickwrapTemplateId: 'YOUR_TEMPLATE_ID',
language: 'en',
templatePlaceholders: { fullName: 'Alice Johnson' },
},
{
onChange: (checked) => {
document.getElementById('submit-btn').disabled = !checked;
},
style: {
checkbox: { color: '#6941C6', size: 18, borderRadius: '4px' },
text: { fontFamily: "'Inter', sans-serif", fontSize: 14 },
},
}
);
finalizeAll
Finalizes multiple inline clickwraps at once. Useful when your page has several agreements that should all be submitted together.
ClicktermDom.finalizeAll(containerIds?)
| Parameter | Type | Required | Description |
|---|
containerIds | string[] | No | Specific container IDs to finalize. If omitted, finalizes all rendered inline clickwraps on the page |
Promise<Record<string, ClicktermInlineFinalizeResult>>
The result is an object keyed by container ID:
{
"consent-tos": {
"status": "UNVERIFIED",
"clicktermSignature": "eyJhbGciOi...",
"submittedStatus": "ACCEPTED"
},
"consent-privacy": {
"status": "UNVERIFIED",
"clicktermSignature": "eyJhbGciOi...",
"submittedStatus": "DECLINED"
}
}
ClickwrapError if:
- No inline clickwraps are available to finalize
- Any of the specified container IDs do not have a rendered clickwrap
Example:
// Finalize all rendered clickwraps
const results = await ClicktermDom.finalizeAll();
// Or finalize specific ones
const results = await ClicktermDom.finalizeAll(['consent-tos', 'consent-privacy']);
// Access individual results
console.log(results['consent-tos'].clicktermSignature);
ClicktermInlineHandle
The handle returned by renderInline(). Use it to check state and finalize the agreement.
| Method | Returns | Description |
|---|
isChecked() | boolean | Current checkbox state (true = checked) |
finalize() | Promise<ClicktermInlineFinalizeResult> | Locks the checkbox and submits the agreement. Returns a cached result on subsequent calls |
getCurrentResult() | ClicktermInlineFinalizeResult | null | The finalize result if available, or null if not yet finalized |
destroy() | void | Removes the inline clickwrap from the DOM and cleans up. The container can be reused after this |
ClicktermInlineFinalizeResult
interface ClicktermInlineFinalizeResult {
status: 'UNVERIFIED' | 'ACCEPTED' | 'DECLINED' | 'ALREADY_ACCEPTED' | 'ERROR';
clicktermSignature: string | null;
submittedStatus?: 'ACCEPTED' | 'DECLINED';
error?: Error;
}
| Field | Description |
|---|
status | UNVERIFIED — the backend accepted it, verify the signature server-side. ALREADY_ACCEPTED — the user already accepted this template. ERROR — the submission failed |
clicktermSignature | The Signature proving the agreement. Send to your backend for verification. null if not available |
submittedStatus | What was sent to the backend: ACCEPTED (checkbox checked) or DECLINED (unchecked). Not present for ALREADY_ACCEPTED handles |
error | The error object if status is ERROR |
If finalize() fails (network error, server error), the checkbox is
automatically unlocked so the user can retry.
Styling reference
The inline clickwrap renders inside a closed Shadow DOM, isolating it from your page styles. Customize its appearance using the style option.
ClicktermInlineStyleOptions
interface ClicktermInlineStyleOptions {
checkbox?: {
color?: string; // Accent color (CSS color value)
size?: number; // Size in pixels (default: 16)
borderRadius?: string; // CSS border-radius (e.g., '4px', '50%' for round)
};
text?: {
fontFamily?: string; // Font family (inherits from host page by default)
fontSize?: number; // Font size in pixels (inherits from host page by default)
};
}
CSS custom properties
Each inline instance gets a unique theme, so multiple instances on the same page can have different styles.
| CSS Variable | Default | Controlled By |
|---|
--ct-w-inline-checkbox-accent | #7f56d9 | style.checkbox.color |
--ct-w-inline-checkbox-size | 16px | style.checkbox.size |
--ct-w-inline-checkbox-radius | 4px | style.checkbox.borderRadius |
--ct-w-inline-font-family | inherit | style.text.fontFamily |
--ct-w-inline-font-size | inherit | style.text.fontSize |
Examples
Default look (no customization):
await ClicktermDom.renderInline('container', request);
// Default purple (#7f56d9), 16px checkbox, 4px border radius
// Text inherits font from the host page
await ClicktermDom.renderInline('container', request, {
style: {
checkbox: { color: '#2563EB', size: 20, borderRadius: '6px' },
},
});
await ClicktermDom.renderInline('container', request, {
style: {
checkbox: { borderRadius: '50%' },
},
});
await ClicktermDom.renderInline('container', request, {
style: {
text: { fontFamily: "'Inter', 'Segoe UI', sans-serif", fontSize: 14 },
},
});
Dashboard-based widget customization applies
to dialog mode only. Inline mode appearance is controlled through the
style option shown above.
How it works
The inline clickwrap is rendered inside a closed Shadow DOM attached to your container element. This provides full CSS isolation — your page styles cannot affect the widget, and widget styles cannot leak into your page.
The SDK maintains an internal registry of all rendered inline clickwraps. This registry prevents rendering twice into the same container, handles race conditions from concurrent renderInline() calls, and automatically cleans up entries when containers are removed from the DOM.
When the agreement text contains links, clicking them opens a read-only modal showing the full content. The user’s checkbox state is not affected.
All agreement HTML from the backend is sanitized before injection. Dangerous tags (script, iframe, event handlers) are stripped, and only safe URL protocols (http:, https:, mailto:) are allowed. 
