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.

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

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

<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 but on your own domain

Picking a mode

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