> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Info>
  You will need:

  * A website with an [embedded bot](/webchat/get-started/quick-start) using Webchat v3.3
  * Basic familiarity with HTML
</Info>

<Steps titleSize="h2">
  <Step title="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.
           <Tip>
             You can also set a custom element ID in the field.
           </Tip>
    5. Scroll to the bottom of the page, then select **Save configuration**.
  </Step>

  <Step title="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:

    ```html theme={null}
    <div id="bp-embedded-webchat"></div>
    ```
  </Step>
</Steps>

<Check>
  Done! The Webchat window will now be visible in the element.
</Check>