Web UI Customization

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

Setup

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 Fourthline delivery manager along with your logo in SVG format.

Tip

To update this file, contact your Fourthline delivery manager.

Flows

• 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.

Localization

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

Example

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;
}