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