How to embed the Crisp live-chat chatbox in an iFrame

This article explains how to embed the Crisp chatbox inside an iFrame.

The default Crisp setup adds the chatbox as a floating widget on your page. If you need to control its size, position, or embed it inside another interface, you can load Crisp in an iFrame instead.

Choose an iFrame method

There are two common ways to embed Crisp in an iFrame.

Available methods:

External chatbox link → simplest option, using the direct Crisp chatbox URL as the iFrame source
Full-page chatbox page → more flexible option, using your own blank HTML page with the Crisp script and runtime configuration

Use the external chatbox link in an iFrame

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

To use this method:

Generate your direct chatbox link with this guide.
Add the generated URL inside an iFrame on your page.
Adjust the iFrame width and height to fit your layout.

Example:

If your external chatbox link is https://go.crisp.chat/chat/embed/?website_id=e93e073a-1f69-4cbc-8934-f9e1611e65bb, your iFrame can look like this:

<iframe
  src="https://go.crisp.chat/chat/embed/?website_id=e93e073a-1f69-4cbc-8934-f9e1611e65bb"
  width="350"
  height="600"
>
</iframe>

Use a full-page chatbox page

This method is best if you need more control over the embedded page, such as using the Crisp JavaScript SDK, pushing a segment, or running custom JavaScript before loading the chatbox.

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

To prepare the page:

Open Crisp.
Navigate to Settings → Workspace Settings → Setup & Integrations → HTML.
Copy your Crisp chatbox script.
Add CRISP_RUNTIME_CONFIG before the Crisp script.
Embed your custom page in an iFrame.

Use this runtime configuration before 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>My Crisp chatbox iFrame</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 = "e93e073a-1f69-4cbc-8934-f9e1611e65bb";

      (function () {
        d = document;
        s = d.createElement("script");
        s.src = "https://client.crisp.chat/l.js";
        s.async = 1;
        d.getElementsByTagName("head")[0].appendChild(s);
      })();

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

You can then embed that page from another website:

<iframe
  src="https://example.com/my-crisp-iframe-page.html"
  width="350"
  height="600"
>
</iframe>

If you want to pass user information, force a locale, or keep sessions connected across devices, read the direct external link guide and the $crisp methods documentation.

Updated on: 03/05/2026

Was this article helpful?

Thank you!