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 and how it can be used to centralize customer conversations.

In this guide, you will learn how to:

Watch the installation walkthrough → follow the complete setup in video format
Choose the right iFrame method → compare the simple and advanced approaches
Use the external chatbox link in an iFrame → embed Crisp with the fastest method
Use a full-page chatbox page → run Crisp from a custom HTML page
Make the iFrame responsive → adapt the chatbox to your page layout
Test the embedded chatbox → confirm that messages reach your Inbox
Troubleshoot the integration → resolve common setup issues

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.

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.

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:

Find your Website ID with this guide.
Add it to the external chatbox URL.
Add the generated URL as the src of an iFrame.
Adjust the width and height to fit your layout.

See How to embed a chat widget in any platform to learn how to generate the link, pass user information, force a locale, and manage session parameters.

Basic example:

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

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

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:

Open Crisp.
Go to Settings → Workspace Settings → Setup & Integrations.
Open the HTML installation method.
Copy your Crisp chatbox script.
Add CRISP_RUNTIME_CONFIG before the Crisp script.
Host the HTML page on your own domain.
Embed that page inside an iFrame.

Use this runtime configuration before loading the Crisp script:

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

Full-page example:

<!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:

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

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:

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

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

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

Test the embedded chatbox

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

To test the setup:

Open the page containing the iFrame.
Wait for the Crisp chatbox to load.
Send a test message.
Open your Crisp Inbox.
Confirm that the new conversation appears in the correct workspace.
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.

Troubleshooting

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

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

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.

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.

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.

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.

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.

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.

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 is active for the conversation, visitors can interact with it from the embedded chatbox.

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.

Updated on: 27/07/2026

Was this article helpful?

Thank you!