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 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 → follow the setup in video format
Choose a reader mode → display the article with or without its title
Generate the reader URL → prepare the article for embedding
Embed the article on your website → add it to your page with an iFrame

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.

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.

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

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:

<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.

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.

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.

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.

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.

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.

Updated on: 27/07/2026

Was this article helpful?

Thank you!