# 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FkNNnHyZKUiqeHxSndmB9%2Fimage.png?alt=media&#x26;token=df84e0ed-038f-4f4d-8e3c-e400c0cf0cb7" alt=""><figcaption></figcaption></figure></div>

<div data-full-width="true"><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FQThfsrxGaOTuKlwMziDZ%2Fimage.png?alt=media&#x26;token=b06f88ea-d961-4872-8a3a-a3244d9d0a9b" alt=""><figcaption></figcaption></figure></div>

<div data-full-width="true"><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FhhTb18hEBBmrfI6DZj5o%2Fimage.png?alt=media&#x26;token=b4a39a0a-0e35-439e-a0b0-6dd06ccb8692" 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>