🎨 Customising theme using query parameters

We’ve introduced three new query parameters — backgroundColors,textColors, and borderColors to provide you with granular control over the UI, enabling precise customisation to match your application's theme. These parameters ensure a consistent integration with your branding and design preferences.

Overview

Parameter	Description
`backgroundColors`	Controls the background colours of key UI elements. Pass 3 hex colour codes as a string.
`textColors`	Adjusts the text colours across the application. Pass 3 hex colour codes as a string.
`borderColors`	Customises the border colours for UI elements. Pass 3 hex colour codes as a string.

📘
Note:

These query parameters only work when colorMode is provided, and its value can be either DARK or LIGHT.

Use the themeColorparameter to set the primary button colour with the HEX code (FFFFFF or FFF).

URL encode each color when passing multiple values for backgroundColors, textColors, or borderColors (e.g., borderColors=#C88A4A,#B97B3C,#F3C68D).

Breakdown

1. `backgroundColors`

Pass a string containing 3 hex color codes(e.g., #RRGGBB or #RGB) to define the background colors for various components.

Hex Code	Usage
1st	- Global Widget Background
2nd	- Hover on Menu Items - Payment Methods Background - Fiat / Crypto Dropdown Background - Quote Input (Blend of 1st & 2nd)
3rd	- Selected Crypto's Network Indicator - Card Background for Instant Off Ramp

2. `textColors`

Pass 3 hex color codes (e.g., #RRGGBB or #RGB) to define text colors for different sections.

Hex Code	Usage
1st	- Input on Exchange Screen - Payment Method Selector Radio Background - Heading Colours - Selected Crypto's Network Indicator
2nd	- Inactive Tabs - Dropdown Acronyms - Secondary Text Colors
3rd	- Profile Page Section Headers - Dropdown Currency Names - Background for Leftover User Monthly Limits

3. `borderColors`

Pass 3 hex color codes (e.g., #RRGGBB or #RGB) to define border colors.

Hex Code	Usage
1st	Primary border for selections
2nd	Radio button outer border
3rd	Menu Screen Item Borders

Sample Usage

Below are examples of the Transak Widget customized with various themes:

Beige themed:

Create Widget URL using below query parameters under widgetParams to get a widgetUrl

curl --request POST \
     --url https://api-gateway-stg.transak.com/api/v2/auth/session \
     --header 'accept: application/json' \
     --header 'access-token: YOUR_ACCESS_TOKEN' \
     --header 'authorization: YOUR_USER_AUTH_TOKEN' \
     --header 'content-type: application/json' \
     --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "themeColor" : "#1461DA",
		"colorMode" : "LIGHT",
		"backgroundColors" : "#FFF9E6,#FFF3D9,#FFE7BF",
		"textColors" : "#7D5500,#A36F00,#D38A00",
		"borderColors" : #FFCF7D,#FFC25D,#FFB73C",
 
  },
  "landingPage": "HomePage"
}
'

Blue themed:

Create Widget URL using below query parameters under widgetParams to get a `widgetUrl'


curl --request POST \
     --url https://api-gateway-stg.transak.com/api/v2/auth/session \
     --header 'accept: application/json' \
     --header 'access-token: YOUR_ACCESS_TOKEN' \
     --header 'authorization: YOUR_USER_AUTH_TOKEN' \
     --header 'content-type: application/json' \
     --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "themeColor" : "#0066FF",
		"colorMode" : "LIGHT",
		"backgroundColors" : "#F0F8FF,#D6EAF8,#B9DCF5",
		"textColors" : "#0D47A1,#1976D2,#64B5F6",
		"borderColors" : #B9DCF5,#90CAF9,#64B5F6",
 
  },
  "landingPage": "HomePage"
}
'

Dark Themed

Create Widget URLusing below query parameters under widgetParams to get a widgetUrl

curl --request POST \
     --url https://api-gateway-stg.transak.com/api/v2/auth/session \
     --header 'accept: application/json' \
     --header 'access-token: YOUR_ACCESS_TOKEN' \
     --header 'authorization: YOUR_USER_AUTH_TOKEN' \
     --header 'content-type: application/json' \
     --data '
{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com",
    "themeColor" : "#0052FF",
		"colorMode" : "DARK",
		"backgroundColors" : "#141414,#212121,$333333",
		"textColors" : "#FFFFFF,#B0BEC5,#E0E0E0",
		"borderColors" : #4D4D4D,#5C5C5C,#666666",
 
  },
  "landingPage": "HomePage"
}

Overview

Note:

Breakdown

1. backgroundColors

2. textColors

3. borderColors

Sample Usage

1. `backgroundColors`

2. `textColors`

3. `borderColors`