# Embed in your product

The Docs Embed is a powerful window into your product knowledge that you can add to any product or website. Users can ask questions to the [GitBook Assistant](/docs/ai-and-search/gitbook-ai-assistant.md), search your docs, or browse pages directly, without leaving your product. You can open the embed with a button, put it in any component you want, or control it completely programmatically.

<div data-with-frame="true"><figure><img src="/files/suxLXpBBcC0RXgHF9j0F" alt="Embed GitBook Assistant into your product or website"><figcaption><p>Embed your docs into your product or website</p></figcaption></figure></div>

## Overview

The Docs Embed can contain three tabs:

* **Assistant**: The [GitBook Assistant](/docs/ai-and-search/gitbook-ai-assistant.md) - an AI-powered chat interface to help users find answers
* **Search**: A search-focused surface for quickly finding pages and asking scoped questions
* **Docs**: A browser for navigating your documentation site

All tabs are enabled by default. If you set `tabs`, the embed shows only the tabs you list.

You can customize and override the default configuration with custom actions, tools, suggested questions, [Authenticated Access](/docs/site-access/authenticated-access.md), and more.

## Get started

{% stepper %}
{% step %}
**Prerequisites**

Before embedding your docs, ensure:

1. **Your docs are published** and accessible at a URL (e.g., `https://docs.company.com`).
2. **You have retrieved the embed script URL** from your site settings (Settings → AI & MCP → Embed).

{% hint style="info" %}
If you want to use the Assistant tab, [GitBook Assistant must be enabled](/docs/ai-and-search/gitbook-ai-assistant.md) for your docs site (Settings → AI & MCP).
{% endhint %}
{% endstep %}

{% step %}
**Implementation**

Use our skill to quickly implement GitBook Assistant into your product using your existing stack.

{% file src="/files/mcDIGLYgsZlaBs75S7k6" %}

Alternatively, continue reading through the docs for the approach that matches your setup:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-code">:code:</i></h4></td><td><strong>Standalone script tag</strong></td><td>Drop in a &#x3C;script> tag for the fastest setup, then customize its appearance</td><td><a href="/pages/ouLg49uGmmRI4GNPjfEd">/pages/ouLg49uGmmRI4GNPjfEd</a></td></tr><tr><td><h4><i class="fa-box">:box:</i></h4></td><td><strong>Node.js/NPM</strong></td><td>Install via NPM for server-side rendering or build-time control</td><td><a href="/pages/efDLEfySio5adqVBlQ9V">/pages/efDLEfySio5adqVBlQ9V</a></td></tr><tr><td><h4><i class="fa-react">:react:</i></h4></td><td><strong>React component</strong></td><td>Use prebuilt React components for seamless integration</td><td><a href="/pages/GH6SGgYGRjfMQZnvf1UP">/pages/GH6SGgYGRjfMQZnvf1UP</a></td></tr></tbody></table>

{% hint style="info" %}
If your docs use [Authenticated Access](/docs/site-access/authenticated-access.md), follow the steps in [how to set up the embed with authenticated docs](/docs/docs-site/embedding/using-with-authenticated-docs.md).
{% endhint %}
{% endstep %}

{% step %}
**Configuration**

* [Customizing the Embed](/docs/docs-site/embedding/configuration/customizing-docs-embed.md) – Add welcome messages, custom actions, and suggestions
* [Creating custom tools](/docs/docs-site/embedding/configuration/creating-custom-tools.md) – Connect Assistant to your product APIs
  {% endstep %}
  {% endstepper %}

## Further reading

For the complete API reference and source code, see the [`@gitbook/embed` package on GitHub](https://github.com/GitbookIO/gitbook/tree/main/packages/embed).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.com/docs/docs-site/embedding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.