# Chatbot layout

Renders as a chat-bubble button in the corner of the screen that opens the form in a compact, chat-style window. In `formsapp()`, this layout's value is `'popover'`.

## Embed code

```html
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'popover', {'button':{'color':'#ff9e24'},'align':'right'}, 'https://eu.forms.app');"></script>
```

The chatbot layout creates its own trigger button, so no placeholder `<iframe>` or `<button>` element is needed; only the loader `<script>` tag.

## Options

| Option | Description |
|  --- | --- |
| `button.color` | Hex color of the chat bubble, for example `'#ff9e24'`. |
| `align` | Which corner the bubble docks to: `'left'` or `'right'`. |


The chatbot layout also supports the shared `autoOpen` settings described in [Embed options](/embeds/embed-options#shared-button-and-auto-open-settings).

## What's next

- [Embed options](/embeds/embed-options) for the other layouts.
- [Examples](/embeds/examples) for React, Next.js, Vue, and Kotlin.