> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Embed a Crisp Knowledge Base Article in an iFrame

*This article explains how to embed a Crisp Knowledge Base article inside your website or product using an iFrame.*

Crisp Knowledge Base articles can be opened in a dedicated reader mode that removes the standard [Knowledge Base](https://crisp.chat/en/knowledge/) navigation. This makes it easier to display a specific article inside your product, documentation, onboarding flow, or support page.

__In this guide, you will learn how to:__
* [Watch the video walkthrough](#1-watch-the-video-walkthrough) → follow the setup in video format
* [Choose a reader mode](#2-choose-a-reader-mode) → display the article with or without its title
* [Generate the reader URL](#3-generate-the-reader-url) → prepare the article for embedding
* [Embed the article on your website](#4-embed-the-article-on-your-website) → add it to your page with an iFrame
---

# ${color}[#0080dd](Watch the video walkthrough)

This video shows how to generate the reader URL of a Crisp Knowledge Base article and embed it inside another page using an iFrame.

${youtube}[How to embed Crisp Knowledge Base articles in an iFrame](w7wvGkMW3Xo)

---

# ${color}[#0080dd](Choose a reader mode)

Start with the public URL of the Knowledge Base article you want to embed.

Crisp provides two reader modes:

* **Full reader** → displays the article title and its content
* **Compact reader** → displays the article content without its title

| Use the full reader when the embedded article needs to remain understandable on its own. Use the compact reader when your website or product already provides a title and surrounding context.
---

# ${color}[#0080dd](Generate the reader URL)

Add the appropriate reader path to the end of the public article URL.

__Original article URL:__

`https://help.crisp.chat/en/article/how-to-add-the-crisp-chatbox-code-to-my-website-10wcj3l/`

__Full reader URL:__

`https://help.crisp.chat/en/article/how-to-add-the-crisp-chatbox-code-to-my-website-10wcj3l/reader/full/`

__Compact reader URL:__

`https://help.crisp.chat/en/article/how-to-add-the-crisp-chatbox-code-to-my-website-10wcj3l/reader/compact/`

The reader path must be added after the complete article URL:

* Add `/reader/full/` to keep the article title
* Add `/reader/compact/` to hide the article title
---

# ${color}[#0080dd](Embed the article on your website)

Once your reader URL is ready, use it as the `src` of an iFrame.

__Example using the full reader:__

```html
<iframe
  src="https://help.crisp.chat/en/article/how-to-add-the-crisp-chatbox-code-to-my-website-10wcj3l/reader/full/"
  title="Crisp Knowledge Base article"
  width="100%"
  height="600"
  style="border: 0;"
></iframe>
```

Replace the example URL with the reader URL of your own Knowledge Base article.

You can adjust the `width` and `height` values to fit the space available inside your website or product.

||| The article must be accessible to the visitor. If your Knowledge Base is restricted or password-protected, visitors may need to authenticate before the embedded article can be displayed.
---

# ${color}[#0080dd](Frequently Asked Questions)

*Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.*

###### ${color}[#F08820](Should I use the full or compact reader mode?)

Use the **full reader** when the article title should remain visible.

Use the **compact reader** when your page or product already includes its own title and introduction.

###### ${color}[#F08820](Can I embed any Knowledge Base article?)

Yes, as long as the visitor has permission to access it.

Public articles can be displayed directly. Restricted or password-protected articles may require the visitor to authenticate first.

###### ${color}[#F08820](Can I customize the embedded article with my website CSS?)

No. The article is loaded from the Crisp Help Center inside an iFrame, so your website cannot directly modify its internal styling.

You can still control the size, position, spacing, and border of the iFrame itself from your website.

###### ${color}[#F08820](Why is part of the article hidden inside the iFrame?)

The iFrame may not be tall enough to display the full article.

Increase the `height` value or allow visitors to scroll inside the iFrame.