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

# Use custom toggle to open/close Webchat

You can toggle Webchat open/closed using a custom HTML element. This hides the default chat bubble that usually loads with Webchat.

<Info>
  You will need:

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

<Note>
  This option isn't available if you're [embedding Webchat in a specific element](/webchat/get-started/embed-in-element).
</Note>

<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 Launcher**, select **Custom element**.
    4. Copy the contents of the **Element Selector** field.
           <Tip>
             You can also set a custom element ID in the field.
           </Tip>
    5. Select **Publish Changes**.
  </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}
    <button id="bp-toggle-chat">Toggle chat</button>
    ```
  </Step>
</Steps>

<Check>
  Done! This element will now toggle the Webchat window.
</Check>