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

Navigate to either the Studio or the Dashboard.
  • From the Studio
  • From the Dashboard
  1. Select Share in the upper-right corner.
  2. Select Configure, then copy the src URL in the second script tag:
Studio manual init
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.