Positioning

Use layout options to place the floating launcher on the left or right, position the desktop panel, and optionally blur the page behind the widget. To show the chat as part of the page instead, embed it inline.

panelPosition only affects desktop layouts. On mobile, the widget still opens full-screen.

Button position

Set buttonPosition to move the floating launcher between the right and left edges of the page:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  buttonPosition: 'left'
});

Available values:

Property	Type	Default	Description
`buttonPosition`	`"right" \| "left"`	`"right"`	Position of the floating launcher button

Panel position

Set panelPosition to control where the desktop widget opens:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  panelPosition: 'bottom-center'
});

Available values:

Property	Type	Default	Description
`panelPosition`	`"right" \| "left" \| "bottom-center" \| "center"`	`"right"`	Position of the desktop panel when open

Backdrop blur

Set backdropBlur to blur and dim the page content behind the open desktop widget:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  panelPosition: 'center',
  backdropBlur: true
});

This is especially useful when you want a centered, modal-style chat experience. To change the dim’s color or strength, set colors.backdrop and style.backdropOpacity (see Styling).

Inline in a page section

Set inline to an element, or a CSS selector for one, to render the chat inside it instead of as a floating popup:

<section id="voltai-chat" style="height: 700px"></section>

<script>
  const voltai = Voltai.load({
    apiKey: 'your-api-key',
    inline: '#voltai-chat'
  });
</script>

The chat fills the element, so give the element a height or set size.height. It is never shorter than size.minHeight (default 400). Its layout follows the element’s width: below 768px wide it uses the compact layout the floating widget uses on phones. Inline, the widget is always open:

There is no launcher, backdrop or close button.
open(), close() and toggle() do nothing, and widget:open / widget:close never fire.
buttonPosition, panelPosition, backdropBlur and size.resizable are ignored.

Voltai.load() throws if no element matches the selector, so call it after the element exists.

Examples

Left launcher and left panel

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  buttonPosition: 'left',
  panelPosition: 'left'
});

Left launcher with a bottom-centered panel

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  buttonPosition: 'left',
  panelPosition: 'bottom-center'
});

Centered panel with blurred backdrop

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  buttonPosition: 'left',
  panelPosition: 'center',
  backdropBlur: true,
  size: {
    width: 'min(720px, 92vw)',
    height: 'min(820px, 88vh)'
  }
});

User resizing is currently only available for the default right-docked desktop panel.

Getting Started

Configuration

Guides

Button position

Panel position

Backdrop blur

Inline in a page section

Examples

Left launcher and left panel

Left launcher with a bottom-centered panel

Centered panel with blurred backdrop

​Button position

​Panel position

​Backdrop blur

​Inline in a page section

​Examples

​Left launcher and left panel

​Left launcher with a bottom-centered panel

​Centered panel with blurred backdrop

Button position

Panel position

Backdrop blur

Inline in a page section

Examples

Left launcher and left panel

Left launcher with a bottom-centered panel

Centered panel with blurred backdrop