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

> Customize the appearance and behavior of the ClickTerm clickwrap dialog from the dashboard.

<Note>
  **Prerequisites:** [SDK v2.1+](/dev/resources/changelog) and an existing [template](/product/getting-started/first-clickwrap).
</Note>

Starting from **SDK version 2.1 and above**, the clickwrap dialog can be fully customized directly from the ClickTerm Dashboard — no additional SDK configuration required.

All customization settings are managed at the **template level** in the web interface. Changes apply to **all versions** of the template.

## How to customize

<Steps>
  <Step title="Open a template">
    Go to [Templates](https://app.clickterm.com/templates) and open the desired template.
  </Step>

  <Step title="Click Preview & Customize">
    You'll be redirected to the customization screen with a live preview.

    <Frame caption="Preview & Customize button">
      <img src="https://mintcdn.com/clickterm/Tkp_GRyJwpuLYp7_/dev/images/preview_customization_button.webp?fit=max&auto=format&n=Tkp_GRyJwpuLYp7_&q=85&s=781e7892ec86b7648aa734e336ef0f3b" alt="Preview & Customize button in the template settings" width="3334" height="1508" data-path="dev/images/preview_customization_button.webp" />
    </Frame>
  </Step>

  <Step title="Adjust settings">
    The **left panel** shows a real-time preview. The **right panel** contains all customization options. Changes are reflected immediately in the preview.

    <Frame caption="Customization screen with live preview and settings panel">
      <img src="https://mintcdn.com/clickterm/Tkp_GRyJwpuLYp7_/dev/images/customization_screen.webp?fit=max&auto=format&n=Tkp_GRyJwpuLYp7_&q=85&s=246bd02f42d69e338ba2217cd70a9dad" alt="Split-panel customization screen with live preview on left and options on right" width="3022" height="1878" data-path="dev/images/customization_screen.webp" />
    </Frame>
  </Step>

  <Step title="Save your configuration">
    Choose one of two saving options:

    * **Save for this template** — Applies only to the current template
    * **Save as default** — Sets as the default for all templates without custom configuration
  </Step>
</Steps>

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

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

<Info>
  Dashboard customization applies to **dialog mode** only. Inline clickwrap
  appearance is customized via code using the `style` option — see
  [ClicktermDom styling reference](/dev/sdk/web/clickterm-dom#styling-reference).
</Info>

## Related

<CardGroup cols={2}>
  <Card title="Product Guide: Widget appearance" icon="palette" iconType="light" href="/product/templates/widget-customization">
    Detailed overview of the customization screen.
  </Card>

  <Card title="Displaying a clickwrap" icon="window-maximize" iconType="light" href="/dev/guides/displaying-clickwrap">
    How to show the dialog from your integration code.
  </Card>
</CardGroup>