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

# Widget appearance

> Customize the look and feel of your clickwrap dialog and inline widget — colors, layout, and branding.

The **Preview & Customize** section lets you preview how the template content will be displayed to end users across the Web and Android SDKs, and customize the widget's appearance. ClickTerm supports two display modes — each with its own preview and customization workflow.

<Note>
  Some customization options are available only on paid plans. Visit [clickterm.com/pricing](https://clickterm.com/pricing) for plan details.
</Note>

## Clickwrap content

The clickwrap content is displayed as a **full-screen modal dialog** when using `ClicktermDialog.show()`. Starting from **SDK version 2.1 and above**, the dialog can be fully customized directly from the ClickTerm Dashboard — no additional SDK configuration required.

All customization settings are managed at the **template level**, not per version. Changes apply to **all versions** of the template.

### Customization screen

<Frame caption="Widget customization screen for clickwrap dialog">
  <img src="https://mintcdn.com/clickterm/Tkp_GRyJwpuLYp7_/product/images/widget-customization-screen.webp?fit=max&auto=format&n=Tkp_GRyJwpuLYp7_&q=85&s=0771f1e2012dd8bf68862d35f10323ce" alt="Widget customization screen showing preview and settings for the clickwrap dialog" width="3504" height="1984" data-path="product/images/widget-customization-screen.webp" />
</Frame>

* **Left panel** — Displays a real-time preview of the clickwrap dialog
* **Right panel** — Contains all available customization options

As you modify the settings, the preview updates immediately to reflect your changes.

### Saving your configuration

You have two saving options:

* **Save for this template** — Applies the configuration only to the current template
* **Save as default** — Sets the configuration as the default for all templates that do not already have their own custom configuration

<Info>
  Changes will be reflected in the SDK after saving. It may take a few minutes
  for the new configuration to propagate.
</Info>

## Inline content

Starting from **SDK v2.2.0**, templates can include **Inline Content** — a consent checkbox with a short agreement line embedded directly in your page. This is used when calling `ClicktermDom.renderInline()` instead of showing a modal dialog.

The inline content is configured in the [template editor](/product/templates/editing-content#inline-content). You can preview how it will appear to end users from the **Preview Inline Text** screen:

<Frame caption="Inline widget preview showing the consent checkbox as it appears to end users">
  <img src="https://mintcdn.com/clickterm/z5aqbEnRydJ7lsnY/product/images/inline-widget-preview.webp?fit=max&auto=format&n=z5aqbEnRydJ7lsnY&q=85&s=b07d67fa191b9eed17a0c9ab87018543" alt="Preview of the inline widget showing a checkbox with agreement text" width="2266" height="632" data-path="product/images/inline-widget-preview.webp" />
</Frame>

When the end user clicks a link in the inline text, the full clickwrap content is shown in a read-only modal.

### Inline styling

Unlike clickwrap dialog customization (which is dashboard-driven), inline appearance is controlled **via code** using the `style` option when calling `ClicktermDom.renderInline()`:

| Option         | Description                                         |
| -------------- | --------------------------------------------------- |
| Checkbox color | Accent color for the checkbox                       |
| Checkbox size  | Size in pixels                                      |
| Border radius  | Rounded corners (e.g., `4px` or `50%` for circular) |
| Font family    | Font for the agreement text                         |
| Font size      | Font size in pixels                                 |

For the full styling API and code examples, see the [ClicktermDom styling reference](/dev/sdk/web/clickterm-dom#styling-reference).

## Related

<CardGroup cols={2}>
  <Card title="Developer guide: Widget customization" icon="code" iconType="light" href="/dev/guides/widget-customization">
    How to customize the clickwrap dialog from your integration code.
  </Card>

  <Card title="Displaying an inline clickwrap" icon="square-check" iconType="light" href="/dev/guides/displaying-inline-clickwrap">
    Full guide on rendering inline consent checkboxes.
  </Card>

  <Card title="Editing content" icon="pen-to-square" iconType="light" href="/product/templates/editing-content">
    Edit your template content and manage versions.
  </Card>
</CardGroup>