Use case

Headless AI support: your interface, our answers

The chat bubble is one place to ask. A help centre search bar, a docs site, a product page and a settings screen are four more — and the same assistant can answer in all of them, from the same knowledge, into the same inbox. Every example below is live.

Start free See how it works

No credit card. Live in an afternoon.

Your markup: An input you already have, answers streamed into your page. No iframe, no launcher.
One tag or one hook: A script tag for any page; useMatterChat for React, Vue, Svelte and Angular.
Citations included: Every answer links the page it came from, exactly as in the widget.
One inbox: Headless conversations land beside widget chats, with ratings, leads and handoff.

The question is asked where the widget is not

A chat bubble sits in the corner of every page and answers whatever it is asked. But most questions are born somewhere specific: in a help-centre search bar that returns twelve articles, on a product page two clicks from checkout, on a settings screen where the answer is one field away. A widget is a detour from all three.

Your help-centre search returns articles, and people leave without reading them
Product pages get the same shipping and returns questions in reviews and in support
Users email support about settings they were already looking at
Your docs site has search, but the answer is spread across three pages

help.acme.comLive

How can we help?

Ask a question, or browse below.

Getting started

Billing

Security

Help centre

The search bar on your help centre, answering instead of listing.

docs.acme.com/sdkLive

Headless SDK

Same public key as the widget, same knowledge, same plan — without the launcher. Put an input on a help page, a docs site or inside your app…

Docs

Docs search that reads the docs. Docusaurus, Mintlify, GitBook — one tag.

Docusaurus, Mintlify, GitBook: the same tag in the theme's head.

acme.com/products/orbit-miniLive

Orbit Speaker

Orbit Mini, sage

412 reviews

$129

Free shipping over $50

Questions about this product?

Storefront

Shipping, returns, sizing — answered on the product page, before the cart is abandoned.

useMatterChat() in the product template, next to the price.

app.acme.com/settings/billingLive

Billing

Growth plan · renews 14 Oct

Replies used

3,180 / 5,000

Pages indexed

412 / 1,000

Need a hand with billing?

In-app

Help inside the product, on the screen where the question came up.

useMatterChat({ user }) — signed-in, so the answer knows the plan.

Every box on this page is live and answers from matterchat.co's own docs. Ask them something.

What headless gives you

The widget's brain without the widget's body. Everything below already works in the chat bubble; headless lets you put it where the question actually happens.

A search bar that answers

Replace a keyword search on your help centre with a box that reads the answer back, sources attached, and still lists the pages.

Docs that explain themselves

On Docusaurus, Mintlify, GitBook or your own docs site: one tag in the theme, and readers ask instead of hunting.

Answers on the product page

Shipping, returns, compatibility — asked and answered next to the price, before the tab is closed.

Help inside your app

A box on the billing screen answers billing questions. Pass a signed-in user and the transcript knows who asked.

Same knowledge, same limits

The bot's allowed domains, rate limits and plan apply unchanged. There is nothing new to secure or to pay for.

Same inbox, same handoff

A question the content cannot answer offers a person and pages your team, exactly as the widget does.

It is the widget's API, opened up

The widget has always been a client of a public, key-scoped API. Headless is a second client — @matterchat/core in the browser — with no interface attached. It speaks the same session handshake, gets the same streamed answers with the same citation and refusal signals, and is counted the same way. Nothing about the bot, its knowledge or its plan changes; only the surface does.

Two ways in, depending on how much you want to own

The script tag renders a complete ask box in a shadow root, styled to fit and isolated from your theme — the right choice for a docs platform or a CMS where you can paste HTML but not build. The packages give you the raw state instead: messages, the streaming answer, sources, errors. You render every pixel, which is what a product team wants for a box that has to look like the rest of the app.

The tag

One script element with your key. Optional suggestions, accent colour, target element. Works on Docusaurus, Mintlify, GitBook, WordPress, Webflow — anywhere HTML goes.

The hook

useMatterChat() in React, Vue, Svelte or Angular, or createMatterChat() in plain JavaScript. A conversation object with ask, rate and reset.

What an answer carries, so your UI can be honest

Every answer says whether it was grounded in your content or was a refusal, whether the evidence was thin, whether the visitor asked for a person, and which pages it drew on. A headless UI can therefore do what the widget does — show a source list, offer a human on a refusal, ask whether the answer helped — without guessing at any of it.

The inbox does not know the difference, except where it should

Headless conversations appear in the same inbox as widget chats, with the page they came from. They carry a small tag so an operator reading a thread knows this visitor saw no greeting and no suggested questions, only whatever your page put in front of them. Ratings, lead capture and handoff work unchanged.

From the widget to your own page, in an hour

Headless uses the bot you already have. If the widget is live, the first example takes as long as pasting a tag.

1
Take your public key
It is the same key the widget uses, from Setup in the dashboard. It identifies the bot and authorises nothing, so it is safe in client code.
2
Allow the page's domain
Headless pages are checked against the bot's allowed domains like widget pages. If your docs live on a subdomain, add it.
3
Paste the tag, or import the hook
The script tag renders a ready ask box where it sits. The packages give you the state — messages, streaming, sources — and you render.
4
Watch the inbox
Conversations from headless pages are tagged in the inbox. Rate answers, capture leads and hand over exactly as before.

Common questions

Do headless answers count against the same plan as the widget?

Yes. Every answer is a reply on the bot's plan, whichever surface asked it. There is no separate API tier for headless in the browser; the server-side REST API remains an Agency feature.

Can I run the widget and a headless box on the same site?

Yes, and many sites will: the widget everywhere, an ask box on the help centre. They use the same key and the same knowledge, so an answer is the same in both.

Does the ask box need a build step?

No. The script tag is a complete ask box. The packages are for teams that want to render the answer inside their own components.

Is the public key safe to expose?

It is the same key the widget already exposes on every page it runs on. It identifies the bot; the allowed-domains list and the session handshake decide who may ask.

Can a signed-in user's identity travel with the question?

Yes. Pass the same id and server-signed hash the widget accepts. Unsigned ids are ignored rather than trusted.