# Attributes reference

The `<livelayer-widget>` custom element reads its configuration from HTML attributes. All attributes are optional except `agent-id`. Attributes can be changed at runtime — the widget reacts via `attributeChangedCallback`.

```html
<livelayer-widget
  agent-id="agt_abc123"
  mode="widget"
  position="bottom-right"
  capabilities="navigate,scroll"
  base-url="https://livelayer.app"
  api-key="ll_live_...">
</livelayer-widget>
```

## Reference

<!-- omitted: ParamsTable -->

## Setting attributes from JavaScript

The element reacts to attribute changes via `attributeChangedCallback`, so you can change configuration at runtime:

```ts title="dynamic.ts"
const widget = document.querySelector("livelayer-widget");
if (widget) {
  // Switch to a different agent on the fly
  widget.setAttribute("agent-id", "agt_xyz789");

  // Tighten the capability allowlist after a checkout step
  widget.setAttribute("capabilities", "navigate");
}
```

## Embedded-mode sizing

When `mode="embedded"`, the widget fills its parent container. Wrap it to control size:

```html title="embedded.html"
<div style="width: 100%; max-width: 480px; height: 600px;">
  <livelayer-widget
    agent-id="agt_abc123"
    mode="embedded">
  </livelayer-widget>
</div>
```

## Multiple widgets on one page

You can have multiple `<livelayer-widget>` elements on the same page (e.g., one in a hero section and one persistent in the footer) — each runs its own session. They don't share state.

If you want them to share state (same conversation across two surfaces), use the [NPM](/docs/develop/npm/overview) `controlledSession` prop instead.