Embed Webchat in an element

You can embed Webchat inside a specific HTML element on your website. This hides the chat bubble that usually toggles Webchat and gives you more control over Webchat’s appearance and location.

You will need:

• A website with an embedded bot using Webchat v3.3
• Basic familiarity with HTML

1. Get your Webchat element ID

   First, get your Webchat element ID:

   1. Select your bot from your workspace.
   2. Go to Webchat > Deploy Settings.
   3. Under Chat interface, select Embedded.
   4. Copy the contents of the Element ID field.
      You can also set a custom element ID in the field.

   5. Scroll to the bottom of the page, then select Save configuration.
2. Add the element to your website

   Next, add an element to your website’s HTML. Set the id attribute to the ID you copied earlier:

   <div id="bp-embedded-webchat"></div>
   

Done! The Webchat window will now be visible in the element.