Layout modes

The widget can sit on your page in a few different ways. Pick one with the data-layout attribute (or the layout option in the JS API).

data-layout	What it looks like	Launcher button
bubble	Default. A floating box anchored to a corner, opened by a launcher button.	Shown
sidebar	Docked to a side of the viewport, full height.	Shown
inline	Rendered inside an element you provide, in your page's normal flow.	Hidden (always visible)
detached	A free-floating box the end user can drag and resize.	Shown

<script
  type="module"
  src="https://cdn.appilot.com/widget/v1/appilot.esm.js"
  data-layout="sidebar"
  async
></script>

The corner the bubble / sidebar modes attach to follows data-position (bottom-right default, or bottom-left).

Sidebar

data-layout="sidebar" docks the panel to the edge full-height. The launcher button still opens and closes it (the open panel covers the button; it reappears when closed). Width follows data-width (default 400px).

Inline

data-layout="inline" renders the assistant inside an element you provide, in normal document flow, with no floating launcher and no backdrop. It is always visible (there is no open/close), so use it for an assistant that lives in a page region, panel, or tab.

Point data-container at the element (any CSS selector):

<div id="assistant" style="height: 600px"></div>

<script
  type="module"
  src="https://cdn.appilot.com/widget/v1/appilot.esm.js"
  data-layout="inline"
  data-container="#assistant"
  async
></script>

The widget fills the container, so give the container a height. If the selector does not match an element, the widget falls back to a floating bubble (and logs a warning) rather than disappearing.

Pop out (detached)

data-layout="detached" (or Pop out from the in-panel menu) lets the panel free-float anywhere on the page. The end user drags it by its header and resizes it from any edge or corner; the position and size are remembered across visits. Dock (same menu) returns it to the docked bubble/sidebar placement.

<script
  type="module"
  src="https://cdn.appilot.com/widget/v1/appilot.esm.js"
  data-layout="detached"
  async
></script>

Switching at runtime

From the in-panel menu the end user can:

• Layout — switch between bubble and sidebar (when docked).
• Pop out / Dock — float the panel out (drag + resize) or send it back.

Their choices are remembered across visits, and switching never loses the open conversation. inline is a fixed, developer-chosen placement and is not user-switchable.