How to Embed Docs and an AI Assistant Inside Your Product with Documentation.AI

Harsh — Tue, 13 Oct 2026 07:38:47 +0000

A user is configuring an API integration in your product. They hit an unfamiliar setting, open a new tab, search your docs, click through three pages, and finally return to the app to finish what they started.

Your documentation may be perfectly accurate. The problem is the distance between the question and the answer.

Documentation.AI's Embedded Docs lets you show docs pages and the AI Assistant inside your own product or website, so users can read a guide or ask a question without leaving the screen they're on.

This guide covers what it includes, how to set it up in about five minutes, which pattern fits which job, and how the pricing compares with GitBook, and what to check before you ship.

TL;DR: Quick Overview

Embedded Docs makes sense if:

Users regularly leave your product to look something up
You want the same cited AI answers from your docs site inside your app
You want setup to be one embed key and one snippet

Plan ahead if your docs aren't published yet, are served on a subpath of your own domain (this needs a few reverse proxy rules), or are private (this needs an extra sign-in step).

Bottom line: If your docs are good but hard to reach from inside the product, this is a low-effort way to close the gap.

How I Tested This

I used a free Documentation.AI account: I published a docs site, created an embed key for a local development origin under Settings > Embed, and asked the AI Assistant a question on the published site. The steps, snippet and error codes below were checked against the official Embedded Docs guides.

What Is Documentation.AI Embedded Docs?

Documentation.AI is an AI-native documentation platform for product docs, API references and help centers. Embedded Docs puts your docs pages and AI Assistant inside your own website or application. It's the same assistant as on your docs site, with the same answers and citations, and docs pages load from your docs site, so they look exactly like your docs.

You can add four things:

Docs in your page: a docs page inside any screen of your product.
AI Assistant: cited answers from your docs, right in your page.
Help button and Ask AI bar: a floating panel opened from a button or a question bar.
Help links: any button or link opens the right docs page beside it.

Each is one Widget() call or an HTML attribute, so you can mix them.

How Do You Set Up Embedded Docs?

There are three steps: create an embed key, add a snippet, and check that it works. You need a published docs site and the Admin role in your organization.

Your docs site should show as Live in the dashboard before you embed it.

Step 1: Create an Embed Key

Go to Settings > Embed and click Create key. Fill in three fields:

Field	What to enter
Name	A label for you, such as `Web app`
Allowed origins	Each site that will show your docs, such as `https://app.example.com`. For local development, add your dev server too, such as `http://localhost:5173`. Click Add after each one
Expires	Never, or after 30 days, 90 days, 180 days or 1 year

Click Create key, then copy the Publishable key (pk_...) from the Copy your keys dialog.

Creating an embed key under Settings > Embed. This example uses a key named Blog Demo, a local dev origin and a 30-day expiry.

Three rules for origins:

An origin has no path, for example https://app.example.com:8443.
Use https. Plain http works only for localhost, 127.0.0.1 and [::1].
Wildcards aren't supported, so list every environment: production, staging and local.

Security note: The publishable key (pk_...) goes in your page code and only works on the allowed origins. The secret key (sk_...) is shown once, is needed only for private docs, and must stay on your server.

Step 2: Add the Snippet

Paste this before </body>, with your publishable key:

<div id="docs"></div>

<script src="https://embed-cdn.documentation.ai/v1/embed.js" defer></script>
<script type="module">
  DocumentationAI.init({ publishableKey: 'pk_...' });
  DocumentationAI.Widget({ target: '#docs', defaultView: 'docs' });
</script>

Keep type="module" on your own script so it waits until the embed script has loaded. Using React, Next.js, Vue or another framework? Install the @documentation.ai/embed package and call init() once in the browser. The Frameworks guide has the details.

Step 3: Check That It Works

Open the page on an allowed origin. You should see the first page of your docs, with the AI Assistant in its corner. If not, look in the browser console for a [DocumentationAI] message. origin_not_allowed means the exact origin, including its port, isn't on the key's list, and publishable_key_invalid or publishable_key_expired means you need to copy or create the key again. The Troubleshooting guide covers the rest.

Which Embedding Pattern Should You Use?

User need	Pattern
Read a full guide beside a setup form	Docs in your page
Ask a question without searching	AI chat in your page
Get help only when needed	Help button or Ask AI bar
Understand one specific control	Help link

The two floating layouts are one call each:

// Help button
DocumentationAI.Widget({ display: 'floating', greeting: 'How can we help?' });

// Ask AI bar at the bottom of the screen
DocumentationAI.Widget({
  display: 'floating',
  launcher: { type: 'input', position: 'bottom-center' },
});

Help links need no JavaScript beyond init(). Add one attribute to any button or link, and keep a real href on links as a fallback:

<a href="https://docs.example.com/customize/branding"
   data-documentation-ai-navigate="/customize/branding">How branding works</a>

<button data-documentation-ai-ask="How do I export my data?">Ask about exports</button>

A page can have any number of inline widgets but only one floating widget. See the Layouts and Help links guides for every option.

How Does the AI Assistant Work in Practice?

A docs site can hold the right answer and still make it hard to find. Users don't always know the term to search for or which guide covers their case.

The AI Assistant lets a reader ask in plain language and returns an answer with links to its source pages. For technical writers, that adds a responsibility: the assistant is only as good as the docs behind it. Before launch, test the questions your users actually ask, follow the citations, and note where the docs have gaps.

The AI Assistant on a published docs site answers a question and links back to the page section it read. The embedded assistant is the same one.

Documentation.AI vs GitBook: Pricing for Embedding

Prices are from each vendor's pricing page in October 2026. Check the live pages before you decide.

	Documentation.AI	GitBook
Free plan	Starter: $0, 5 editor seats, 10,000 one-time AI credits	Free: $0, 1 user
Entry paid plan	Standard: $55/month billed yearly ($69 monthly), 10 editor seats, 10,000 AI credits/month	Essential: $65 per site/month + $12 per user/month, billed yearly; 2,000 AI credits/month
Next tier	Pro: $159/month billed yearly ($199 monthly), unlimited editor seats, 30,000 AI credits/month	Ultimate: $249 per site/month + $12 per user/month, billed yearly; 10,000 AI credits/month
Embed in your product	Starter (free) and above (Embed Docs and Embed AI Assistant)	Ultimate and above
Credits per assistant answer	10 per question, any length (how credits work)	20 per relevant question
When credits run out	No overage billing; AI pauses until the next 30-day cycle or a top-up	Monthly credit packs (5,000 for $47.50 up to 40,000 for $300); usage auto-pauses when out

Sources: Documentation.AI and GitBook pricing pages. Credits aren't directly interchangeable, and GitBook charges per site plus per user, so compare the full monthly total for your own setup.

📌 Free-tier note: Embedded Docs and the embeddable AI Assistant are included on Documentation.AI's free Starter plan, so you can build and test the whole integration before paying. GitBook's pricing page lists its Assistant embed from the Ultimate plan.

For a deeper breakdown, see the GitBook pricing guide.

Pricing verdict: If embedding the assistant is the goal, the entry point differs a lot: Documentation.AI's Standard plan, GitBook's Ultimate plan. Strong players in the documentation space like Mintlify don’t list an embeddable assistant at all.

Before You Ship

Keep the source docs accurate. An embedded widget can't compensate for outdated instructions.
Restrict allowed origins. Use HTTPS in production and separate keys per product or environment, so you can revoke one without touching the others.
Keep the secret key on the server. Public docs need only the publishable key.
Test answers, not just rendering. Ask real questions, verify the citations, and check the panel on mobile, where help panels fill the screen.

Final Take

Documentation is most useful where the question appears. Embedded Docs gives you full docs pages, cited AI answers, a floating Help button or Ask AI bar, and contextual links, with setup in one embed key, one snippet and a quick check. Pick one screen where users often get stuck, add one pattern, and measure whether it helps. Start with the Embedded Docs guide.

Related Comparisons

Mintlify vs Documentation.AI: a full feature and pricing comparison.
GitBook vs Documentation.AI: how the two compare once you add a second docs site.
Best AI tools for documentation in 2026: a comparison organized by use case.

Ready to bring your docs into your product?
Create a free Documentation.AI account, publish your docs, and add your first embed key in minutes. Start for free · No credit card required

Need help with a larger rollout? Join the Documentation.AI Slack community.

DEV Community: Documentation.AI