c.l.cladDocs

Vibe Start

Steps for vibe coders: let your AI agent set up the widget.

Steps for vibe coders: grab your two IDs, then paste the prompt below into your AI coding agent (Cursor, Claude Code, etc.) and let it add the widget for you.

Step 1 — Find your Workspace ID and Widget ID

  1. Sign in to your Clad dashboard at app.useclad.ai.
  2. Open Settings → Integrations → Web Widget.
  3. Copy your Workspace ID (starts with ws_) and Widget ID (starts with wgt_). You'll paste these into the prompt in Step 2.
📷 Screenshot needed

Where to find your IDs

Settings → Integrations → Web Widget in the Clad dashboard, with the Workspace ID and Widget ID clearly visible. Feel free to blur the real values — this just needs to show where the IDs live and what they look like.

Step 2 — Paste this prompt into your agent

Replace {YOUR_WORKSPACE_ID} and {YOUR_WIDGET_ID} with the IDs from Step 1, then paste the entire prompt into your coding agent and let it run:

You are adding the Clad Support Chat widget to this web application.
 
First, read the official documentation (fetch these URLs before writing code):
- Docs index:  https://docs.useclad.ai/llms.txt
- Full docs:   https://docs.useclad.ai/llms-full.txt
- Quickstart:  https://docs.useclad.ai/quickstart.md
Every page is available as Markdown by appending .md to its URL
(for example https://docs.useclad.ai/installation.md).
 
My credentials:
- Workspace ID: {YOUR_WORKSPACE_ID}
- Widget ID:    {YOUR_WIDGET_ID}
 
Then implement the integration:
1. Detect this project's framework (plain HTML, React, Next.js, Vue, etc.).
2. Install the widget using the single <script> snippet from the Quickstart.
   Do NOT use npm or any package manager — there is no package. The script
   loads from https://clad-server-staging.up.railway.app/widget/v1/widget.js.
   Add it once in the app shell so it runs
   on every page (e.g. index.html just before </body>, the Next.js root layout
   via next/script, or your framework's equivalent).
3. Set window.SupportChatSettings with my Workspace ID and Widget ID.
4. If this app has logged-in users, also set up identity verification:
   - Add a backend endpoint that returns a short-lived (<= 15 min) HS256 JWT,
     signed with a SUPPORT_CHAT_WIDGET_SECRET environment variable, including
     the claims described on the Identity verification page (sub, email, name,
     workspace_id, widget_id, exp).
   - Wire the SDK's tokenProvider to that endpoint, call identify() on login,
     and shutdown({ clearStorage: true }) on logout. Use the framework recipe
     that matches this codebase.
5. Follow the Security best practices page: never expose the widget secret in
   frontend code, keep tokens short-lived, and remind me to add my site's
   origin to the widget's allowed origins.
6. Do not hardcode secrets; read them from environment variables.
7. When done, summarize the files you changed and tell me exactly how to test
   that the launcher appears and that a test message reaches the support inbox.
 
Keep the integration minimal and idiomatic for this codebase.

The prompt points your agent at these machine‑readable resources, which it fetches before writing any code:

Any page on this site is available as raw Markdown — just append .md to its URL. Point your agent at the exact page it needs (for example https://docs.useclad.ai/identity-verification.md).

Step 3 — Review the result

When the agent finishes, the launcher should appear on your site. Open it, send a test message, and confirm it lands in your support inbox.

📷 Screenshot needed

The widget launcher on a live site

A screenshot of a web app with the Support Chat launcher button visible in the corner (ideally on a real-looking product page, not a blank page), to show the end result of the integration.

📷 Screenshot needed

An open conversation

A screenshot of the messenger panel open with a sample conversation — a visitor message and an agent reply — so readers can see what their users will experience.

If something looks off, check the Troubleshooting & FAQ page — or hand that page to your agent (append .md) and ask it to fix the issue.