Display modes

You can change the default colors used in the application by setting de primary and secondary colors.

You can customize the color for the main background by setting the "backgroundColor" attribute of the configuration object.

The colors configuration are being set in the "theme" attribute of the configuration object.

Specific configuration parameters

theme.primaryColorColor value in Hex
theme.secondaryColorColor value in Hex
backgroundColorColor value in Hex. Default color #F0F2F5

You can change the font family used in the application by setting the fontFamily parameter


Font Availability

Beware to have the font family already available on the main site where you are injecting the widget

Specific configuration parameters

theme.fontFamilyThe name of the font already installed in the main site

The parameter "language" allows configuring the displaying locales on the application

Supported Locales


Supported Languages

We Follow the ISO 639-1 standard language codes

es: Spanish (Spain)
en: English
pt: Portuguese (Portugal)
pt-br: Portuguese (Brazil)

Specific configuration parameters

languagelanguage code of the supported language.
Default: Browser || "en"

You can change the display of the currency type, show or hide the decimals in order and decide if the thousand separator is comma or by default.

currencyCodeSet the currency code (optional)
Default: Established when creating the order
pricesSeparetedByCommaAllows you to decide if the thousand separator is comma or by default it is kept in point

default: "false"
options: "true" or "false"
hideElements.decimalsAllows you to show or hide the decimals in order

default: "false"
options: "true" or "false"

With the Active Tabs parameter, you can control what you want to display in the content of the application

You may decide to display only a set of the information available from the order, or even to display the chat when using the application.

We currently support 3 modes in which you can display information

With the Full screen parameter allows you to adjust the margins


Display Modes

  • Chat Tab
  • State Tab
  • Detail Tab
  • Full screen

Specific configuration parameters

activeTabsallows you to control what content to present in the application

chatTab: with this value, we will display only the chat view in the application.

detailTab: this will display information details related to the order, like items list and billing summary, but not information regarding the current status/steps the order is at the moment

stateTab: this will display information about the status/steps the order is undertaking.
isFullScreenIt allows you to decide if the screen will be full screen
default: "false".
options: "true" or "false