Widget Appearance

In the Customize tab, you can customise the colours and general font size using the Pallet and Font options on the right. This tab also includes an HTML option to inject background scripts for third party tracking.

To make broader changes to the layout or to adjust specific font sizes, you must use the JSON Model option.

Customise Colour

You can define the following colour properties:

• General Palette: Includes Primary and Secondary colours.
• Background: This includes Paper for surface backgrounds and Default for the overall page background.
• Status colours: These define the appearance of Success, Warning, Error, and Info messages.
• Action: This sets the colour for buttons and other interactive elements.
• Divider: This sets the colour of the lines used to separate different page components.
• Text: This is divided into four categories:
  • Primary: Applied to main titles and labels.
  • Secondary: Applied subheadings and text within cards or sections in your widget.
  • Money: Applied for token balances, currency values, or monetary reward amounts.
  • Disabled: Used for text within locked or inaccessible loyalty features or features.
• Perks: You can assign individual colours to each of the five perk levels from Level 1 to Level 5.
• Avatar: This provides eight different colour variations for user profile icons.

Customise Font

You can select one font type and a base font size to be applied throughout the entire widget. While this sets a global style, the size of individual text elements may vary based on the component type. To customise the size of specific font elements, you must make those changes within the JSON Model section.

HTML

The HTML option allows you to add custom scripts into the widget. This option is intended for background processes rather than adding UI components. Use this feature for third party integrations, for example adding Google Analytics or other tracking tools to monitor widget performance.

Only script tags are supported. All other HTML elements are automatically stripped.

JSON Model

You can use the JSON Model to make changes to the layout, colour, and font. This option provides granular control over the widget structure and is the only area where you can modify individual font sizes or advanced layout properties.