> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clickterm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration flow overview

> Understand how ClickTerm's SDK, API, and dashboard work together to manage clickwrap consent.

The ClickTerm integration flow mirrors the pattern used by Captcha providers. Your frontend displays the agreement, the user interacts with it, and your backend verifies the result.

## Flow diagram

<img className="block dark:hidden" src="https://mintcdn.com/clickterm/Tkp_GRyJwpuLYp7_/dev/images/integration-flow-light.svg?fit=max&auto=format&n=Tkp_GRyJwpuLYp7_&q=85&s=12a5745bb0234b5376e0a77b08436cc3" alt="ClickTerm integration flow — sequence diagram showing how the SDK, your app, and the API interact" width="960" height="680" data-path="dev/images/integration-flow-light.svg" />

<img className="hidden dark:block" src="https://mintcdn.com/clickterm/Tkp_GRyJwpuLYp7_/dev/images/integration-flow-dark.svg?fit=max&auto=format&n=Tkp_GRyJwpuLYp7_&q=85&s=15e97ede9efec556d2d230143290ae48" alt="ClickTerm integration flow — sequence diagram showing how the SDK, your app, and the API interact" width="960" height="680" data-path="dev/images/integration-flow-dark.svg" />

## Step-by-step

<Steps>
  <Step title="Include the SDK">
    Add the ClickTerm SDK to your web frontend or mobile app — typically on registration, login, or checkout pages.
  </Step>

  <Step title="SDK requests the clickwrap">
    Call `ClicktermDialog.show()` with the `endUserId` and `clickwrapTemplateId`. The SDK fetches the current effective template version from ClickTerm.
  </Step>

  <Step title="Dialog shown (if needed)">
    If the end user hasn't accepted the latest effective major version, a modal dialog is displayed. If they've already accepted, the SDK resolves immediately with no dialog.
  </Step>

  <Step title="User takes action">
    The user accepts or declines. The SDK creates an unverified event in the ClickTerm app and returns a **Signature** to your callback.
  </Step>

  <Step title="Send Signature to your backend">
    Pass the Signature to your server (e.g., as part of your registration form submission).
  </Step>

  <Step title="Backend verifies with ClickTerm API">
    Your backend calls `POST /clickwrap/verify` with the Signature, App ID, and App Key. ClickTerm validates the Signature and marks the event as verified. For accepted events, a Certificate of Acceptance is generated.
  </Step>

  <Step title="Handle the result">
    The API returns the event status (`ACCEPTED` or `DECLINED`) and the full event metadata. Notify your frontend with the result so your app can decide what to do next.
  </Step>
</Steps>

<Info>
  After verification, the interaction is saved in ClickTerm's platform as a verified **Clickwrap Event** — available for your record and consultation in the dashboard, or programmatically via [`GET /clickwrap-events`](/api-reference/events/list-clickwrap-events). See the API reference for details.
</Info>

<Info>
  The flow above describes **dialog mode**. **Inline mode** follows the same pattern but splits steps 2–4: you call `ClicktermDom.renderInline()` to render a checkbox, the user interacts with it at their own pace, and you call `finalize()` when ready (e.g., on form submit). See [Displaying an inline clickwrap](/dev/guides/displaying-inline-clickwrap).
</Info>

## Key points

* **Billing is on verification only** — Requests to show a clickwrap are free. Only `POST /clickwrap/verify` calls count toward your billing.
* **No double-prompting** — The SDK automatically checks if the user has already accepted the latest major version. If so, no dialog is shown.
* **No SSO required** — End users don't need a ClickTerm account. The `endUserId` is your own identifier.

<Warning>
  Never expose your **App Key** in client-side code. The App Key is used
  only for backend verification calls. The client SDK uses only the **App ID**.
  Store the App Key safely — it won't display again after creation, but can be
  regenerated. Regenerating the key requires updating your backend configuration.
</Warning>

## Related

<CardGroup cols={2}>
  <Card title="Quickstart — Web SDK" icon="rocket" iconType="light" href="/dev/quickstart-web">
    Get running in 5 minutes.
  </Card>

  <Card title="Verifying a Signature" icon="shield-check" iconType="light" href="/dev/guides/verifying-signature">
    Detailed guide on the verification endpoint.
  </Card>

  <Card title="List clickwrap events" icon="list" iconType="light" href="/api-reference/events/list-clickwrap-events">
    Reference for the clickwrap events listing endpoint.
  </Card>
</CardGroup>