Articles on: Install Crisp

How can I embed the Crisp Chatbox in an iFrame?

The default Crisp setup guides allow you to install the chatbox as a widget on your page. However if instead you wish to embed it inside of an iFrame to control its size or position, this is possible thanks to this guide.

There are two ways to embed the chatbox in an iFrame:

The first method is to directly embed the https://help.crisp.chat/en/article/how-can-i-generate-the-direct-external-link-of-my-chatbox-174pche inside if an iFrame element

→ This is the most basic way of adding the chatbox as an iFrame, quick and suitable to most usages.

The second method is to create a blank a page on which you install the chatbox normally (as a widget) and display it full screen, to embed that page instead.

→ This allows you to use the JS SDK (but also to have full control) on that page to perform additional actions.

Using the external chatbox link in an iFrame

This can be done by simply obtaining the external link of your chatbox thanks to this dedicated guide.

Once you've obtained that external link (with which you can also set additional user data through the URL as described in this guide), you can use in an iFrame on your HTML page.

Example:

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

Then your iFrame would look like:

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

Using a blank page to load the chatbox in full page

This method is most suited if you are looking to have full control over the page you're embedding. For instance to run custom Javascript, or to directly use our Crisp JS SDK (if you wish to push a segment, start a Bot scenario, etc)

This is done by creating a blank HTML page on which you install the Chatbox widget displayed in full page (which would render just like the "direct link"), and then embedding that page on your website instead.

First off, you will need to install the chatbox on that page. You can find your Crisp chatbox script on app.crisp.chat by navigating to:

Settings > Workspace Settings > Setup & Integrations > HTML

Then, to display the chatbox in full screen, you'll need to add the following CRISP_RUNTIME_CONFIG before the chatbox script on your page:

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

This will effectively display the chatbox in full screen (as the "direct link" would), with the difference that you control this page's code and can freely use Javascript.

Here is an example of such a page for the Website ID e93e073a-1f69-4cbc-8934-f9e1611e65bb on which we push a segment iframe when users contact us:

<!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">
      // Defining the CRISP_RUNTIME_CONFIG
      window.CRISP_RUNTIME_CONFIG = {
        lock_maximized: true,
        lock_full_view: true,
        cross_origin_cookies: true,
      };

      // Inserting the Crisp chatbox script
      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);
      })();

      // Pushing a segment with the Crisp JS SDK
      $crisp.push(["set", "session:segments", [["iframe"]]]);
    </script>
  </head>
  <body></body>
</html>

You can then simply embed this new page as an iFrame on your website to load the chatbox, and use Javascript to pass it information or perform custom actions

Updated on: 16/09/2025

Was this article helpful?

Thank you!