> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voltai.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Positioning

> Control where the widget button and desktop panel appear

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.

<Note>
  `panelPosition` only affects desktop layouts. On mobile, the widget still opens full-screen.
</Note>

## Button position

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

```javascript theme={null}
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:

```javascript theme={null}
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:

```javascript theme={null}
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.

## Examples

### Left launcher and left panel

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

### Left launcher with a bottom-centered panel

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

### Centered panel with blurred backdrop

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

<Tip>
  User resizing is currently only available for the default right-docked desktop panel.
</Tip>