Product Documentation
Start typing to search…

🎨 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

ParameterDescription
backgroundColorsControls the background colours of key UI elements. Pass 3 hex colour codes as a string.
textColorsAdjusts the text colours across the application. Pass 3 hex colour codes as a string.
borderColorsCustomises 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 CodeUsage
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 CodeUsage
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 CodeUsage
1stPrimary border for selections
2ndRadio button outer border
3rdMenu Screen Item Borders

Sample Usage

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

  • Beige themed:

Create session using below query parameters under widgetParams and pass into the sessionId query parameter along with apikey on widget integration:

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

Create session using below query parameters under widgetParams and pass into the sessionId query parameter along with apikey on widget integration:


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

Create session using below query parameters under widgetParams and pass into the sessionId query parameter along with apikey on widget integration:

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

Updated about 13 hours ago