> ## Documentation Index
> Fetch the complete documentation index at: https://watermelon.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Chat widget customization
> Learn how to embed, style, and personalize your chat widget. This guide covers iframe integration, custom buttons, layout adjustments with CSS, and link previews — everything you need to tailor the widget to your website.
## Embed a a widget in an iframe
You can embed the Watermelon chat widget in an iframe to keep it isolated and fully functional within any section of your website.
### **Set widget placement to embedded**
In Watermelon, go to the desired chat widget in apps, once you are in the chat widget go to **Placement** and change your Chat Widget setting to **Embedded**.
Turn Automatically open the widget to On, this makes sure the embedded widget is open by default.
### **Add an iframe to your page**
Add the following code to your HTML where you want the widget to appear:
```javascript theme={null}
```
* **srcdoc** defines the chat widget script that will load inside the iframe.
* **width** and **height** control the size—adjust these values to fit your layout.
* Replace your-widget-id and your-settings-id with the IDs found under the chat widget settings under **Placement** in Watermelon.
### **Place the iframe in your page structure, example HTML:**
```html theme={null}
Watermelon Chat Widget
```
### **Test the integration**
Open your page in a browser and check that the Watermelon chat widget loads correctly inside the iframe.
## **Customizing an embedded widget with your own CSS**
When you embed the Watermelon widget using an \
```
### **Explanation**
* border-radius: 15px; — rounds the corners of the iframe.
* width: 100%; — makes the widget fit the container width.
* height: 700px; — limits the height so it doesn’t fill the entire screen.
* srcdoc — loads the chat widget script inside the iframe.
Replace your-widget-id and your-settings-id with your actual values from the chat widget settings → Chat widget → **Placement** in Watermelon.
### **Implementation tips**
* Place the \