Rendering Modes

The rendering mode controls how your agreement appears on screen — whether it blocks the user until they respond, or sits unobtrusively in the background. The mode is set on your deployment in the dashboard, and the SDK picks it up automatically.

Mode	Where it appears	Blocks the user?	Best for
inline	Embedded inside a container you specify	Yes	Sign-up flows, checkout, onboarding
modal	Centered overlay with dimmed page behind it	Yes	Mandatory Terms of Service, policy updates
popup	Overlay prompt that appears without dimming the page	No	GDPR cookie notices, soft consent, cookie preferences

note

The rendering mode is set on the deployment in the Click dashboard. You can also pass mode directly in sdk.render() options to override it per render call.

---

Inline

Renders inside a container element on your page. The agreement feels like a native part of your layout.

await sdk.render('YOUR_DEPLOYMENT_ID', {
  containerId: 'terms-container', // ID of the element to render into
  onAccept: (acceptance) => { /* ... */ }, // see Events & Callbacks
});

<div id="terms-container"></div>

See Events & Callbacks for what to do inside onAccept.

Coming Soon

Screenshot: inline agreement embedded within a sign-up form, sitting between the form fields and the submit button

---

Modal

Renders as a centered overlay. The page behind is dimmed and non-interactive until the user responds.

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

Coming Soon

Screenshot: modal agreement dialog centered over a dimmed page background

tip

Use modal for hard requirements — agreements the user must respond to before they can continue. See the Terms of Service use case for a full example.

---

Popup

An overlay prompt that appears without dimming the page behind it. The user can continue interacting with the page without responding. Use this for cookie consent notices and lightweight prompts where you want to inform without blocking. See the Cookie Consent use case for a full setup walkthrough.

await sdk.render('YOUR_DEPLOYMENT_ID', {
  mode: 'popup',
  onAccept: (acceptance) => { /* ... */ },
});

Coming Soon

Screenshot: popup consent prompt appearing on a webpage without blocking the background content

---

Render by domain instead of deployment ID

If you'd rather not hardcode deployment IDs in your frontend, you can render by domain and path. The SDK looks up the active deployment for that location automatically. The domain and path must match exactly how they're configured in your deployment.

await sdk.renderByDomain('yourapp.com', '/checkout');

---

How repeat visits are handled

The SDK checks local browser storage before rendering. If the current user has already accepted this deployment, onAccept fires immediately and no agreement is shown — users are never re-prompted unnecessarily.

If you need to force a re-render (for example, when testing a new deployment), see Cache Management.

---

Troubleshooting

The agreement widget doesn't appear. Work through these checks:

1. Container missing — the DOM element referenced by containerId must exist before you call sdk.render(). In React, call inside a useEffect so it runs after the component mounts.
2. Deployment inactive — go to Click → Deployments and confirm the toggle is on. The SDK silently does nothing if the deployment is inactive.
3. Environment mismatch — the environment value in ProperClick.init() must match the deployment's environment. A development SDK will not render a production deployment.
4. User already accepted — sdk.hasAccepted() returns true for users who already responded. If your code checks this before rendering, those users will correctly see nothing.

The widget appears briefly then disappears. sdk.hasAccepted() is likely returning true immediately after rendering, causing your application logic to dismiss it. Check whether you're evaluating hasAccepted() in a loop or immediately after calling render().

The SDK throws "Container Not Found". The containerId element doesn't exist in the DOM when sdk.render() is called. In React, move the render() call inside a useEffect hook so it runs after the component mounts.

The SDK throws "Invalid Deployment ID". The deployment ID is wrong or the template isn't published. Open the deployment in Click → Deployments, copy the ID exactly, and confirm the template is in Published status and the deployment is not archived.

---

Next: Handle events and callbacks →