> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/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.

> [!NOTE]
>
> You will need:
>
> * A website with an [embedded bot](https://botpress.com/docs/webchat/get-started/quick-start.md) using Webchat v3.3
> * Basic familiarity with HTML

> [!NOTE]
>
> This option isn't available if you're [embedding Webchat in a specific element](https://botpress.com/docs/webchat/get-started/embed-in-element.md).

## 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 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.
5. Select **Publish Changes**.

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

```html theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
<button id="bp-toggle-chat">Toggle chat</button>
```

> [!TIP]
>
> Done! This element will now toggle the Webchat window.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.