# Render modes

> Floating, embedded, and custom-launcher render modes for the chat widget.

Source: https://docs.useclad.ai/render-modes

---

```ts
await chat.render({ mode: "floating" });                         // default

await chat.render({ mode: "embedded", target: "#support-panel" }); // inline

await chat.render({ mode: "custom-launcher", launcher: false });   // your launcher
```

| Mode | Behavior |
|---|---|
| `floating` | Default. Floating launcher + panel anchored to a corner. |
| `embedded` | Renders the widget inside a container you provide (`target`). |
| `custom-launcher` | Hides our launcher; you control open/close. Events still fire. |

<div class="img-ph">
  <span class="img-ph__badge">📷 Screenshot needed</span>
  <p class="img-ph__title">Floating vs. embedded</p>
  <p class="img-ph__desc">A side‑by‑side (or two stacked shots) showing the <strong>floating</strong> widget anchored to a corner and the <strong>embedded</strong> widget rendered inline inside a page container, so readers can see the difference between render modes.</p>
</div>