# Modes

Three presentation modes ship with the script tag. The dashboard sets a default per agent; the `mode` attribute overrides it per embed.

## Widget (floating bubble)

The agent docks as a circular bubble in a corner. Click expands to a 380×560px panel. Click X to collapse. Best for marketing sites where the agent should be present but unobtrusive.

```html title="widget.html"
<script src="https://livelayer.app/v1.js"></script>
<livelayer-widget
  agent-id="agt_abc123"
  mode="widget"
  position="bottom-right">
</livelayer-widget>
```

**Behavior:**
- Bubble dock positions: `bottom-right` (default), `bottom-left`, `top-right`, `top-left`
- Bubble dimensions: 60px circle, 16px from the edges
- Expanded panel: 380×560px on desktop; full-screen on mobile
- Auto-minimizes to bubble when conversation ends
- Visitor's last open/closed state persists in `localStorage` (key: `ll-widget`)

## Embedded (inline)

The agent renders at whatever size its parent gives it. No floating chrome. Best for dedicated agent sections on a page (e.g., a "Talk to us" hero block).

```html title="embedded.html"
<div style="width: 100%; max-width: 600px; height: 720px;">
  <script src="https://livelayer.app/v1.js"></script>
  <livelayer-widget
    agent-id="agt_abc123"
    mode="embedded">
  </livelayer-widget>
</div>
```

**Behavior:**
- Fills 100% of parent's width and height
- No bubble, no floating panel — agent is always visible
- Toolbar (mic, camera, mute, etc.) appears at the bottom of the agent area
- Falls back to mobile layout below 640px wide

## Fullscreen (takeover)

The agent renders edge-to-edge, taking over the viewport. Best for dedicated landing pages (e.g., `/talk-to-our-agent`) or kiosk experiences.

```html title="fullscreen.html"
<script src="https://livelayer.app/v1.js"></script>
<livelayer-widget
  agent-id="agt_abc123"
  mode="fullscreen">
</livelayer-widget>
```

**Behavior:**
- Position: `fixed`, occupying 100vw × 100vh
- Stacks above all other content (`z-index: 2147483647`)
- Often combined with a slide deck on the agent for walkthrough-style experiences
- Equivalent to the [hosted URL](/docs/develop/hosted/overview) but on your own domain

## Picking a mode

| Mode | When to use |
|---|---|
| **widget** | Marketing site overlay, support / sales bubble, persistent across pages |
| **embedded** | Dedicated agent section in a page (hero, sidebar, modal) |
| **fullscreen** | Standalone landing page, kiosk, or campaign-specific takeover |

If unsure, start with `widget`. You can switch later by changing the `mode` attribute.