HomeDocumentationKnowledge HubSupportRelease NotesSearch Box
Documentation
Start typing to search…

Modifying Hosted Workflow Theme via Query Parameter

The launch application supports dynamic theme customization through a URL query parameter called theme. This allows you to override the default theme properties by passing a JSON object in the URL.

Overview

The theme query parameter enables real-time theme customization without requiring code changes or redeployment. You can modify colors, fonts, layout properties, and other visual elements by simply adding a theme parameter to your workflow launch URL.

Basic Usage

https://launch-workflow.com/{workflow-id}?theme=[URL-ENCODED-JSON]

The theme parameter accepts a URL-encoded JSON object containing the theme properties you want to override.

📘

⚠️ Important: JSON Encoding Required ⚠️

The JSON object MUST be properly URL-encoded before adding it to the query parameter.


Raw JSON contains special characters ({, }, ", :, etc.) that will break the URL or cause the browser to interpret the parameters incorrectly.

Always use encodeURIComponent(JSON.stringify(themeObject)) in JavaScript or an online URL encoder tool to properly encode your theme JSON before adding it to the URL.

Supported Theme Properties

Colors

All color properties accept hex colors (#ffffff, #fff) or CSS color functions (rgb(), rgba()):

  • backgroundColor - Main background color
  • cardColor - Card/container background color
  • stepIconColor - Color of step icons
  • inputFieldColor - Input field background color
  • inputFieldBorderColor - Input field border color (focused state)
  • inputFieldUnselectedBorderColor - Input field border color (default state)
  • continueButtonValidColor - Continue button color when form is valid
  • continueButtonInvalidColor - Continue button color when form is invalid
  • backButtonColor - Back button color
  • titleFontColor - Main title text color
  • subTitleFontColor - Subtitle text color
  • fieldFontColor - Form field text color
  • fieldPlaceholderFontColor - Placeholder text color
  • continueFontColor - Continue button text color
  • backFontColor - Back button text color

Layout & Sizing

  • backgroundCardWidthType - Width unit type: "px" or "%"
  • backgroundCardWidth - Width value (number)
  • backgroundCardRadius - Border radius (number)
  • buttonRadius - Button border radius (number)
  • headerAlignment - Header text alignment: "left", "center", or "right"

Typography

  • font - Font family name (string)
  • customFontUrl - URL to custom font CSS file

Boolean Flags

  • backgroundCardEnclose - Whether to show card container (boolean)
  • backgroundCardShadow - Whether to show card shadow (boolean)
  • backButtonBox - Whether to show back button with box style (boolean)
  • continueButtonBox - Whether to show continue button with box style (boolean)
  • hideStepIcon - Whether to hide step icons (boolean)
  • hideStepHeader - Whether to hide step headers (boolean)

Branding

  • logo - Logo image URL
  • logoPosition - Logo placement: "top-left", "top", or "top-right"
  • watermark - Watermark text (HTML string)
  • watermarkPosition - Watermark placement: "top-left", "top-right", "left", "right", "bottom-left", "bottom", or "bottom-right"

Validation & Error Handling

The theme parameter is validated before being applied:

Valid Values

  • Colors must be valid hex codes or rgba/rgba functions
  • Boolean values must be true or false
  • Enum values must match exactly (case-sensitive)
  • URLs must be properly formatted
  • Numbers must be valid numeric values

Error Handling

  • Invalid or malformed theme data shows an error toast and falls back to the theme from API
  • The application continues to work normally even when theme errors occur