Attributes

Layout & Positioning

Attributes that control the widget's position, size, and spacing.

`position`

Widget positioning on the page.

Property	Value
Type	`'inline'` \| `'left'` \| `'center'` \| `'right'`
Default	`'right'`

right — Bottom-right corner (classic chat widget position)
left — Bottom-left corner
center — Bottom-center
inline — Embedded directly in the page flow (no toggle button)

<tolki-chat bot="..." position="right"></tolki-chat>
<tolki-chat bot="..." position="left"></tolki-chat>
<tolki-chat bot="..." position="center"></tolki-chat>
<tolki-chat bot="..." position="inline"></tolki-chat>

`window-size`

Size of the chat window when open.

Property	Value
Type	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`
Default	`'sm'`

<tolki-chat bot="..." window-size="sm"></tolki-chat>
<tolki-chat bot="..." window-size="md"></tolki-chat>
<tolki-chat bot="..." window-size="lg"></tolki-chat>
<tolki-chat bot="..." window-size="xl"></tolki-chat>

`toggle-size`

Size of the circular button that opens/closes the chat.

Property	Value
Type	`'sm'` \| `'md'` \| `'lg'`
Default	`'md'`

<tolki-chat bot="..." toggle-size="sm"></tolki-chat>
<tolki-chat bot="..." toggle-size="md"></tolki-chat>
<tolki-chat bot="..." toggle-size="lg"></tolki-chat>

`margin`

Widget margin from the page edges, in pixels. Supports a single value or two values for X and Y axes.

Property	Value
Type	`number` \| `[number, number]`
Default	`20`

Supported formats:

Single number: "20" — equal margin on all sides
Comma-separated: "20,30" — X=20px, Y=30px
JSON array: "[20,30]" — X=20px, Y=30px

<tolki-chat bot="..." margin="20"></tolki-chat>
<tolki-chat bot="..." margin="10,30"></tolki-chat>
<tolki-chat bot="..." margin="[15,25]"></tolki-chat>
<tolki-chat bot="..." margin="0"></tolki-chat>

`window-max-height`

Maximum height of the chat window. Accepts any valid CSS value.

Property	Value
Type	`string`
Default	`'728px'`

<!-- Default max height -->
<tolki-chat bot="..." window-max-height="728px"></tolki-chat>

<!-- Percentage of parent -->
<tolki-chat bot="..." window-max-height="50%"></tolki-chat>

<!-- Viewport-relative -->
<tolki-chat bot="..." window-max-height="90vh"></tolki-chat>

<!-- Calculated value -->
<tolki-chat bot="..." window-max-height="calc(100vh - 50px)"></tolki-chat>

This only applies to the floating window on desktop (≥480px). On mobile, the chat always opens full-screen.

Overview

Complete reference of all HTML attributes available for the tolki-chat component.

Behavior

Attributes that control the widget's interactive behavior.