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'
}
});
85vw wide and 92vh tall.
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 |
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.