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`	Optional. There are various ways to customize flows through the `flowConfig` parameter, which you can view in the individual flow documentation.

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"
    }	
});

This results in the following: