# Field Definitions

## Overview

This article identifies and explains ALL fields available in the Page Themes settings. Many of these fields do NOT have to be updated from the default theme value.

{% hint style="warning" %}
**NOTE:** Our themes accept many values (for example, if you are resizing the Chat Width, you could input a pixel value, percentage, an em value, etc.). Our best practice is to keep values consistent with how the default value is structured. That is, if a field in the default theme gives a pixel value (px), please keep your edits in pixels unless it is necessary to change.
{% endhint %}

{% hint style="warning" %}
If you do not have access to the **Page Themes section** of the dashboard, administrators can submit a ticket to request access is enabled.  
{% endhint %}

## Chat Fields <a href="#bot-fields" id="bot-fields"></a>

{% hint style="info" %}
Fields that control the POSITION of the chat can use “auto” in the value; in general, ONE horizontal position (left or right) should be AUTO and ONE vertical position (top or bottom) should be AUTO.
{% endhint %}

<div data-full-width="true"><figure><img src="/files/SQDF9QlVLi8kITyQSevT" alt=""><figcaption></figcaption></figure></div>

<div data-full-width="true"><figure><img src="/files/sf9N47MwcucKl3Ts6xC6" alt=""><figcaption></figcaption></figure></div>

<div data-full-width="true"><figure><img src="/files/FlAmp127zwh4dxXtUR2p" alt=""><figcaption></figcaption></figure></div>

## Popup Button Fields <a href="#chat-popup-button" id="chat-popup-button"></a>

<figure><img src="https://docs.satisfilabs.com/~gitbook/image?url=https%3A%2F%2F2132801011-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FviVHrZubWM5sgkSBDohN%252Fuploads%252Fad5zLBkxUqxx9g1BCBeg%252FScreenshot%25202023-03-23%2520094329.png%3Falt%3Dmedia%26token%3Da694934e-cf75-4188-bd19-b8db6d39420a&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=ed3dcded0e4b243c5d2859f499d89194405ed89c8405b463f6157c6ea6897f00" alt=""><figcaption><p>Example of a Popup Button</p></figcaption></figure>

### Desktop <a href="#desktop" id="desktop"></a>

<table data-full-width="true"><thead><tr><th width="279">Field</th><th>Definition</th></tr></thead><tbody><tr><td><strong>chatButtonPositionLeft</strong> </td><td>Controls the position of the popup button with respect to the # of pixels from the LEFT edge of the webpage</td></tr><tr><td><strong>chatButtonPositionTop</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the TOP edge of the webpage</td></tr><tr><td><strong>chatButtonPositionRight</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the RIGHT edge of the webpage</td></tr><tr><td><strong>chatButtonPositionBottom</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the BOTTOM edge of the webpage</td></tr><tr><td><strong>chatButtonFontSize</strong></td><td>Controls the font size of the chat popup button label</td></tr><tr><td><strong>chatButtonBackground</strong></td><td>Controls the chat popup button background color</td></tr><tr><td><strong>chatButtonFontColor</strong></td><td>Controls the font color of the chat popup button label</td></tr><tr><td><strong>chatButtonFontWeight</strong></td><td>Controls the font weight (e.g., normal, bold) of the chat popup button label</td></tr><tr><td><strong>chatButtonAnimation</strong></td><td>No value (set to none)</td></tr><tr><td><strong>chatButtonBoxShadow</strong></td><td>Controls the shadow around the popup button (can specify color of shadow, blur value, h-offset, and v-offset); h-offset is horizontal offset (negative value moves shadow to the left, positive values move shadow to the right); v-offset is vertical offset (negative value moves shadow above the box, positive value moves shadow below the box)</td></tr><tr><td><strong>chatButtonBoxShadowHover</strong></td><td>Controls the shadow around the popup button when the user has hovered over the button (can specify HEX color of shadow, blur value, h-offset, and v-offset)</td></tr><tr><td><strong>chatButtonBorderRadius</strong></td><td>Controls the border radius of the chat popup button (the larger the border radius, the more rounded the corners of the window are)</td></tr><tr><td><strong>chatButtonPadding</strong></td><td>Controls how large the button is around the text label (values correspond to top, right, bottom, left edges of the button)</td></tr><tr><td><strong>chatButtonBorder</strong></td><td>Controls the border around the chat button (pattern, pixel width, and color)</td></tr><tr><td><strong>chatButtonImageWidth</strong></td><td>Controls pixel width of the image included in the chat button (images are optional)</td></tr><tr><td><strong>chatButtonImageHeight</strong></td><td>Controls pixel height of the image included in the chat button (images are optional)</td></tr><tr><td><strong>chatButtonImageMargin</strong></td><td>Controls the distance between the image and text label and the button borders (values are top, right, bottom, left)</td></tr><tr><td><strong>chatButtonCustomFont</strong> </td><td>Controls custom font on the button label text only (typically set to no-custom)</td></tr></tbody></table>

### Mobile <a href="#desktop" id="desktop"></a>

<table data-full-width="true"><thead><tr><th width="317">Field</th><th>Definition</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>chatButtonBackgroundMobile</strong> </td><td>Controls the chat popup button background color on mobile</td><td></td></tr><tr><td><strong>chatButtonPositionLeftMobile</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the LEFT edge of the webpage on mobile</td><td></td></tr><tr><td><strong>chatButtonPositionTopMobile</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the TOP edge of the webpage on mobile</td><td></td></tr><tr><td><strong>chatButtonPositionRightMobile</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the RIGHT edge of the webpage on mobile</td><td></td></tr><tr><td><strong>chatButtonPositionBottomMobile</strong></td><td>Controls the position of the popup button with respect to the # of pixels from the BOTTOM edge of the webpage on mobile</td><td></td></tr><tr><td><strong>chatButtonFontSizeMobile</strong></td><td>Controls the font size of the chat popup button label on mobile</td><td></td></tr><tr><td><strong>chatButtonFontColorMobile</strong></td><td>Controls the font color of the chat popup button label on mobile</td><td></td></tr><tr><td><strong>chatButtonBackgroundColorMobile</strong></td><td>Controls the chat popup button background color on mobile</td><td></td></tr><tr><td><strong>chatButtonFontWeightMobile</strong></td><td>Controls the font weight (e.g., normal, bold) on mobile</td><td></td></tr><tr><td><strong>chatButtonBorderRadiusMobile</strong></td><td>Controls the border radius of the chat button on mobile (the larger the border radius, the more rounded the corners of the window are)</td><td></td></tr><tr><td><strong>chatButtonPaddingMobile</strong></td><td>Controls how large the button is around the text label (values correspond to top, right, bottom, left edges of the button) on mobile</td><td></td></tr><tr><td><strong>chatButtonImageWidthMobile</strong></td><td>Controls pixel width of the image included in the chat button on mobile (images are optional)</td><td></td></tr><tr><td><strong>chatButtonImageHeightMobile</strong></td><td>Controls pixel height of the image included in the chat button on mobile (images are optional)</td><td></td></tr><tr><td><strong>chatButtonImageMarginMobile</strong> </td><td>Controls the distance between the image and text label and the button borders on mobile (values are top, right, bottom, left)</td><td></td></tr></tbody></table>

## Chat Popup Prompt <a href="#chat-popup-prompt" id="chat-popup-prompt"></a>

<figure><img src="https://docs.satisfilabs.com/~gitbook/image?url=https%3A%2F%2F2132801011-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FviVHrZubWM5sgkSBDohN%252Fuploads%252FCmgrXtVhd3EHpD3cDxm0%252FScreenshot%25202023-03-23%2520094656.png%3Falt%3Dmedia%26token%3Ded8944ba-2395-49b9-8058-c0d3599db04c&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=94d5d91b53d15e889a113cbadee4030cea94debaf26f91b09a7936a98a34cb56" alt=""><figcaption><p>Example of the Prompt Bubble</p></figcaption></figure>

### Desktop <a href="#desktop-1" id="desktop-1"></a>

<table data-full-width="true"><thead><tr><th width="288">Field</th><th>Definition</th></tr></thead><tbody><tr><td><strong>promptPositionLeft</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the LEFT edge of the webpage</td></tr><tr><td><strong>promptPositionTop</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the TOP edge of the webpage</td></tr><tr><td><strong>promptPositionRight</strong> </td><td>Controls the position of the popup prompt with respect to the # of pixels from the RIGHT edge of the webpage</td></tr><tr><td><strong>promptPositionBottom</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the BOTTOM edge of the webpage</td></tr><tr><td><strong>promptFontSize</strong></td><td>Controls the font size of the chat popup prompt text</td></tr><tr><td><strong>promptWidth</strong></td><td>Controls the width of the chat popup prompt</td></tr><tr><td><strong>promptheight</strong> </td><td>Controls the height of the chat popup prompt</td></tr></tbody></table>

### Mobile <a href="#mobile-1" id="mobile-1"></a>

<table data-full-width="true"><thead><tr><th width="295">Field</th><th>Definition</th></tr></thead><tbody><tr><td><strong>promptPositionLeftMobile</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the LEFT edge of the webpage on mobile</td></tr><tr><td><strong>promptPositionTopMobile</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the TOP edge of the webpage on mobile</td></tr><tr><td><strong>promptPositionRightMobile</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the RIGHT edge of the webpage on mobile</td></tr><tr><td><strong>promptPositionBottomMobile</strong></td><td>Controls the position of the popup prompt with respect to the # of pixels from the BOTTOM edge of the webpage on mobile</td></tr><tr><td><strong>promptFontSizeMobile</strong></td><td>Controls the font size of the chat popup prompt text on mobile</td></tr><tr><td><strong>promptWidthMobile</strong></td><td>Controls the width of the chat popup prompt on mobile</td></tr><tr><td><strong>promptheightMobile</strong></td><td>Controls the height of the chat popup prompt on mobile</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/field-definitions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.