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

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

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

## 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.
   > [!TIP]
   >
   > 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:

```html theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
<div id="bp-embedded-webchat"></div>
```

> [!TIP]
>
> Done! The Webchat window will now be visible in the element.


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