Web SDK UI Customization

Integrations guide

This page sets out how to customize the Web SDK UI to match the look and feel of your brand.


The SDK is built with web components and styles them using a styles file containing CSS custom properties and @font-face definitions. The SDK automatically loads the file each time it is triggered.

Follow these steps:

  1. Create the styles file following the guidance below, or ask Fourthline to create it for you.

  2. Share the file with your implementation manager along with your logo in SVG format.

To update the file at any point, contact your implementation manager.


  • fl-flow-onboarding: The redirect flow styles are hosted by you.
  • fl-flow-verify: The product flow styles are hosted by Fourthline.

Usually, both flows share the same styles.


For how to set the language and level of formality, see Web SDK Setup – Embedding manual > Localize the UI.


The following is an example of a complete styles file, using a third-party font service:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;500&display=swap');

fl-flow-verify, fl-flow-onboarding {
  --fl-font-family: 'Roboto', system-ui, sans-serif;
  --fl-font-family-header: 'Roboto Slab', serif;
  --fl-font-family-monospace: 'Roboto Mono', monospace;

  --fl-color-light: snow; 
  --fl-color-info: dodgerblue; 
  --fl-color-primary: mediumvioletred; 
  --fl-color-accent: var(--fl-color-info);

  --fl-input-border-radius: 8px; 
  --fl-button-border-radius: 28px; 

  --fl-button-disabled-color: var(--fl-color-primary);
  --fl-button-disabled-background-color: var(--fl-background-color);
  --fl-button-disabled-border-color: var(--fl-color-primary);
  --fl-button-disabled-opacity: 1;

  --fl-input-selected-background-color: lavenderblush;

You have created a Web SDK styles file!

Top of page