> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Webchat

> Manually add Webchat to your website.

You can manually embed the Webchat window in an HTML `<div>`. This is useful if you want to include the Webchat window in a specific section of your website.

> [!NOTE]
>
> If you just want to quickly add a bot to your website, use the [Quickstart guide](https://botpress.com/docs/webchat/get-started/quick-start.md).

> [!NOTE]
>
> You will need:
>
> * A [published bot](https://botpress.com/docs/get-started/quick-start.md)
> * Basic familiarity with HTML

## 1. Get your embed code

## 2. Copy the script URL

Open the URL in your browser and **copy the content of the page**. It should look something like this:

```uri https://files.bpcontent.cloud/20XX/0X/0X/XX/XXXXXXXXXXXXXXXX-XXXXXXXX.js [expandable] theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
window.botpress.init({
    "botId": "xxxxxxxxxxxxxxxxxxxxxx",
    "configuration": {
        "website": {},
        "email": {},
        "phone": {},
        "termsOfService": {},
        "privacyPolicy": {},
        "variant": "soft",
        "themeMode": "light",
        "fontFamily": "inter"
    },
    "clientId": "xxxxxxxxxxxxxxxxxxxxxx"
});
```

## 3. Add Webchat to an HTML div

Now you can embed Webchat directly in an HTML `<div>` on your website:

```html {8} [expandable] theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
<div id="webchat-container" style="position: relative; width: 100%; height: 100%;">
  <script src="https://cdn.botpress.cloud/webchat/v3.3/inject.js"></script>
  <script>
    window.botpress.on('webchat:initialized', () => {
      window.botpress.open()
    })

    // Paste your Webchat config snippet here
  </script>
  <style>
    #webchat-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .bpFab {
      display: none;
    }
    .bpWebchat {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
    }
  </style>
</div>
```

> [!TIP]
>
> By default, the code above will make Webchat take up your entire screen. To change the size and position of the Webchat window, update the `bpWebchat` class.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.