Docs

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.

Get your embed code

To embed a bot on your website, you need the bot’s Webchat embed code. You can get the embed code from the Dashboard:

  1. Open your bot’s Workspace and select the bot you want to embed.
  2. In the left sidebar, go to Webchat > Deploy Settings.
  3. Copy the Embed code:
Embed code from Dashboard

Copy the script URL

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

window.botpress.init({
    "botId": "xxxxxxxxxxxxxxxxxxxxxx",
    "configuration": {
        "website": {},
        "email": {},
        "phone": {},
        "termsOfService": {},
        "privacyPolicy": {},
        "variant": "soft",
        "themeMode": "light",
        "fontFamily": "inter"
    },
    "clientId": "xxxxxxxxxxxxxxxxxxxxxx"
});

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>