Infinite FAQ

An FAQ section where the last row is a live input. Visitors who don't see their question just type it, and your bot answers from your own content.

A normal FAQ only answers the questions you thought to write down. This one answers the rest too — and every question a visitor types lands in your dashboard, so you can promote the recurring ones into the written list.

Inline, not a bubble — it sits in the flow of your page and auto-grows as answers stream in.
Grounded answers— replies come from your indexed sources and cite them, so the FAQ can't invent a refund policy.
It teaches you— real visitor questions are collected and ranked by how often they're asked.
Style isolated— renders in an iframe, so your site's CSS and the widget's can never fight.

Setup

Index your content on the Sources page — the FAQ answers from whatever your bot knows.
Open Infinite FAQ in the bot sidebar and create one scoped to the page it should live on.
Click Draft 5 from my content — questions are drafted only from that page's own content, then edit them.
Turn the section on and copy its script tag.
Paste it into the page it's scoped to. A bot can have several FAQs, one per landing page.

Drop it in

The section renders exactly where you put the script tag.

<script async
    src="https://www.magicchat.ai/widgets/faq.js"
    data-faq-id="YOUR_FAQ_ID"></script>

Render into a container

If your page builder won't let you place a script inline, point it at a container instead.

<div id="faq"></div>

<script async
    src="https://www.magicchat.ai/widgets/faq.js"
    data-faq-id="YOUR_FAQ_ID"
    data-target="#faq"
    data-theme="dark"
    data-max-width="1100"></script>

Next.js

Use next/script with strategy="afterInteractive"and a container, since the script tag's own position isn't stable across hydration.

import Script from 'next/script';

export function Faq() {
  return (
    <section>
      <div id="faq" />
      <Script
        src="https://www.magicchat.ai/widgets/faq.js"
        strategy="afterInteractive"
        data-faq-id="YOUR_FAQ_ID"
        data-target="#faq"
      />
    </section>
  );
}

Options

Attribute	Value	What it does
`data-faq-id`	required	This FAQ's ID, from its page in your dashboard.
`data-target`	CSS selector	Render into a specific container instead of where the script tag sits, e.g. "#faq".
`data-theme`	auto \| light \| dark	Defaults to auto, which reads the background of the element the FAQ sits in and matches it. Overrides the theme saved on the bot.
`data-max-width`	number (px)	Caps the section width and centers it inside its container.
`data-min-height`	number (px)	Height reserved before the first measurement arrives. Defaults to 420.
`data-domain`	URL	Self-host override. Defaults to https://www.magicchat.ai.

Platforms that inject configuration separately can set window.MagicChatFaqSettings before the script loads, using the same names in camelCase (faqId, maxWidth, and so on). A bot can have several FAQs, one per landing page — each gets its own script tag with its owndata-faq-id.

Keeping answers honest

Answers are generated only from the sources you indexed. When nothing matches, the FAQ says the question isn't covered and points the visitor to support rather than guessing — and the question is flagged in your dashboard as no source matched, which is usually a sign you have a documentation gap worth filling.

The FAQ shares your bot's daily message cap, so it can't be used to drain your usage. Set it on the Embed & Collection page.

Set up your FAQ Add the chat bubble too