c.l.cladDocs

Brand & deploy

View as Markdown

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

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

2. Install the SDK

Add the 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 (theme.colors, borderRadius, bubbleRadius, elevation).
  • Header & home copy (replace "Support", the home greeting/subtext, add a logo/banner, recolor) → Header & branding. Text copy is set in code via content.
  • Fonts (system stack or a loaded web font) → Fonts.
  • Icons & launcher (custom launcher glyph/colors) → Icons & iconography.
  • Pixel‑level control of any element → Custom CSS.

4. Choose what shows + how AI responds

  • Surfaces: toggle the knowledge base, ticket forms, and conversation entry points per page with features.
  • AI assistant: turn the search bar into a grounded, multi‑turn AI chat (features.aiAnswers) → AI assistant chat.
  • Ticket forms: define forms in the dashboard, then surface or open them from code → Where ticket forms come from.

5. Go live

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:

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.