The Dots Flow solution supports extensive visual customization, allowing you to align the Flow’s appearance with your site’s design and brand. You can modify colors, buttons, borders, padding, and more to ensure a seamless user experience.

​
Available configurations

You can customize the Flows’ appearance by changing the theme and CSS variables. The theme parameter controls the overall appearance of elements that cannot be individually configured, such as the Dots logo or the date picker icon. The available themes are:

  • light (default)
  • dark

The variables object contains several parameters that work similarly to CSS variables, enabling you to customize specific Flow components. The complete list of customizable variables is presented in the following table:

VariableDescription
backgroundColorBackground color of the flow.
primaryTextColorColor of texts used in titles and labels.
secondaryTextColorColor of secondary texts used in sub-labels and buttons.
tertiaryTextColorColor of tertiary texts, such as the default payout method indicator or the Visit dashboard link.
primaryColorPrimary color of the flow theme, such as button hovers or highlights.
tabBackgroundColorBackground color of the rail tab.
tabHoverBackgroundColorBackground color of the rail tab when the cursor hovers over it.
tabBorderColorBorder color of the rail tab.
tabHoverBorderColorBorder color of the rail tab when the cursor hovers over it.
buttonBackgroundColorBackground color of action buttons located at the bottom of each flow page.
buttonTextColorText color of action buttons located at the bottom of each flow page.
buttonHoverTextColorText color of action buttons when the cursor hovers over them.
buttonHoverBackgroundColorBackground color of action buttons when the cursor hovers over them.
buttonDisabledBackgroundColorBackground color of action buttons when they are disabled.
buttonDisabledTextColorText color of action buttons when they are disabled.
inputBackgroundColorBackground color of inputs such as checkboxes or text fields.
inputBorderColorBorder color of inputs.
inputPlaceholderColorPlaceholder color of inputs.
borderRadiusBorder radius of buttons, tabs, icons, and inputs.

The following code block presents the JSON structure you should use to set the Flow style.

{
  "theme": "light",
  "variables": {
    "backgroundColor": "",
    "primaryTextColor": "",
    "secondaryTextColor": "",
    "primaryColor": "",
    "tabBackgroundColor": "",
    "tabHoverBackgroundColor": "",
    "tabBorderColor": "",
    "tabHoverBorderColor": "",
    "buttonBackgroundColor": "",
    "buttonTextColor": "",
    "buttonHoverTextColor": "",
    "buttonHoverBackgroundColor": "",
    "inputBackgroundColor": "",
    "inputBorderColor": "",
    "tertiaryTextColor": "",
    "buttonDisabledBackgroundColor": "",
    "buttonDisabledTextColor": "",
    "inputPlaceholderColor": "",
    "borderRadius": ""
  }
}

​
Customizing a Flow

To apply the custom styling to your Flow, follow the steps:

  1. First, you need to stringify the configurations, including theme and variables, converting the configurations to a JSON string.
  2. URL encode the JSON string.
  3. Append the encoded string as a ?styles={url_encoded_config} query parameter to the Flow link when attaching it to an iframe.

The following code block presents an example of how to customize the flow styles with specific configurations:

// Define the style configuration
const configurations = {
  theme: "dark",
  variables: {
    backgroundColor: "#000000",
    primaryTextColor: "#ffffff",
    secondaryTextColor: "#9ca3af",
    primaryColor: "#c88bc4",
    tabBackgroundColor: "#111827",
    tabHoverBackgroundColor: "#374151",
    tabBorderColor: "#e5e7eb",
    tabHoverBorderColor: "#7dd3fc",
    buttonBackgroundColor: "#c88bc4",
    buttonTextColor: "#ffffff",
    buttonHoverTextColor: "#ffffff",
    buttonHoverBackgroundColor: "#a672a2",
    inputBackgroundColor: "#111827",
    inputBorderColor: "#c88bc4",
    buttonDisabledBackgroundColor: "#1f2937",
    buttonDisabledTextColor: "#d1d5db",
    inputPlaceholderColor: "#4b5563",
    borderRadius: "8px"
  }
};

// Stringify and URL encode the style configuration
const url_encoded_config = encodeURIComponent(JSON.stringify(configurations));

// Add the encoded configuration as a query parameter
const flowURI =
  "https://my.senddotssandbox.com/flow/5f0f8f8f-f8f8-f8f8-f8f8-f8f8f8f8f8f8?styles=" +
  url_encoded_config;

The following image presents the customization result: