Skip to main content
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.
If you just want to quickly add a bot to your website, use the Quickstart guide.
You will need:
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:
https://files.bpcontent.cloud/20XX/0X/0X/XX/XXXXXXXXXXXXXXXX-XXXXXXXX.js
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:
<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>
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.
Last modified on December 9, 2025