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
| Parameter | Description |
|---|---|
| theme.primaryColor | Color value in Hex |
| theme.secondaryColor | Color value in Hex |
| backgroundColor | Color 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
| Parameter | Description |
|---|---|
| theme.fontFamily | The 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
| Parameter | Description |
|---|---|
| language | language 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.
| Parameter | Description |
|---|---|
| currencyCode | Set the currency code (optional) Default: Established when creating the order |
| pricesSeparetedByComma | Allows you to decide if the thousand separator is comma or by default it is kept in point default: "false" options: "true" or "false" |
| hideElements.decimals | Allows you to show or hide the decimals in order default: "false" options: "true" or "false" |
| decimalsLength | Allows to define the number of decimals to show default: "2" |
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
| Parameter | Description |
|---|---|
| activeTabs | allows 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. |
| isFullScreen | It allows you to decide if the screen will be full screen default: "false". options: "true" or "false |