Skip to content

The Self-Service Support Widget: Let Customers Start Their Own Diagnostic Session

Nate Denlinger 8 min read

Clairvio started with magic links: a support agent reviews a ticket, generates a time-limited link, and sends it to the customer to reproduce the problem. It's a great model when a conversation is already underway — but it puts support in charge of when a session begins. The customer has to open a ticket, wait for a reply, and click a link before anything gets captured.

The self-service support widget flips that around. You drop one script tag on your site, add an attribute to any button, and your customers can get help the moment they hit a problem — without waiting for an agent to reach out first.

One Button, Three Ways to Get Help

When a customer clicks your support button, the widget doesn't jump straight into a recording. It opens a small chooser that offers three paths, so people pick the one that fits the moment:

  • Read the help docs — your own instructions, right there in the widget.
  • Send a message — a quick note to your team when a recording is overkill.
  • Start a screen recording — capture exactly what's happening, with consent.

Each choice maps to a different level of effort. Most support requests don't need a full replay, and forcing every customer through a recording flow is friction that costs you resolutions. The chooser lets the customer self-triage.

Read the help docs

Every workspace can attach its own instructions to the widget, written in Markdown — a short troubleshooting checklist, a link to your help center, a note about a known issue. It's rendered safely inside the widget (scripts stripped), so the first thing a stuck customer sees is your own guidance. A meaningful share of tickets are questions you've already answered somewhere; this is where you put that answer.

Send a message

Sometimes the customer just wants to tell you something. The message path is a lightweight text box — no recording, no consent modal, no session. The message lands in a dedicated Support Messages inbox in your dashboard, where your team can read it, see the context that came with it, and mark it resolved using the same ticket-status workflow you already use for sessions.

Because a message isn't a recording, it doesn't consume a session credit. It's meant to be cheap and frequent — the self-serve equivalent of a customer tapping you on the shoulder.

Start a screen recording

When the issue really does need to be seen, the customer picks the recording path and lands on a consent screen. Only after they click Allow does capture begin — the full session replay picture: a DOM replay of exactly what their browser rendered, every network request and response, console errors with stack traces, and an environment snapshot. It's the same diagnostic depth support already gets from magic links, except the customer initiated it themselves. If you're weighing this against jumping on a call, we wrote about debugging without screen sharing.

Know Who You're Talking To

A diagnostic session is far more useful when you know which account it belongs to. If your app already knows who the customer is, you can pass that context to the widget as metadata — a user id, a plan, an account name, whatever helps you route and prioritize. Point the widget at the fields that matter using simple keys, or dot paths for nested objects:

window.__clairvioWidgetMeta = {
  user: { id: "u_123", email: "ada@example.com", plan: "pro" }
};

// In workspace settings:
//   User ID field:  user.id
//   Email field:    user.email

That covers logged-in users. But the whole point of a self-service widget is that it works even when nobody's logged in — a prospect on your marketing site, a customer who got signed out, a visitor hitting an error before they authenticate. For those cases, turn on Collect email address. When it's enabled and no email is present in the metadata, the widget adds an email field to the chooser, so you always have a way to follow up. The captured email is stored on both the session and the support message and shown right in your dashboard.

Get Notified Where You Already Work

Self-service only helps if someone notices. When a support message comes in, Clairvio emails your organization's owners and admins automatically. And each workspace can add an outbound webhook — a Slack Incoming Webhook works out of the box — that fires on three events:

  • A new support message arrives.
  • A session starts recording.
  • A session completes.

So the moment a customer reaches out, a message shows up in your support channel with the workspace name and a link back to the dashboard. No inbox to babysit, no dashboard to keep open.

Private by Default

The widget follows the same privacy-first model as the rest of Clairvio. Reading help docs and sending a message never record anything. The recording path captures nothing until the customer explicitly clicks Allow, and even then no audio, no camera, and no activity outside your application is captured. Password fields are masked, elements you mark as sensitive are blocked from the replay, and the customer can stop the session at any time. Consent is a click the customer makes, not a checkbox you check for them.

Add It in One Line

Installation is a single script tag plus an attribute on whatever you want to act as the trigger. Any button or link works:

<script src="https://cdn.clairvio.dev/sdk/clairvio-widget.min.js"
        data-workspace="cvio_your_sdk_key" async></script>

<!-- Add this attribute to any button or link: -->
<button data-clairvio-widget>Get support</button>

Grab your workspace key from the dashboard, drop it in, and you're live. You can see the whole thing — and click a real widget yourself — on the support widget page.

When to Reach for the Widget

Magic links and the widget solve the same underlying problem — getting real context out of a customer's browser — from opposite directions. Reach for magic links when a conversation is already happening and an agent wants to pull a specific customer into a session. Reach for the widget when you want customers to be able to help themselves the instant something goes wrong, whether or not they've opened a ticket, and whether or not they're even logged in.

The best support request is the one that arrives already carrying everything you need to answer it. The widget is how you make that the default.