> ## 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 the Crisp Live Chat Chatbox in an iFrame

*This article explains how to embed the Crisp Live Chat widget inside an iFrame.*

The standard Crisp installation displays the chatbox as a floating widget on your website. An iFrame lets you place the chatbox inside a specific page, panel, dashboard, or external platform while controlling the space it occupies.

You can embed Crisp using either the direct external chatbox link or a custom HTML page configured with the Crisp JavaScript SDK.

|| Learn more about the [Crisp Live Chat widget](https://crisp.chat/en/livechat/) and how it can be used to centralize customer conversations.

__In this guide, you will learn how to:__
* [Watch the installation walkthrough](#1-watch-the-installation-walkthrough) → follow the complete setup in video format
* [Choose the right iFrame method](#2-choose-the-right-iframe-method) → compare the simple and advanced approaches
* [Use the external chatbox link in an iFrame](#3-use-the-external-chatbox-link-in-an-iframe) → embed Crisp with the fastest method
* [Use a full-page chatbox page](#4-use-a-full-page-chatbox-page) → run Crisp from a custom HTML page
* [Make the iFrame responsive](#5-make-the-iframe-responsive) → adapt the chatbox to your page layout
* [Test the embedded chatbox](#6-test-the-embedded-chatbox) → confirm that messages reach your Inbox
* [Troubleshoot the integration](#7-troubleshooting) → resolve common setup issues
---

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

This video shows how to embed the Crisp chatbox inside an iFrame using the direct external link and the custom full-page method.

${youtube}[How to embed the Crisp Live Chat widget in an iFrame](w7wvGkMW3Xo)
---

# ${color}[#0080dd](Choose the right iFrame method)

There are two common ways to embed the Crisp chatbox inside an iFrame.

| Method | Best for | Technical level |
| ---- |
| **External chatbox link** | Quickly embedding Crisp without creating a separate page | Simple |
| **Custom full-page chatbox** | Using the JavaScript SDK, custom scripts, segments, or runtime settings | Advanced |

For most installations, use the **external chatbox link**. It requires less code and loads the chatbox already configured in your Crisp workspace.

Use a **custom full-page chatbox** when you need to run additional JavaScript, use `$crisp` methods, apply session data, or control how the chatbox loads.
---

# ${color}[#0080dd](Use the external chatbox link in an iFrame)

The fastest method is to generate your direct external chatbox link, then use that URL as the `src` of an iFrame.

Your direct link follows this format:

`https://go.crisp.chat/chat/embed/?website_id=MY_WEBSITE_ID`

Replace `MY_WEBSITE_ID` with the Website ID of your Crisp workspace.

__To use this method:__
1. Find your Website ID with [this guide](https://help.crisp.chat/en/article/where-to-find-my-website-id-1ylqx1s/).
2. Add it to the external chatbox URL.
3. Add the generated URL as the `src` of an iFrame.
4. Adjust the width and height to fit your layout.

| See [How to embed a chat widget in any platform](https://help.crisp.chat/en/article/how-to-embed-a-chat-widget-in-any-platform-174pche/) to learn how to generate the link, pass user information, force a locale, and manage session parameters.

__Basic example:__

```html
<iframe
  src="https://go.crisp.chat/chat/embed/?website_id=MY_WEBSITE_ID"
  title="Crisp Live Chat"
  width="350"
  height="600"
  style="border: 0;"
></iframe>
```

__Responsive example:__

```html
<div style="width: 100%; max-width: 420px; height: 640px;">
  <iframe
    src="https://go.crisp.chat/chat/embed/?website_id=MY_WEBSITE_ID"
    title="Crisp Live Chat"
    style="width: 100%; height: 100%; border: 0;"
  ></iframe>
</div>
```

The responsive example allows the chatbox to use the available width while keeping a maximum size.

||| Make sure you replace `MY_WEBSITE_ID` before testing the integration. Using an incorrect Website ID will connect the chatbox to the wrong workspace or prevent it from loading correctly.
---

# ${color}[#0080dd](Use a full-page chatbox page)

This method is useful when you need more control over the page that loads inside the iFrame.

For example, you may want to:

* Use the Crisp JavaScript SDK
* Run custom JavaScript before the chatbox loads
* Apply conversation segments
* Configure session data
* Force the chatbox to remain open in full view
* Connect the embedded experience to your own application logic

First, create a blank HTML page on your own domain. Then install the Crisp chatbox script on that page and configure it to display in full view.

__To prepare the page:__
1. Open [**Crisp**](https://app.crisp.chat).
2. Go to **Settings → Workspace Settings → Setup & Integrations**.
3. Open the **HTML** installation method.
4. Copy your Crisp chatbox script.
5. Add `CRISP_RUNTIME_CONFIG` before the Crisp script.
6. Host the HTML page on your own domain.
7. Embed that page inside an iFrame.

Use this runtime configuration before loading the Crisp script:

```js
window.CRISP_RUNTIME_CONFIG = {
  lock_maximized: true,
  lock_full_view: true,
  cross_origin_cookies: true
};
```

__Full-page example:__

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />

    <title>Crisp Live Chat</title>

    <script type="text/javascript">
      window.CRISP_RUNTIME_CONFIG = {
        lock_maximized: true,
        lock_full_view: true,
        cross_origin_cookies: true
      };

      window.$crisp = [];
      window.CRISP_WEBSITE_ID = "MY_WEBSITE_ID";

      (function () {
        const script = document.createElement("script");

        script.src = "https://client.crisp.chat/l.js";
        script.async = true;

        document.head.appendChild(script);
      })();

      window.$crisp.push([
        "set",
        "session:segments",
        [["iframe"]]
      ]);
    </script>
  </head>

  <body></body>
</html>
```

Replace `MY_WEBSITE_ID` with the Website ID of your workspace.

Once the page is hosted, embed it from another website:

```html
<iframe
  src="https://example.com/my-crisp-iframe-page.html"
  title="Crisp Live Chat"
  width="350"
  height="600"
  style="border: 0;"
></iframe>
```

| Read the [$crisp methods documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/) to learn how to interact with the chatbox from JavaScript.

||| The full-page method requires you to host and maintain your own HTML page. Use the external chatbox link instead if you do not need custom JavaScript or SDK methods.
---

# ${color}[#0080dd](Make the iFrame responsive)

A fixed width and height may work for a support panel or desktop dashboard, but a responsive container is usually better for pages viewed on several screen sizes.

__Example with a responsive container:__

```html
<div class="crisp-chat-container">
  <iframe
    src="https://go.crisp.chat/chat/embed/?website_id=MY_WEBSITE_ID"
    title="Crisp Live Chat"
  ></iframe>
</div>
```

```css
.crisp-chat-container {
  width: 100%;
  max-width: 420px;
  height: 640px;
}

.crisp-chat-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
```

You can adjust `max-width` and `height` depending on the space available in your interface.

For smaller screens, you can also let the container use the full viewport:

```css
@media (max-width: 600px) {
  .crisp-chat-container {
    max-width: none;
    height: 100vh;
  }
}
```

| Leave enough height for visitors to read previous messages and use the message composer comfortably.
---

# ${color}[#0080dd](Test the embedded chatbox)

After adding the iFrame, send a test message before making the integration available to visitors.

__To test the setup:__
1. Open the page containing the iFrame.
2. Wait for the Crisp chatbox to load.
3. Send a test message.
4. Open your Crisp Inbox.
5. Confirm that the new conversation appears in the correct workspace.
6. Reply from Crisp and confirm that the answer appears inside the embedded chatbox.

Also test the integration on both desktop and mobile screen sizes.

If you use Hugo AI Agent, test whether the embedded conversation follows your current activation, training, instructions, and routing setup.

|| The embedded chatbox uses the same workspace configuration as your standard Crisp chatbox. Changes made to its appearance or behavior from Crisp also apply to the embedded version.
---

# ${color}[#0080dd](Troubleshooting)

If the embedded chatbox does not work as expected, review the following checks.

#### ${color}[#445055](The chatbox does not load)

Confirm that:

* The Website ID is correct
* The iFrame URL starts with `https://`
* The external chatbox URL opens directly in your browser
* Your custom HTML page has been published and is publicly accessible
* Your website security settings allow the page to load inside an iFrame

#### ${color}[#445055](The chatbox appears too small)

Increase the width or height of the iFrame or its parent container.

Avoid placing the iFrame inside a container with a fixed height that is smaller than the chatbox itself.

#### ${color}[#445055](Messages appear in the wrong workspace)

Check the `website_id` value in the external link or the `CRISP_WEBSITE_ID` value in your custom HTML page.

Every Crisp workspace has its own unique Website ID.

#### ${color}[#445055](Custom JavaScript does not run)

The direct external chatbox link does not let you control the page with your own JavaScript.

Use the custom full-page method when you need to run `$crisp` methods, push segments, or connect the chatbox to your application logic.

#### ${color}[#445055](The session starts again)

Session persistence can be affected by the browser, your domain setup, and the way the iFrame is loaded.

For advanced session management, read the [Crisp session continuity documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/session-continuity/).
---

# ${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](Which iFrame method should I use?)

Use the external chatbox link for most installations. It is easier to set up and does not require you to host a separate HTML page.

Use the custom full-page method when you need JavaScript SDK access, custom session logic, or additional runtime configuration.

###### ${color}[#F08820](Can Hugo AI Agent answer from an embedded chatbox?)

Yes. The embedded chatbox connects to the same Crisp workspace as your regular chatbox.

If [Hugo AI Agent](https://hugo.ai/en/) is active for the conversation, visitors can interact with it from the embedded chatbox.

###### ${color}[#F08820](Does an iFrame replace the standard Crisp installation?)

It can, depending on your setup.

If you only want Crisp to appear inside the iFrame, you do not need to install the regular floating chatbox on the parent page. If both methods are installed, visitors may see both the embedded chatbox and the floating widget.