---
title: "Embed Your External Knowledge Base in Any Website or App"
sidebarTitle: "Embedding"
description: "Add your External KB, a search widget, or individual articles directly into your website or customer portal without sending users to a separate URL."
---

> **For AI agents:** the complete documentation index is at [llms.txt](/llms.txt). Append `.md` to any page URL for its markdown version.

Embedding lets you bring your External KB content to wherever your customers already are. Instead of redirecting users to a standalone help center URL, you can surface your documentation — or just a smart search box — directly inside your product, marketing site, or customer portal. Customers get answers in context, and you reduce the friction of switching between tools.

## What You Can Embed

You are not limited to embedding your entire knowledge base. You can embed exactly as much or as little as fits your use case:

<Columns cols={2}>
  <Card title="Full KB iframe" icon="browser" href="/external/access/embedding-docs">
    Embeds your entire External KB — including navigation, product hubs, and all published articles — inside an iframe on any web page. Best for a dedicated help center or support page.
  </Card>
  <Card title="Search Widget" icon="magnifying-glass" href="/external/access/embedding-docs">
    A lightweight search box that queries your KB and displays results as an overlay or inline panel. Best for in-app contextual help, so users can search without leaving their current workflow.
  </Card>
  <Card title="Article Embed" icon="file-lines" href="/external/access/embedding-docs">
    Embeds a single article inline on any page. Best for contextual help panels, onboarding flows, or product pages where a specific article is always relevant.
  </Card>
  <Card title="Product Article List" icon="list" href="/external/access/embedding-docs">
    Embeds the article index for a single product hub — showing titles and descriptions only, without the full KB shell. Best for product-specific resource pages.
  </Card>
</Columns>

## Embed Types in Detail

<Tabs>
  <Tab title="Full KB iframe">
    The Full KB iframe wraps your entire External KB experience — navigation sidebar, search bar, breadcrumbs, and article content — in a single `<iframe>` tag. Your KB's branding, color theme, and structure all carry through automatically.

    Use this option when you want to host a complete help center at a URL on your own domain (e.g., `help.yourcompany.com/docs`) without maintaining a separate site. The iframe is responsive and adjusts to the container it is placed in.

    Generate the iframe code from External KB → Settings → Embed → Full KB iframe. Copy the generated snippet, which includes your embed token and optional height/width overrides.
  </Tab>
  <Tab title="Search Widget">
    The Search Widget injects a search interface that your customers can activate without navigating away from their current page. You can configure it as a **floating button** (fixed to a corner of the screen) or as an **inline element** placed anywhere in your page layout.

    When a customer types a query, results are pulled live from your published KB articles, scoped to the products you specify. Clicking a result opens the article in a slide-over panel or a new tab, depending on your configuration.

    See the [embedding steps below](#embedding-the-search-widget) for the exact setup process.
  </Tab>
  <Tab title="Article Embed">
    An Article Embed renders a single article's content — body, headings, images, and code blocks — inline on your page. The article stays in sync with your KB automatically: whenever you update and republish the article, the embedded version updates too.

    To get the embed code for a specific article, open the article in the External KB editor, click **Share → Embed**, and copy the snippet. Each article has a unique embed ID.
  </Tab>
</Tabs>

## Embedding the Search Widget

<Steps>
  <Step title="Go to External KB → Settings → Embed">
    Open your External KB, click **Settings** in the top navigation bar, and select the **Embed** tab from the left sidebar.
  </Step>
  <Step title="Select 'Search Widget'">
    Under the Embed Type section, click **Search Widget**. A live preview of the widget appears on the right side of the screen so you can see changes as you configure them.
  </Step>
  <Step title="Configure the widget appearance and scope">
    Set the following options:
    - **Theme**: Choose **Light** or **Dark** to match your site's design system.
    - **Placeholder text**: Enter the text shown inside the search input before a user types (e.g., "Search the docs…").
    - **Products to search**: Select one or more product hubs. The widget will only return results from the products you enable here.
    - **Widget style**: Choose **Floating** (a fixed button in the bottom-right corner) or **Inline** (dropped into your layout via a container element).
  </Step>
  <Step title="Copy the generated script tag">
    Once you are satisfied with the preview, click **Copy Embed Code**. The snippet is a single `<script>` tag that includes your embed token and all the configuration options you selected.
  </Step>
  <Step title="Paste the script tag into your website's HTML">
    Add the script tag to every page where you want the widget to appear, just before the closing `</body>` tag. The script loads asynchronously and will not block your page render.
  </Step>
</Steps>

### Embed Code Example

Here is a representative embed snippet. Your actual token and product slugs will differ.

```html index.html
<!-- Knowledge Base Search Widget -->
<script
  src="https://kb.example.com/embed.js"
  data-kb-token="YOUR_EMBED_TOKEN"
  data-theme="light"
  data-products="slack,salesforce"
></script>
```

The `data-products` attribute accepts a comma-separated list of product slugs. Leave it out entirely to search across all products in your KB.

<Tip>
  Always use your **embed token** for client-side embeds — never your API key. Embed tokens are read-only credentials scoped exclusively to public KB search and article retrieval. They cannot write data, access internal drafts, or authenticate on behalf of a user. Because they are read-only, it is safe to include them directly in front-end HTML that end users can inspect.
</Tip>

## Customizing Embed Appearance

You do not need to modify your website's CSS to match the widget to your brand. The Embed settings panel exposes the following appearance options:

- **Primary color** — sets the accent color used for buttons, links, and highlights inside the widget
- **Button label** — the text shown on the floating button trigger (default: "Help")
- **Widget position** — choose bottom-right, bottom-left, top-right, or top-left for the floating style
- **Border radius** — controls how rounded the widget corners appear
- **Font family** — inherit from your page or specify a Google Font by name

<Note>
  Changes you make in the Embed settings panel apply to all instances of that embed token automatically. You do not need to update the script tag in your HTML — just save the settings and the widget refreshes on the next page load for all visitors.
</Note>

## Frequently Asked Questions

<Accordion title="Does the embedded widget respect article permissions?">
  Yes. The search widget and article embeds always enforce the same access controls you configured in your External KB. If an article is set to **Restricted** and the current visitor is not authenticated or not on an approved domain, that article will not appear in search results and its embed will show an access-denied message instead of the content. Public articles are visible to all visitors regardless of authentication state.
</Accordion>

<Accordion title="Can I embed docs from multiple products?">
  Yes. When configuring the Search Widget or Full KB iframe, you can select multiple products to include. For the Search Widget, add each product's slug to the `data-products` attribute as a comma-separated list. For the Full KB iframe, the product selector in the navigation sidebar is included automatically, allowing customers to switch between products within the embedded experience.
</Accordion>

<Accordion title="How do I update the embed without changing my website code?">
  For appearance changes and product scope changes, update the settings in External KB → Settings → Embed and save. The changes propagate to all active embeds without any code change on your website. The only time you need to update the script tag itself is if you generate a new embed token — for example, if you rotate credentials for security reasons. Rotating the token invalidates the old one, so you would need to deploy the new tag.
</Accordion>