> ## 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.

# Displaying a clickwrap

> Show a clickwrap agreement dialog to your end users using the ClickTerm SDK.

<Note>
  **Prerequisites:** [Web SDK installed](/dev/sdk/web/installation), [Android SDK installed](/dev/sdk/android/installation), or [React Native SDK installed](/dev/sdk/react-native/installation); a [published template](/product/getting-started/first-clickwrap) with an effective version; and your [App ID](/product/integrations/integrations-overview).
</Note>

Use `ClicktermDialog.show()` to present a clickwrap agreement to your end user. The SDK fetches the current effective template, displays it in a customizable modal dialog, and returns a Signature when the user takes action.

<Info>
  This guide covers the **dialog** (modal) mode. To embed a consent checkbox directly in your page instead, see [Displaying an inline clickwrap](/dev/guides/displaying-inline-clickwrap).
</Info>

## Basic usage

<CodeGroup>
  ```javascript Web SDK theme={null}
  const { ClicktermClient, ClicktermDialog } = window.Clickterm;
  ClicktermClient.initialize("YOUR_CLICKTERM_APP_ID");

  ClicktermDialog.show({
    endUserId: "user-123",
    clickwrapTemplateId: "YOUR_TEMPLATE_ID",
    language: "en"
  }).then((result) => {
    console.log("Clickwrap result:", result);
    // Send result.clicktermSignature (the Signature) to your backend for verification
  }).catch((error) => {
    console.error("Clickwrap error:", error);
  });
  ```

  ```java Android SDK theme={null}
  ClickwrapTemplate contentRequestBody = new ClickwrapTemplate(
      "YOUR_TEMPLATE_ID",
      endUserId,
      new HashMap<>(),
      "en"
  );

  ClicktermDialog.show(this, contentRequestBody, null,
      new ClicktermDialog.OnAgreementResultListener() {
          @Override
          public void onSuccess(String clicktermSignature) {
              if (clicktermSignature == null) {
                  Log.i("Clickterm", "User already accepted.");
              } else {
                  Log.i("Clickterm", clicktermSignature);
                  // Send Signature to your backend
              }
          }

          @Override
          public void onError(String message) {
              Log.e("Clickterm", message);
          }
      }
  );
  ```

  ```ts React Native SDK theme={null}
  import * as Clickterm from '@clickterm/react-native-sdk';

  await Clickterm.initialize('YOUR_CLICKTERM_APP_ID');

  try {
    const signature = await Clickterm.show({
      clickwrapTemplateId: 'YOUR_TEMPLATE_ID',
      endUserId: 'user-123',
      templatePlaceholders: null,
      language: 'en',
    });
    if (signature === null) {
      // User already accepted the latest major version — no dialog was shown
    } else {
      // Send signature to your backend for verification
    }
  } catch (error) {
    console.error('Clickwrap error', error);
  }
  ```
</CodeGroup>

## Parameters

| Parameter              | Required | Description                                                                                                                                                                                                                                                      |
| ---------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `clickwrapTemplateId`  | Yes      | The ID of your clickwrap template. You can obtain this from the ClickTerm dashboard after creating a template.                                                                                                                                                   |
| `endUserId`            | Yes      | Your identifier for the end user (max 256 chars). If your user ID is not known yet, you can generate a UUID and map it to your user ID in your backend.                                                                                                          |
| `templatePlaceholders` | No       | Structured object to fill [placeholders](/dev/guides/placeholders) in the template, including `customPlaceholders` for user-defined keys.                                                                                                                        |
| `language`             | No       | Language code for the dialog UI and template content. If omitted or if an unsupported language is used, the default language configured in the ClickTerm UI is used. See the full list of [supported languages](/dev/sdk/web/configuration#supported-languages). |

## Configuration options

The second argument to `ClicktermDialog.show()` accepts optional configuration:

| Parameter      | Default | Description                                                                                                                                                                                                                                       |
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disableClose` | `false` | Controls whether the end user can dismiss the dialog by clicking outside of it. When `false`, clicking outside closes the dialog and the result will have `isCanceled: true`. When `true`, the user must explicitly accept or decline to proceed. |

<CodeGroup>
  ```javascript Web SDK theme={null}
  ClicktermDialog.show({
    endUserId: "user-123",
    clickwrapTemplateId: "YOUR_TEMPLATE_ID",
    templatePlaceholders: { fullName: "Alice Example" }
  }, {
    disableClose: true
  }).then((result) => {
    console.log("Clickwrap result:", result);
  }).catch((error) => {
    console.error("Clickwrap error:", error);
  });
  ```

  ```java Android SDK theme={null}
  JSONObject config = new JSONObject();
  config.put("disableClose", true);

  ClicktermDialog.show(this, request, config,
      new ClicktermDialog.OnAgreementResultListener() {
          @Override
          public void onSuccess(String clicktermSignature) {
              // Handle result
          }

          @Override
          public void onError(String message) {
              Log.e("Clickterm", message);
          }
      }
  );
  ```
</CodeGroup>

## Result format

The `result` object returned by `ClicktermDialog.show()` contains the following fields:

| Field                | Type    | Description                                                                                                                                                                          |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `clicktermSignature` | String  | The cryptographic Signature proving the end user's action. `null` if the user has already accepted or canceled the dialog. When present, send this to your backend for verification. |
| `isAlreadyAccepted`  | Boolean | `true` if the end user has already accepted the latest major version of this template. The dialog is not shown and no new Signature is generated.                                    |
| `isCanceled`         | Boolean | `true` if the end user closed the dialog without accepting. Only possible when `disableClose` is not enabled.                                                                        |

<CodeGroup>
  ```json User accepts or declines theme={null}
  {
    "clicktermSignature": "eyJhbGciOiJSUzI1NiJ9...",
    "isAlreadyAccepted": false,
    "isCanceled": false
  }
  ```

  ```json User already accepted latest major version theme={null}
  {
    "clicktermSignature": null,
    "isAlreadyAccepted": true,
    "isCanceled": false
  }
  ```

  ```json User closes dialog without accepting theme={null}
  {
    "clicktermSignature": null,
    "isAlreadyAccepted": false,
    "isCanceled": true
  }
  ```
</CodeGroup>

<Note>
  Both accepting and declining a clickwrap return a Signature in the result. The result object does not distinguish between these two actions — the acceptance or decline status is recorded server-side and can be verified through the [Signature verification](/dev/guides/verifying-signature) step.
</Note>

<Info>
  Requests to show a clickwrap are **not counted toward billing**. All billing
  is based on the verification step (`POST /clickwrap/verify`).
</Info>

## Next steps

<CardGroup cols={2}>
  <Card title="Template placeholders" icon="brackets-curly" iconType="light" href="/dev/guides/placeholders">
    Pass dynamic data into the clickwrap dialog.
  </Card>

  <Card title="Verifying a Signature" icon="shield-check" iconType="light" href="/dev/guides/verifying-signature">
    Verify the user's action on your backend.
  </Card>

  <Card title="Inline clickwrap" icon="square-check" iconType="light" href="/dev/guides/displaying-inline-clickwrap">
    Embed a consent checkbox in your page instead.
  </Card>
</CardGroup>