> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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 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:__

1. Generate your direct chatbox link with [this guide](/en/article/how-can-i-generate-the-direct-external-link-of-my-chatbox-174pche/).
2. Add the generated URL inside an iFrame on your page.
3. 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` ``,](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:__

1. Open [**Crisp**](https://app.crisp.chat).
2. Navigate to ****Settings → Workspace Settings → Setup & Integrations → HTML****.
3. Copy your Crisp chatbox script.
4. Add `` `CRISP_RUNTIME_CONFIG` `` before the Crisp script.
5. 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](/en/article/how-can-i-generate-the-direct-external-link-of-my-chatbox-174pche/) and the [$crisp methods documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/).