Wix

Add a bot to your Wix website using Webchat.

You will need:

• A published bot
• A Wix website with a plan that allows adding custom scripts
• A domain connected to your Wix website
• Familiarity with HTML (if you want to embed in an HTML div)

Visual learner?

Check out our Wix guide on YouTube, which teaches you how to build and embed a bot on your Wix site.

As a chat bubble

1. 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 either the Studio or the Dashboard.

   From the Studio

   1. Select Share in the upper-right corner.
   2. Select Configure, then copy the script tags:

   
2. Add to your Wix website

   Next, add the Webchat embed code to your Wix website:

   1. Login to your Wix dashboard and select Settings in the left navigation bar.
   2. Scroll to Advanced Settings, then select Custom Code.
   3. Select + Add Custom Code. Then, paste the Webchat embed code in code snippet field.
   4. Check the All pages option, then select Load code once from the drop-down menu.
   5. Check the Body - start option.
   6. Select Apply.

In an HTML div

You can also embed your bot in an HTML div. This is useful if you want more control over where your bot appears on your Wix site.

1. Get your Webchat initialization script

   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 to your Wix site

   Next, use your credentials to embed the Webchat in an HTML div on your website.

   1. Login to your Wix dashboard and select Edit Site in the upper-right corner.
   2. Select Add Elements from the left sidebar.
   3. Select Embed Code, then select Embed HTML.
   4. Adjust your HTML div as you’d like.
   5. Under Add your code here (HTTPS only), add the following code:

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

As a website

You can also embed your bot as a website via Webchat preview.

1. Get your shareable link

   1. In Studio, select Share in the upper-right corner.
   2. Copy your bot’s shareable link.
2. Add to your Wix website

   1. Login to your Wix dashboard and select Edit Site in the upper-right corner.
   2. Select Add Elements from the left sidebar.
   3. Select Embed Code, then select Embed a site.
   4. In the What’s the website address field, paste your bot’s link, then select Apply.

Your bot is now live on your Wix site.

Next steps

Now that you’ve added your bot, try styling it to match the rest of your website’s user interface.