# Brand & deploy

> A start-to-finish guide to shipping a fully branded widget: create, install, theme, choose surfaces, and go live.

Product: Clad Widget SDK
Source: https://docs.useclad.ai/widget/brand-deploy

---

A start‑to‑finish guide to shipping a **fully branded** widget on your own site.
Prefer to let an AI agent do it for you? Use **[Vibestart](/builder)** to pick a
look, drop in your IDs, and copy a one‑shot prompt instead — it follows these
same steps. Each step below links to its reference section.

### 1. Create the widget (dashboard)

In **Settings → Integrations → Web Widget**, note your **Workspace ID**
(`ws_…`) and **Widget ID** (`wgt_…`), and add your site to the widget's
**allowed origins** (exact origins, or single‑level wildcards like
`https://*.acme.com`). See [Workspace & widget configuration](#workspace--widget-configuration).

### 2. Install the SDK

Add the [Quickstart](#quickstart) `<script>` snippet just before `</body>` — one
tag, no build step, no package manager. An **anonymous** session boots
automatically, so visitors can chat right away.

### 3. Brand it

All presentation lives in your **install code** (`theme`) — not the dashboard.
Set your palette, header, fonts, shape, and logo:

- **Colors & shape** → [Theming](#theming-locale--z-index) (`theme.colors`,
  `borderRadius`, `bubbleRadius`, `elevation`).
- **Header & home copy** (replace "Support", the home greeting/subtext, add a
  logo/banner, recolor) → [Header & branding](#header--branding). Text copy is
  set in code via [`content`](#configuration).
- **Fonts** (system stack or a loaded web font) → [Fonts](#fonts).
- **Icons & launcher** (custom launcher glyph/colors) →
  [Icons & iconography](#icons--iconography).
- **Pixel‑level control** of any element → [Custom CSS](#custom-css).

### 4. Choose what shows + how AI responds

- **Surfaces:** toggle the knowledge base, ticket forms, and conversation entry
  points per page with [`features`](#feature-visibility-overrides-features).
- **AI assistant:** turn the search bar into a grounded, multi‑turn AI chat
  (`features.aiAnswers`) → [AI assistant chat](#ai-assistant-chat).
- **Ticket forms:** define forms in the dashboard, then surface or open them from
  code → [Where ticket forms come from](#where-ticket-forms-come-from).

### 5. Go live

- **Identify logged‑in users** so chats carry their name/history →
  [Identity verification (JWT)](#identity-verification-jwt).
- **Pass context/tags/custom fields** for better routing →
  [Context, tags & custom fields](#context-tags--custom-fields).
- **Cookie consent**, if required → [Privacy & cookie consent](#privacy--cookie-consent).

### A fully branded example

Everything below is set once in `window.SupportChatSettings` (the same object the
Quickstart snippet defines), so the widget is branded on first paint:

```js
window.SupportChatSettings = {
  workspaceId: "{YOUR_WORKSPACE_ID}",
  widgetId: "{YOUR_WIDGET_ID}",

  // Surfaces
  features: { knowledgeBase: true, aiAnswers: true, ticketForms: true },

  // Header text + launcher
  launcher: { position: "bottom-right", label: "Acme Support" },

  // Brand
  theme: {
    mode: "system",
    logoUrl: "https://acme.com/mark.svg",
    colors: {
      primary: "#4f46e5",
      headerBackground: "#0f172a",
      headerText: "#ffffff",
    },
    borderRadius: "lg",
    fontFamily: '"Plus Jakarta Sans", system-ui, sans-serif',
    customCss: `
      @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap");
      .sc-header { background: linear-gradient(120deg, #4f46e5, #9333ea); --sc-header-text: #fff; }
      .sc-iconbtn { color: #fff; }
    `,
  },
};
```

> Prefer to keep brand defaults out of every page's code? The same `theme`,
> `features`, and `launcher` settings can be stored on the widget config via the
> admin API; install‑code settings win per page.