Sizing

Control the widget panel’s dimensions and let your users resize it to their preference.

Default size

Set size.width and size.height to any CSS value — px, %, vw/vh, rem, etc.:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  size: {
    width: '500px',
    height: '80vh'
  }
});

If omitted, the widget defaults to 85vw wide and 92vh tall.

Conversation width

Messages and the message box sit in a centred column up to 48rem wide, so on a wide panel there is empty space on both sides. Set size.conversationWidth to any CSS value to change that maximum; "100%" fills the panel. size.conversationPadding sets the space between the sent messages and the panel’s sides; "0" runs them edge to edge. The message box keeps its own spacing:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  size: {
    conversationWidth: '100%',
    conversationPadding: '0'
  }
});

With conversationPadding set, the turn outline that appears once a chat has two turns can overlap the start of a message. Signed-in users on desktop see their chats in a sidebar beside the conversation. It opens 256px wide, and users can drag its edge between 200px and 320px; the width they choose is saved to localStorage. Set size.sidebarMaxWidth (in pixels) to change how wide they can drag it:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  size: {
    sidebarMaxWidth: 394
  }
});

The sidebar never grows past it, even if a user saved a wider width before. A maximum below 256px also lowers the opening width, and one below 200px the minimum. The default leaves the conversation at least half of the smallest default panel; a larger maximum can leave it less on narrow screens. The open sidebar has 12px of space on its left and right and 14px above and below. Set size.sidebarPadding to any CSS value to change it; the New Chat button and the chat list line up with it:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  size: {
    sidebarPadding: '24px'
  }
});

Chats in the list keep their own spacing inside it, and the collapsed sidebar keeps its padding.

Resizable by users

Enable resizable to let users drag the top edge, left edge, or top-left corner to resize the panel. Their preferred size is saved to localStorage and restored on page refresh. Double-clicking a resize handle resets to the default size.

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

Resize constraints

Set minimum and maximum dimensions (in pixels) for resizing:

const voltai = Voltai.load({
  apiKey: 'your-api-key',
  size: {
    width: '600px',
    height: '80vh',
    minWidth: 400,
    minHeight: 500,
    maxWidth: 1200,
    maxHeight: 900
  }
});

Available options

Property	Type	Default	Description
`width`	`string`	`"85vw"`	Default width (any CSS value)
`height`	`string`	`"92vh"`	Default height (any CSS value)
`minWidth`	`number`	`320`	Minimum width in px when resizing
`minHeight`	`number`	`400`	Minimum height in px when resizing
`maxWidth`	`number`	viewport - 32	Maximum width in px when resizing
`maxHeight`	`number`	viewport - 32	Maximum height in px when resizing
`resizable`	`boolean`	`true`	Enable drag-to-resize handles
`conversationWidth`	`string`	`"48rem"`	Maximum width of the messages and message box (any CSS value)
`conversationPadding`	`string`	`"1rem"`	Space between the sent messages and the panel’s sides (any CSS value); without it, `2.5rem` once the turn outline shows
`sidebarMaxWidth`	`number`	`320`	Maximum width in px users can drag the desktop chat sidebar to
`sidebarPadding`	`string`	`"14px 12px"`	Space inside the open desktop chat sidebar, around New Chat and the chat list (any CSS value)

The resized size is persisted in localStorage under the key voltai_panel_size. It takes priority over the configured default, so users always get the size they last chose.

Getting Started

Configuration

Guides

Default size

Conversation width

Sidebar width

Sidebar padding

Resizable by users

Resize constraints

Available options

​Default size

​Conversation width

​Sidebar width

​Sidebar padding

​Resizable by users

​Resize constraints

​Available options

Default size

Conversation width

Sidebar width

Sidebar padding

Resizable by users

Resize constraints

Available options