UI Customization

With a few simple tweaks, you can customize the Tilia Web UI to better reflect your brand and improve your overall customer experience.

Customization options for the UI sit on the root of the Tilia.execute() config object. The table below describes the available customization options.

Field	Description
`theme.backgroundColor`	The background color for the widget, takes in a valid hex value. Default is `#FFFFFF.`
`theme.primaryColor`	The primary color for the widget, takes in a valid hex value. This is used for buttons and links. Default is `#004D99`.
`fullWidth`	Optional parameter to set widget's width to your window size. Default is `false`.
`flowConfig.section.label`	The title of the section containing the widget. Applicable only to the purchase and payout flows. Pass `null` to remove the label completely. Default value is 'Choose your payment method'.
`flowConfig.selectButton.label`	The text to display on the button that selects the payment method. Applicable only to the purchase and payout flows. Default is 'Use this payment method.'
`flowConfig.hideExitButtons`	Hide all buttons that allow users to exit the flow. Applicable only to the transaction history and details flows. Default is false.

Here's an example of how you might customize the purchase widget:

Copy

Copied

window.Tilia.execute({
            rootId: "my-div", // for a div with id="my-div"
            flow: "purchase",
            redirect: widgetRedirectUrl,
            onComplete: handleComplete,
            theme: {
                backgroundColor: "#323232",
                primaryColor: "#47CC00"
              },
            flowConfig: {
                section: {
                    label: "Pick your payment method"
                },
                selectButton: {
                    label: "Pay Now"
                }
			}	
        });

This results in the following: