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
- Sign in to your Clad dashboard at app.useclad.ai.
- Open Settings → Integrations → Web Widget.
- Copy your Workspace ID (starts with
ws_) and Widget ID (starts withwgt_). You'll paste these into the prompt in Step 2.
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:
/llms.txt— a concise index of every documentation page./llms-full.txt— the entire documentation in a single file./quickstart.md— the copy‑paste install snippet.
Any page on this site is available as raw Markdown — just append
.mdto its URL. Point your agent at the exact page it needs (for examplehttps://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.
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.
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.