# Agent Builder

**Access:** [Agent > Chat > click the **Edit**](https://i.usejimo.com/agent-builder) button on the chat preview area.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FcRHUfjTVMUepz5f1TdK4%2Fimage.png?alt=media&#x26;token=0089e9a2-b485-4b06-a866-cd9831818b5a" alt=""><figcaption></figcaption></figure>

***

## Element Tree

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FrPajYTs3cO6lrlePRFWh%2Fimage.png?alt=media&#x26;token=146ed8e3-b8da-4e00-8a61-fa32edfcb2d5" alt=""><figcaption></figcaption></figure>

The Agent Widget consists of the following elements. Click any element in the left panel to select it and view its properties on the right.

```
Widget
├── Control Bar
│   ├── AI Name
│   └── Widget Actions
├── Start Screen
│   ├── AI Avatar
│   └── Greeting
├── User Message
│   ├── Message
│   └── Message Actions
├── AI Message
│   ├── AI Avatar
│   ├── Message
│   ├── Call to Action
│   ├── Message Actions
│   └── Sources
├── User Input
│   └── Send Button
└── AI Disclaimer
```

***

### Widget

The root element that defines the overall chat window type, position, and appearance.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FGbQVp0ZMeahJRqTHrUxn%2Fimage.png?alt=media&#x26;token=caaaeff6-d376-49e1-a9d7-c057c4ddda8e" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Type</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FWlTthoFnTCzsYoiPrTjQ%2Fimage.png?alt=media&#x26;token=287e1db8-29b5-4590-93d4-d25490a64b71" alt=""><figcaption></figcaption></figure>

Choose the widget layout mode from the dropdown:

* **Floating Widget**: A compact chat window floating over the page. Can be repositioned by the user if Draggable is enabled.
* **Full Height Sidebar**: A sidebar that takes the full height of the viewport, anchored to one side of the screen.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FfuTSOMDElTR8DKBaO1jI%2Fimage.png?alt=media&#x26;token=109b1f95-9104-4c2c-9b98-cf1f2b7a5875" alt=""><figcaption></figcaption></figure>

The Type you choose determines which properties are available below (e.g. Height and Offset only exist for Floating Widget).

</details>

<details>

<summary><strong>Behavior</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fv5DK4XVhVK0ktnLHsldh%2Fimage.png?alt=media&#x26;token=d75b50cc-2c26-4870-a323-8f4ab5fa7230" alt=""><figcaption></figcaption></figure>

* **Draggable** (Yes / No): When enabled, end-users can click and drag the chat widget to reposition it on screen. <mark style="color:$warning;">Only available in Floating Widget mode.</mark>

</details>

<details>

<summary><strong>Position</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FKkMMcWHsvrmFSJ1ZEASX%2Fimage.png?alt=media&#x26;token=ab69fac3-e218-4c14-8dee-d9c3d3522018" alt=""><figcaption></figcaption></figure>

**Or**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FLLLoF4uuWWj56qV520S4%2Fimage.png?alt=media&#x26;token=6d63964e-0855-4760-850b-cd28946f3dcf" alt=""><figcaption></figcaption></figure>

* **Alignment**: Left, Center *(<mark style="color:$warning;">Floating Widget only</mark>)*, or Right alignment of the widget on screen.
* **Offset** *(<mark style="color:$warning;">Floating Widget only</mark>)*: Fine-tune the exact position with X and Y pixel values.
  * *X*: Horizontal offset in pixels (e.g. `200`).
  * *Y*: Vertical offset in pixels (e.g. `450`).

</details>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FsL7LDZqkqNi4tqe6jXTt%2Fimage.png?alt=media&#x26;token=ddeaddec-8218-4b49-bc58-59d2c7c218cd" alt=""><figcaption></figcaption></figure>

* **Width**: Auto (adjusts to content) or a fixed pixel value.
* **Height** *(<mark style="color:$warning;">Floating Widget only</mark>)*: Auto or a fixed pixel value.
* **Padding**: Internal spacing around the widget content.
  * Four independent values (top, right, bottom, left) or linked toggle for uniform padding.
  * *Direct Input*: Enter pixel values (e.g. `16`, `16`).

</details>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FaFeOwDOmyop49H0bSty6%2Fimage.png?alt=media&#x26;token=853e8111-6ee8-45c6-b3ae-46f2c108e59a" alt=""><figcaption></figcaption></figure>

* **Radius** *(<mark style="color:$warning;">Floating Widget only</mark>)*: Border roundness of the widget window.
  * *Slider Input*: Increase or decrease corner rounding.
  * *Direct Input*: Enter a pixel value (e.g. `8`).
* **Background**: Background color of the widget.
  * *Color Picker*: Select any color using the visual picker.
  * *Hex Input*: Enter a hex code (e.g. `#ffffffff`).
  * *RGBA*: Fine-tune with individual R, G, B, A values.
  * *Presets*: Select from a grid of preset colors.
* **Border**: Border color around the widget.
  * Same color controls as above (e.g. `#0000003d`).
  * Click X to remove.
* **Overlay**: Background overlay color when the chat is open. Darkens the page behind the widget.
  * Same color controls as above (e.g. `#505050ff`).
  * Click X to remove.
* **Shadow**: Drop shadow on the widget.
  * *Color*: Set the shadow color using the color picker (Hex, RGBA, or presets). E.g. `#0000000f`.
  * *X*: Horizontal offset in pixels.
  * *Y*: Vertical offset in pixels.
  * *Blur*: Blur radius in pixels.
  * Click X to remove.

</details>

***

### Control Bar

The top bar of the chat widget containing the agent name and action buttons.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FpcnpuByTq4Y6aemsMFpV%2Fimage.png?alt=media&#x26;token=49405c2a-c650-49cc-88cf-f1547dc3f3e6" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FS8OeDNFu2jqJcsvLEkFU%2Fimage.png?alt=media&#x26;token=a5fe056e-de6e-4b1e-aaca-8bf8bcd3c11b" alt=""><figcaption></figcaption></figure>

**Padding**: Internal spacing of the control bar.

* *Direct Input*: Enter pixel values (e.g. `12`, `12`). Linked/unlinked toggle.

</details>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F2YuRSXpvvnl1YHbtEPbt%2Fimage.png?alt=media&#x26;token=18505e52-ab93-4c48-927c-436db71b95d6" alt=""><figcaption></figcaption></figure>

* **Background**: Background color of the control bar.
  * *Color Picker*: Visual picker, Hex input (e.g. `#FFFFFF`), RGBA, presets.
* **Border**: Bottom border of the control bar.
  * Click "Add..." to define a color, or leave empty for no border.

</details>

#### AI Name

The display name shown in the control bar header (e.g. "Jimo AI").

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FqPfH94OMHXDF0nzS6lwH%2Fimage.png?alt=media&#x26;token=3273bc2b-b26f-4db5-9335-2fa69570ba17" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Content</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F9WbDLI7jOIV2ecM9837N%2Fimage.png?alt=media&#x26;token=17e41499-2d3f-4510-9ab5-5b411a731824" alt=""><figcaption></figcaption></figure>

* **Name**: The text displayed as the agent name (e.g. "Jimo AI"). This is what users see at the top of the chat.

</details>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FMwJRwOTcFADqk8GMSfkg%2Fimage.png?alt=media&#x26;token=c1a03357-fc64-4280-ab25-91a29e81bdf7" alt=""><figcaption></figcaption></figure>

* **Text color**: Color of the name text.
  * *Color Picker*: Visual picker, Hex input (e.g. `#4d637b`), RGBA, presets.
* **Font family**: Font used for the name.
  * *Dropdown*: Choose from available fonts (e.g. `Montserrat`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Font weight**: Text boldness.
  * *Dropdown*: Choose from available weights (e.g. `600 - Semi-bold`).

</details>

#### Widget Actions

The action icons in the control bar (edit prompt icon, close X button).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FrR3I8n14TRX1k8odcy0S%2Fimage.png?alt=media&#x26;token=bc570ccb-4ecd-4ef0-937b-638c8465dcf6" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F3Juati1OYFpMra42SpxQ%2Fimage.png?alt=media&#x26;token=0d902870-481e-48a1-aeee-783c3a87cc9b" alt=""><figcaption></figcaption></figure>

**Icon size**: Size of the action icons in pixels.

* *Direct Input*: Enter a value (e.g. `20`).

</details>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FXcxd9WwvAftwY8coqkp4%2Fimage.png?alt=media&#x26;token=2dbf7eb4-eab8-4ec2-8f73-537dae6a60c8" alt=""><figcaption></figcaption></figure>

**Icon color**: Color of the action icons.

* *Color Picker*: Visual picker, Hex input (e.g. `#8989a9ff`), RGBA, presets.

</details>

***

### Start Screen

The initial view displayed when the chat opens, before the user sends a message. Contains the avatar and a greeting.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FS93o9k8POoZa0rXxLcNy%2Fimage.png?alt=media&#x26;token=367f40cb-dfa6-42ae-bfbb-6fb8e99ad416" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FkaGnmp5zmjPLgyZrXVg1%2Fimage.png?alt=media&#x26;token=7ede2803-a779-4193-bc62-364259dac0c2" alt=""><figcaption></figcaption></figure>

* **Gap**: Spacing between the avatar and the greeting text.
  * *Direct Input*: Enter a pixel value (e.g. `12`).
* **Padding**: Internal spacing around the start screen content.
  * *Direct Input*: Four values (e.g. `0`, `0`). Linked/unlinked toggle.
* **Alignment**: Horizontal alignment of the start screen content.
  * Left, Center, or Right.
* **Position**: Vertical positioning within the widget.
  * Top, Center, or Bottom.

</details>

#### AI Avatar

The avatar image displayed on the start screen above the greeting.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FTCFJvtTAGsyopfExu9ym%2Fimage.png?alt=media&#x26;token=302e515e-eed1-4d98-af06-b11621999734" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FGrT3TTg6W0p4D2EBDV2M%2Fimage.png?alt=media&#x26;token=e218ee4b-90e2-4fed-bba1-b788e9afb0cb" alt=""><figcaption></figcaption></figure>

Applied globally ("For every AI Avatars"). This setting also affects the AI Avatar in AI Message responses.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FJ8HPVTF0x3GRthe2EgrC%2Fimage.png?alt=media&#x26;token=a6bc21df-b711-430f-a986-7c0fbcff47c1" alt=""><figcaption></figcaption></figure>

* **Avatar**: Upload a custom avatar image (click to browse), or use the default Jimo avatar. Displays as "Custom Avatar" when a custom image is set.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F0Xqzed1Dq0SU6fHWTSqL%2Fimage.png?alt=media&#x26;token=f687df62-178e-40bb-a21e-b604c7636298" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FPNK3JJ2XUyoxZ0YdxekY%2Fimage.png?alt=media&#x26;token=eec6bb35-1746-451a-a4f5-6cb2bf919753" alt=""><figcaption></figcaption></figure>

* **Size**: Avatar dimensions in pixels.
  * *Direct Input*: Enter a value (e.g. `49`).
* **Radius**: Border roundness of the avatar.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `20`).

</details>

#### Greeting

The welcome text displayed below the avatar on the start screen.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FqA79CxSDdeclrqoW49rl%2Fimage.png?alt=media&#x26;token=3efc7e3b-92f3-4bc7-b4e7-a15193e2705e" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Content</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fwt4Zoq3oPxJQrzobcl5Y%2Fimage.png?alt=media&#x26;token=40c74b92-cec3-4d4e-b928-4d99d705db3d" alt=""><figcaption></figcaption></figure>

A text editor for the greeting message. Supports:

* Plain text (e.g. "How can I help you today?")
* **Links** (chain icon): Insert clickable links in the greeting.
* **Emojis** (smiley icon): Add emojis for a friendlier tone.
* **Attributes** (person icon): Insert dynamic user attributes for personalized greetings (e.g. "Hi {user\_name}, how can I help?").

</details>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FA5ER42iZXkDK4kxZHo4G%2Fimage.png?alt=media&#x26;token=e438bac7-c961-44d2-8e68-24038f85c187" alt=""><figcaption></figcaption></figure>

* **Color**: Text color of the greeting.
  * *Color Picker*: Visual picker, Hex input (e.g. `#000000`), RGBA, presets.
* **Font family**: Font used for the greeting.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `20`).
* **Font weight**: Text boldness.
  * *Dropdown*: Choose from available weights (e.g. `500 - Medium`).

</details>

***

### User Message

Controls the appearance of messages sent by the user. Contains the message bubble and action icons.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FEbQtTyffDU7Ry7FB2C0Z%2Fimage.png?alt=media&#x26;token=bc65bda9-8b6a-473b-be54-f8147620a290" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Ft5lXlouCYXCHMKtR7Q4u%2Fimage.png?alt=media&#x26;token=7c385786-7e1c-4950-8987-c6c72bafeb60" alt=""><figcaption></figcaption></figure>

* **Gap**: Spacing between the message bubble and the action icons below.
  * *Direct Input*: Enter a pixel value (e.g. `8`).
* **Padding**: External spacing around the user message block.
  * *Direct Input*: Four values (e.g. `0`, `0`). Linked/unlinked toggle.

</details>

#### Message

The user's message bubble.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FC5UXHaJWtMOlP7Wrt7wO%2Fimage.png?alt=media&#x26;token=beb0b09d-b008-42c6-864b-856d991cb9c1" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FnrgG4VNwF2ydg5ru0CjR%2Fimage.png?alt=media&#x26;token=90970dfc-3a1d-4cc9-be35-f12fcfe6e8a7" alt=""><figcaption></figcaption></figure>

* **Radius**: Border roundness of the message bubble.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `15`).
* **Padding**: Internal spacing inside the bubble.
  * *Direct Input*: Four values (e.g. `12`, `12`). Linked/unlinked toggle.
* **Background**: Bubble background color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#f3f7feff`), RGBA, presets.
  * Click X to remove.
* **Border**: Border color around the bubble.
  * Click "Add..." to define a color, or leave empty for no border.
* **Shadow**: Drop shadow on the bubble.
  * *Color*: Set shadow color (Hex, RGBA, or presets).
  * *X*: Horizontal offset in pixels.
  * *Y*: Vertical offset in pixels.
  * *Blur*: Blur radius in pixels.
  * Click "Add..." to define, or X to remove.

</details>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F6shvIZ65aJjwo7KXWjyq%2Fimage.png?alt=media&#x26;token=7c0ba5bf-5ac3-450f-a9bc-c7c340910936" alt=""><figcaption></figcaption></figure>

* **Font family**: Font used for user messages.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font weight**: Text boldness.
  * *Dropdown*: Choose from available weights (e.g. `500 - Medium`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Text Color**: Color of the user's message text.
  * *Color Picker*: Visual picker, Hex input (e.g. `#000000`), RGBA, presets.

</details>

#### Message Actions

The action icons next to user messages (copy button).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F8wXizcnfIpebPGWx6AvL%2Fimage.png?alt=media&#x26;token=98bfdc33-2bcf-406a-9ab6-000f11a71eef" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FBY2ru288lriJ4t8y7KGw%2Fimage.png?alt=media&#x26;token=07258cb1-01f5-4fa5-afa8-21dd8551a3fe" alt=""><figcaption></figcaption></figure>

Applied globally ("For every Message Actions"). This setting also affects Message Actions in AI Message.

* **Icon size**: Size of the action icons in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Icon color**: Color of the action icons.
  * *Color Picker*: Visual picker, Hex input (e.g. `#ccccccff`), RGBA, presets.

</details>

***

### AI Message

Controls the appearance of the Agent's responses. Contains the avatar, message text, call to action buttons, feedback icons, and source links.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F0KsXof0rmESx94eW9HqG%2Fimage.png?alt=media&#x26;token=3eeb0adb-088f-4a69-877f-df11f0dc1472" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FrNXAplpeVIYqLtgyBule%2Fimage.png?alt=media&#x26;token=2670b465-a46d-4e6a-8a3a-85c7cae0e228" alt=""><figcaption></figcaption></figure>

* **Gap**: Spacing between elements inside the AI message block (avatar, message, CTA, actions, sources).
  * *Direct Input*: Enter a pixel value (e.g. `12`).
* **Padding**: External spacing around the AI message block.
  * *Direct Input*: Four values (e.g. `0`, `0`). Linked/unlinked toggle.

</details>

#### AI Avatar

The avatar displayed next to the Agent's responses.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FzuuRzDwRH77jqJAG9OBb%2Fimage.png?alt=media&#x26;token=966af704-ff28-47e7-8107-85a88e1134b0" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FTyAGJhA3Ps8UjBNgaBkD%2Fimage.png?alt=media&#x26;token=b79fad84-9a5f-463f-baee-a5f4a4b7b66d" alt=""><figcaption></figcaption></figure>

Applied globally ("For every AI Avatars"). Shared with the Start Screen avatar.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FXqb9205DYhQs1RmCobk6%2Fimage.png?alt=media&#x26;token=b6faaaa3-70b7-4932-8b53-486cff2db0db" alt=""><figcaption></figcaption></figure>

* **Avatar**: Upload a custom avatar image, or use the default. Changing it here updates the Start Screen avatar as well.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FV6ef8JpfqY4Ke9kHRg0J%2Fimage.png?alt=media&#x26;token=67d71e24-6763-4026-8998-b1bc5257b706" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FBJOMm75IpDi067oG8eFl%2Fimage.png?alt=media&#x26;token=7012f2bf-79c0-431e-a956-2fd7b426fb42" alt=""><figcaption></figcaption></figure>

* **Size**: Avatar dimensions in pixels.
  * *Direct Input*: Enter a value (e.g. `49`).
* **Radius**: Border roundness.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `20`).

</details>

#### Message

The Agent's response content. Supports separate styling for the title (main answer heading) and body (detailed text).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FA1wlLsAO5LmzbMRuKUY5%2Fimage.png?alt=media&#x26;token=cea9d897-5985-4db0-b992-3d9ace2ba549" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FU4vQsUfVdWLHZSaW08Lj%2Fimage.png?alt=media&#x26;token=e2f23e23-8bb7-409b-ab90-c8ce73277514" alt=""><figcaption></figcaption></figure>

* **Radius**: Border roundness of the message area.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `4`).
* **Padding**: Internal spacing.
  * *Direct Input*: Four values (e.g. `0`, `0`). Linked/unlinked toggle.
* **Background**: Background color of the message area.
  * Click "Add..." to define a color. Hex, RGBA, or presets.
* **Border**: Border color.
  * Click "Add..." to define a color.
* **Shadow**: Drop shadow.
  * *Color*: Hex, RGBA, or presets. *X/Y/Blur*: Pixel values.
  * Click "Add..." to define, or X to remove.

</details>

<details>

<summary><strong>Title</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FtZxH3HCnzsZeeb97PuKA%2Fimage.png?alt=media&#x26;token=82f3738f-27df-4ed0-8a14-cb57cc19418f" alt=""><figcaption></figcaption></figure>

Controls the main heading text of the Agent's response.

* **Font family**: Font used for the title.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font weight**: Title boldness.
  * *Dropdown*: Choose from available weights (e.g. `500 - Medium`).
* **Color**: Title text color.
  * Click "Add..." to define. Hex, RGBA, or presets.

</details>

<details>

<summary><strong>Body</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F4hT9kQmfbumcwnfgRMVV%2Fimage.png?alt=media&#x26;token=8ac6e7c1-6b10-4e51-84bf-a17bf4fee902" alt=""><figcaption></figcaption></figure>

Controls the detail/description text below the title.

* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Font family**: Font used for the body.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font weight**: Body text boldness.
  * *Dropdown*: Choose from available weights (e.g. `400 - Regular`).
* **Color**: Body text color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#4d637bff`), RGBA, presets.

</details>

#### Call to Action

The CTA button displayed in the Agent's response (e.g. "Learn more"). Appears when the Agent suggests an action or links to a resource.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fgr7Owv0lYaUCBC092nDr%2Fimage.png?alt=media&#x26;token=2664c060-fef0-441d-aafc-0db6712e0a54" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FfFLoFJc1KgIUPe7oAGlj%2Fimage.png?alt=media&#x26;token=2ad5a8b9-6948-40e2-b87e-18d6b2022767" alt=""><figcaption></figcaption></figure>

* **Text color**: CTA button text color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#FFFFFF`), RGBA, presets.
* **Font family**: Font used for the CTA text.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Font weight**: CTA text boldness.
  * *Dropdown*: Choose from available weights (e.g. `400 - Regular`).
* **Padding**: Internal spacing of the button.
  * *Direct Input*: Four values (e.g. `16`, `8`). Linked/unlinked toggle.
* **Radius**: Border roundness of the button.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `12`).
* **Background**: Button background color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#071331`), RGBA, presets.
  * Click X to remove.
* **Border**: Button border color.
  * Click "Add..." to define a color.
* **Shadow**: Drop shadow on the button.
  * *Color*: Hex, RGBA, or presets (e.g. `#00000026`). *X/Y/Blur*: Pixel values.
  * Click X to remove.

</details>

#### Message Actions

The feedback and action icons below the Agent's response (thumbs up, thumbs down, copy, etc.).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fjq4PJOym8mrVNYMJCCK8%2Fimage.png?alt=media&#x26;token=6270e01c-7dca-4084-8e04-0983dab721b6" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FpZQPNmRnrLFckTH7D5J0%2Fimage.png?alt=media&#x26;token=cd1a5347-c9a5-4feb-a545-bc6786c92710" alt=""><figcaption></figcaption></figure>

* **Icon size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Icon color**: Color of the icons.
  * *Color Picker*: Visual picker, Hex input (e.g. `#ccccccff`), RGBA, presets.

</details>

#### Sources

The source reference links displayed below the Agent's response, showing which knowledge sources were used to generate the answer (e.g. "Password Reset Guide", "Account Security FAQ").

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FCLXYuGS1O6T8jivS8R0d%2Fimage.png?alt=media&#x26;token=ebb7ab74-8345-4aa3-a446-c83b9876326c" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F9UX0NukONjw7UPaTImP5%2Fimage.png?alt=media&#x26;token=ee7f1625-395b-47be-9270-261a90eb1922" alt=""><figcaption></figcaption></figure>

* **Gap**: Spacing between source items.
  * *Direct Input*: Enter a pixel value (e.g. `8`).
* **Padding**: External spacing around the sources block.
  * *Direct Input*: Four values (e.g. `0`, `0`). Linked/unlinked toggle.

</details>

<details>

<summary><strong>Styles</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FRlrUKADiIYNvd6ZGs6dM%2Fimage.png?alt=media&#x26;token=604fa4af-44f8-4c01-9c5f-06e3383a683b" alt=""><figcaption></figcaption></figure>

Applied globally ("For every Sources").

* **Padding**: Internal spacing of each source pill.
  * *Direct Input*: Four values (e.g. `8`, `4`). Linked/unlinked toggle.
* **Radius**: Border roundness of source pills.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `16`).
* **Background**: Background color of source pills.
  * *Color Picker*: Visual picker, Hex input (e.g. `#ffffffff`), RGBA, presets.
  * Click X to remove.
* **Border**: Border color of source pills.
  * *Color Picker*: Visual picker, Hex input (e.g. `#e5e5e5ff`), RGBA, presets.
  * Click X to remove.
* **Shadow**: Drop shadow on source pills.
  * *Color*: Hex, RGBA, or presets. *X/Y/Blur*: Pixel values.
  * Click "Add..." to define, or X to remove.

</details>

<details>

<summary><strong>Text</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fjhhl7nyWxE9MRHgUBvXD%2Fimage.png?alt=media&#x26;token=c6756415-322b-4a3e-9238-8a4482e822c8" alt=""><figcaption></figcaption></figure>

Applied globally ("For every Sources").

* **Font family**: Font used for source text.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font weight**: Source text boldness.
  * *Dropdown*: Choose from available weights (e.g. `400 - Regular`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `10`).
* **Text Color**: Color of the source link text.
  * *Color Picker*: Visual picker, Hex input (e.g. `#4d637bff`), RGBA, presets.

</details>

***

### User Input

The input field at the bottom of the chat where users type their messages.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FIYnCO3ql64LY5VnWKOLf%2Fimage.png?alt=media&#x26;token=55c702e1-b3bc-4ec7-8e19-faf99ac6c32d" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FvSFtEBBHzCBB7KAoAqE1%2Fimage.png?alt=media&#x26;token=66f2ebb7-d97b-45ac-b15d-98baa6cb83a9" alt=""><figcaption></figcaption></figure>

* **Radius**: Border roundness of the input area.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `16`).
* **Margin**: External spacing around the input field. This is specific to User Input and controls the gap between the input and the widget edges.
  * *Direct Input*: Four independent values (top, right, bottom, left), e.g. `10`, `10`, `0`, `10`. Linked/unlinked toggle.
* **Padding**: Internal spacing inside the input field.
  * *Direct Input*: Four values (e.g. `16`, `12`, `12`, `12`). Linked/unlinked toggle.
* **Background**: Background color of the input area.
  * *Color Picker*: Visual picker, Hex input (e.g. `#FFFFFF`), RGBA, presets.
  * Click X to remove.
* **Border**: Border color around the input area.
  * *Color Picker*: Visual picker, Hex input (e.g. `#e5e5e5ff`), RGBA, presets.
  * Click X to remove.
* **Shadow**: Drop shadow on the input area.
  * *Color*: Hex, RGBA, or presets (e.g. `#0000000a`). *X/Y/Blur*: Pixel values.
  * Click X to remove.

</details>

<details>

<summary><strong>Text</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F0GsorkwqnpHwHJYSS6Rl%2Fimage.png?alt=media&#x26;token=f286db74-17bb-4188-8da0-73e3ac926ad8" alt=""><figcaption></figcaption></figure>

Controls the typography of the user's typed text.

* **Color**: Text color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#000000`), RGBA, presets.
* **Font family**: Font used.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font weight**: Text boldness.
  * *Dropdown*: Choose from available weights (e.g. `400 - Regular`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).

</details>

<details>

<summary><strong>Placeholder</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FzPNatJdkmrgrPqN01sjt%2Fimage.png?alt=media&#x26;token=88dcd140-e9cf-4e71-80ac-e760f683bf34" alt=""><figcaption></figcaption></figure>

Controls the ghost text displayed before the user starts typing.

* **Content**: The placeholder text shown in the empty input field.
  * *Text Input*: Enter custom text (e.g. "Ask or search anything...").
* **Color**: Color of the placeholder text.
  * *Color Picker*: Visual picker, Hex input (e.g. `#7c8a99ff`), RGBA, presets.

</details>

#### Send Button

The submit button inside the input field that sends the user's message.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FueqQHSjKwydbaBqAnUWf%2Fimage.png?alt=media&#x26;token=8c1e441c-40d0-49d0-b784-c55edf9801b8" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Layout</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F5MLE1v0S5YskJ4mpeWU9%2Fimage.png?alt=media&#x26;token=f0604bf0-b4fb-479d-811b-562474035ff9" alt=""><figcaption></figcaption></figure>

**Or**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FF4cYjtv9Cs7upcShscNZ%2Fimage.png?alt=media&#x26;token=246b9db9-26c2-4600-a072-7ae091e60ffd" alt=""><figcaption></figcaption></figure>

* **Type**: Toggle between **Icon** and **Text** modes.
  * *Icon*: Compact button showing only an icon. Additional Icon property appears below.
  * *Text*: Wider button showing a text label. Additional text styling properties appear in Style.
* **Icon** *(Icon mode only)*: Choose the glyph displayed on the button.
  * *Dropdown*: Select from available icons (e.g. `Arrow Up Bold`).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F71Dch3vy1bcpgyQg3jOJ%2Fimage.png?alt=media&#x26;token=a2e55438-4f00-40ec-8b7e-4b07356aaa25" alt=""><figcaption></figcaption></figure>

* **Text** *(text mode only)*: Choose the text displayed on the button.

</details>

<details>

<summary><strong>Style</strong> (Icon type)</summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FROPoLvmglym3N5IpNzDp%2Fimage.png?alt=media&#x26;token=6f1f37f6-d89a-4c3a-aaf1-ba36f12e9859" alt=""><figcaption></figcaption></figure>

Visible when Type is set to **Icon**.

* **Radius**: Corner rounding of the button.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `24`).
* **Padding**: Internal spacing inside the button.
  * *Direct Input*: Two values (e.g. `8`, `8`). Linked/unlinked toggle.
* **Icon size**: Size of the icon in pixels.
  * *Direct Input*: Enter a value (e.g. `16`).
* **Icon color**: Color of the icon.
  * *Color Picker*: Visual picker, Hex input (e.g. `#FFFFFF`), RGBA, presets.
* **Background**: Button background color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#1260ebff`), RGBA, presets.
* **Border color**: Border around the button.
  * Click "Add..." to define a color.
* **Shadow**: Drop shadow on the button.
  * *Color*: Hex, RGBA, or presets. *X/Y/Blur*: Pixel values.
  * Click "Add..." to define, or X to remove.

</details>

<details>

<summary><strong>Style</strong> (Text type)</summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FRJi4snI3jfPRFDvGhV3Q%2Fimage.png?alt=media&#x26;token=9cbe17aa-f70f-49b1-bee8-baf319ff23c0" alt=""><figcaption></figcaption></figure>

Visible when Type is set to **Text**.

* **Text color**: Color of the button label.
  * *Color Picker*: Visual picker, Hex input (e.g. `#FFFFFF`), RGBA, presets.
* **Font family**: Font used for the button label.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).
* **Font size**: Size in pixels.
  * *Direct Input*: Enter a value (e.g. `14`).
* **Font weight**: Text boldness.
  * *Dropdown*: Choose from available weights (e.g. `600 - Semi-bold`).
* **Padding**: Internal spacing inside the button.
  * *Direct Input*: Two values (e.g. `8`, `8`). Linked/unlinked toggle.
* **Radius**: Corner rounding of the button.
  * *Slider Input*: Increase or decrease rounding.
  * *Direct Input*: Enter a pixel value (e.g. `24`).
* **Background**: Button background color.
  * *Color Picker*: Visual picker, Hex input (e.g. `#1260ebff`), RGBA, presets.
* **Border color**: Border around the button.
  * Click "Add..." to define a color.
* **Shadow**: Drop shadow on the button.
  * *Color*: Hex, RGBA, or presets. *X/Y/Blur*: Pixel values.
  * Click "Add..." to define, or X to remove.

</details>

***

### AI Disclaimer

A small text line displayed at the very bottom of the chat widget, below the User Input. This disclaimer informs users that the AI can make mistakes and encourages them to verify important information.

This element helps you stay compliant with the **EU AI Act** and other transparency regulations that require AI-generated content to be clearly labeled as such.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FUP8G5SYRHyuLoH4OqSMY%2Fimage.png?alt=media&#x26;token=e772b7e6-3463-4fd0-b07d-8d7d51bbc6b0" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Style</strong></summary>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FrnX0N5nhI7ncgFJAzLaO%2Fimage.png?alt=media&#x26;token=8af0b4a4-c424-40e6-90a8-43f9493bed94" alt=""><figcaption></figcaption></figure>

* **Color**: Text color of the disclaimer.
  * *Color Picker*: Visual picker, Hex input (e.g. `#6B7280`), RGBA, presets.
* **Font family**: Font used for the disclaimer text.
  * *Dropdown*: Choose from available fonts (e.g. `Inter`).

</details>