Embedded Docs and AI Assistant
Show your docs pages and AI Assistant inside your own product or website, and set it up in three steps with an embed key and a snippet.
Embedded Docs puts your Documentation.AI docs and AI Assistant inside your own product or website. Users read a docs page, or ask a question, without leaving the screen they're on. It's the same AI 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.
What you can add
Docs in your page
A docs page inside any screen of your product, at its full height.
AI Assistant
Answers from your docs, with citations, right in your page.
Help button and Ask AI bar
A floating panel that opens from a button or a question bar.
Help links
Any button or link in your product opens the right docs page beside it.
What you need
- A published Documentation.AI docs site.
- The Admin role in your Documentation.AI organization, to create embed keys.
- If your docs are served at a path on your own domain, such as
example.com/docs, a few extra rules in your reverse proxy. Add them before you start. See Docs on a subpath.
Quickstart
Add a docs page with the AI Assistant to any web page in about five minutes. These steps use plain HTML. For React, Next.js, Vue, Angular or Svelte, follow them, then see Frameworks.
1. Create an embed key
In the dashboard, go to Settings > Embed and click Create key. You need the Admin role.
| 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. In the Copy your keys dialog, copy the Publishable key (pk_...).
The dialog also shows a secret key, only this once. You need it only if your docs have private pages. If they do, copy it now and store it on your server. See Private docs.
2. Add the snippet
Paste this into your page, before </body>, with your publishable key:
<!-- Where the docs should appear -->
<div id="docs"></div>
<script src="https://embed-cdn.documentation.ai/v1/embed.js" defer></script>
<script type="module">
DocumentationAI.init({ publishableKey: 'pk_...' });
// Your docs in the element above, with the AI Assistant.
DocumentationAI.Widget({ target: '#docs', defaultView: 'docs' });
</script>
Move <div id="docs"></div> to wherever the docs should appear. The same snippet, with your key filled in, is under Install in Settings > Embed.
Keep type="module" on your own script. It makes your code wait until the embed script has loaded.
3. Check that it works
Open the page on one of the key's allowed origins. You should see the first page of your docs, with the AI Assistant in its corner.
If nothing appears, open your browser's console and look for a message starting with [DocumentationAI]. See Troubleshooting.