🎨 Customising theme using query parameters

Use Transak’s theme-related query parameters (via widgetParams) to customize button colors, color mode, and the full widget theme. These examples assume you are calling the auth/session API with widgetParams as shown in the snippets.

Primary Button Colors

Controls the primary button background and text color.

Parameter	Description
primaryButtonFillColor	Hex color for the button background
primaryButtonTextColor	Hex color for the button text

Sample Result: Primary CTA button restyled to match brand mustard and dark grey text using primaryButtonFillColor and primaryButtonTextColor query parameters.

Create Widget URL Sample Request:-

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",
    "primaryButtonFillColor": "#F59E0B",  // resto mustard
    "primaryButtonTextColor": "#0B0B0B"		//dark grey
  }
}
'

Color Mode (Light / Dark)

Switch the entire widget between light and dark themes.

Parameter	Allowed values	Description
colorMode	LIGHT or DARK	Sets light or dark theme

Sample Result:-

Create Widget URL Sample Request:-

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",
    "colorMode": "DARK"
  }
}
'

Complete Theme Customization

Brand & Text Colors

Use these parameters together to fully align the widget with your brand: links, text, surfaces, borders, and status colors

Parameter	Description
brandColor	Primary brand color (accents, links)
textPrimaryColor	Primary text color
textSecondaryColor	Secondary / muted text color
labelTextColor	Form label text color

Create Widget URLSample Request:-

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",
    "brandColor": "#06B6D4",             // teal accent
    "textPrimaryColor": "#F3F4F6",
    "textSecondaryColor": "#FCA5A5",     // soft rose
    "labelTextColor": "#C7B3FF",         // lavender
		"colorMode": "DARK"
                    
  }
}
'

Surface & Background Colors

Parameter	Description
surfaceFillColor	Card / surface background
widgetBackgroundFillColor	Widget container background
borderColor	Border color for inputs/cards

Status Colors

Parameter	Description	Example value
greenColor	Success / positive	#10B981
redColor	Error / negative	#EF4444

Putting It All Together**

Below is an example combining color mode, primary button styling, and full theme customization into a single widget URL.

Create Widget URLSample Request:-

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",
    "brandColor": "#06B6D4",             // teal accent
    "textPrimaryColor": "#F3F4F6",
    "textSecondaryColor": "#FCA5A5",     // soft rose
    "labelTextColor": "#C7B3FF",         // lavender
    "surfaceFillColor": "#111827",
    "widgetBackgroundFillColor": "#0B1220",
    "borderColor": "#7C3AED",            // purple border
    "greenColor": "#34D399",             // success
    "redColor": "#EF4444"                // error
  }
}
'

Primary Button Colors

Color Mode (Light / Dark)

Complete Theme Customization

Putting It All Together**