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.

If you just want to quickly add a bot to your website, use the Quickstart guide.

You will need:

• A published bot
• Basic familiarity with HTML

1. Get your embed code

   Navigate to either the Studio or the Dashboard.

   From the Studio

   1. Select Share in the upper-right corner.
   2. Select Configure, then copy the src URL in the second script tag:

   
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.2/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.