Setup

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

In order to display the UI correctly, you can follow these steps:

1. Create the styles file following the guidance below

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.

Fonts

Font families

This tells the browser which font families to use, e.g. Arial, Roboto. Fonts must be already available to the page, either because they are mobile or imported by the rest of the page. The SDK doesn't import fonts. Fonts can be licensed under a specific domain. You are responsible for acquiring or managing licenses for all fonts you use.

🚧

Fonts must be publicly accessible (e.g., via Google Fonts ) or provided as a direct link to the font files. The link must allow CORS access on the domains where the Web SDK runs.

Custom properties:

Property	Description
--fl-font-family	The body text font family. Default: Roboto, system-ui, sans-serif
--fl-font-family-header	The font to use for headings and titles. Default: Roboto Slab, serif
--fl-font-family-monospace	A monospace font to use in client input fields. Tip: Set this to ensure inputs don't change width as the client types in them due to characters having different widths. Default: Roboto Mono, monospace

Example code:

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

Example screens:

Font face rules

To tell the browser how to render fonts in different situations, you need to define the @font-face rules, e.g. style, weight, and the location of the font resource.

The URLs in the @font-face rules must be accessible by all relevant environments, e.g. sandbox, development, and production. You are responsible for handling any CORS exceptions to the files for these domains.

Fourthline's development domain is http://localhost:3333. To let us check how fonts render during implementation, add our domain to your exception list.

You can either define @font-face rules via:

• A third-party font service, e.g. Google Fonts
• Inlining

Third-party service

Before setting the font families, add an import statement with a URL to a font asset containing font-face definitions managed by a third-party service. The service maintains the font.

Example code:

@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-monospace: 'Roboto Mono', monospace;
  --fl-font-family-header: 'Roboto Slab', serif;
}

Inlining

After setting the font families, copy and paste the content of a third-party font asset into your SDK styles file. This reduces the number of requests in the critical path, but means the font is no longer maintained by the third party. You must host it, maintain it, and share the location URL with your implementation manager so it can be used from our domain.

Custom properties:

Example code:

• Defines the My serif font, My sans-serif font, and My monospace font families
• Sets a regular weight (400) and a semibold weight (600) for each family
• Provides 2 different formats for each family to maximize browser compatibility and their locations

fl-flow-verify, fl-flow-onboarding {
--fl-font-family: 'Roboto', system-ui, sans-serif;
--fl-font-family-monospace: 'Roboto Mono', monospace;
--fl-font-family-header: 'Roboto Slab', serif;
}
@font-face {
  font-family: "My serif font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My serif font'),
    url(".../my-serif-font-regular.woff2") format("woff2"),
    url(".../my-serif-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My serif font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My serif font'),
    url(".../my-serif-font-semibold.woff2") format("woff2"),
    url(".../my-serif-font-semibold.woff") format("woff");
}
@font-face {
  font-family: "My sans-serif font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My sans-serif font'),
    url(".../my-sans-serif-font-regular.woff2") format("woff2"),
    url(".../my-sans-serif-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My sans-serif font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My sans-serif font'),
    url(".../my-sans-serif-font-semibold.woff2") format("woff2"),
    url(".../my-sans-serif-font-semibold.woff") format("woff");
}
@font-face {
  font-family: "My monospace font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My monospace font'),
    url(".../my-monospace-font-regular.woff2") format("woff2"),
    url(".../my-monospace-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My monospace font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My monospace font'),
    url(".../my-monospace-font-semibold.woff2") format("woff2"),
    url(".../my-monospace-font-semibold.woff") format("woff");
}

Example screens:

Colors

You can define colors in any acceptable CSS way. For defined base colors, you can leave them or replace them with another shade of the same color.

Custom properties:

Property	Description
--fl-background-color	The default background color. Default: --fl-color-light
--fl-border-color	The border color for buttons, hints, and QR components. Default: rgba(0, 0, 0, 0.1)
--fl-color-primary	The color alias used for illustrations and highlighted elements, e.g. buttons, inputs. Notes: • Illustrations and animations use the same primary color as the dominant color. • Set to a base color or use a new color. Default: var(--fl-color-info)
--fl-color-accent	The color alias used for choice elements, e.g. tabs, radio buttons. Note: Set to a base color or use a new color. Default: var(--fl-color-success)
--fl-color-danger	The color for warnings about invalid client input. Default: # E02020 red
--fl-color-dark	The default heading color. Default: # 333333
--fl-color-dark-light	The default text color. Default: # 666666
--fl-color-dark-lighter	The default alternative and less emphasis text color. Default: # 999999
--fl-color-hint	The color for hints. Default: # FFF9D5 yellow
--fl-color-info	The primary color for informative highlighting. Default: # 0091FF blue
--fl-color-light	The default background color. Default: # FFFFFF
--fl-color-success	The color for successful events or actions. Default: # 00E062 green
--fl-color-warning	The color for errors. Default: # FA6400 orange
--fl-decorative-line-color	The color of decorative lines. Default: --fl-border-color
--fl-heading-color	The color for headings. Default: --fl-color-dark
--fl-hint-color	The text color for hints. Default: --fl-heading-color
--fl-hint-background-color	The background color for hints. Default: --fl-color-hint
--fl-illustration-color	The illustration color. Default: --fl-color-primary
--fl-illustration-background-color	The illustration background color. Default: rgba(0, 0, 0, 0.05);
--fl-illustration-success-color	The illustration success color override. Default: --fl-color-success
--fl-label-color	The color for form field labels. Default: --fl-color-gray
--fl-link-color	The color for links. Default: --fl-color-info
--fl-permission-background-color	The color of the background screen for permissions requests. Note: The background of illustrations is always a darker shade of the page background. Default: --fl-color-primary
--fl-permission-color	The text color for permissions requests. Default: --fl-color-light
--fl-qr-border	The color of the QR code border. Default: --fl-color-info
--fl-strong-color	The strong tag color. Default: --fl-heading-color
--fl-tab-color	The color for the redirect options tabs. Default: --fl-heading-color
--fl-text-color	The color for text. Default: --fl-color-dark-light
--fl-text-light-color	The color for text with less emphasis. Default: --fl-color-dark-lighter
--fl-title-color	The color for titles. Default: --fl-heading-color
--fl-warning-face-color	The skin color of the warning face on error screens. Default: --fl-color-warning
--fl-warning-face-eyes-color	The color of the eyes and mouth of the warning face on error screens. Default: --fl-color-light

Example code:

{...}  
  --fl-color-primary: var(--my-primary-color);
  --fl-color-info: #0091FF;     /* blue */
  --fl-color-success: #00E062;  /* green */
  --fl-color-hint: #FFF9D5;     /* yellow */
  --fl-color-warning: #FA6400;  /* orange */
  --fl-color-danger: #E02020;   /* red */
  --fl-color-primary: var(--fl-color-info);
  --fl-color-accent: var(--fl-color-success);
  --fl-permission-background-color: green;

Example screens:

Themes

You can set light mode and dark mode themes for the UI, and are responsible for adding the theme class and hosting the styles.

Example code:

.dark-theme fl-flow-onboarding {
  /* Add your custom CSS variables for dark theme */
}

.light-theme fl-flow-onboarding {
  /* Add your custom CSS variables for light theme */
}

Layout

Border radiuses

The border radius sets how round or square corners of elements are.. You must set acceptable border radius values.

Custom properties:

Example code:

  --fl-main-border-radius: 4px;
  --fl-button-border-radius: 4px;
  --fl-illustration-border-radius: 4px;
  --fl-hint-border-radius: 4px;
  --fl-qr-border-radius: 4px;
  --fl-input-border-radius: 6px;

Example screens:

Buttons

• Primary buttons use the --fl-color-primary as the background color with white text.
• Secondary buttons use white as the background color and --fl-color-primary for text.
• The disabled state sets how buttons and inputs appear when inactive or un-clickable.
  

Custom properties:

Example code:

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

Example screens:

Illustrations

The introduction screen for each flow contains an illustration.

Custom properties:

Example screens:

Inputs

Inputs are fields where the client enters information, e.g. name, address, contact details.

Custom properties:

Example code:

{...}
  --fl-input-selected-color: var(--fl-color-light);
  --fl-input-selected-background-color: var(--fl-color-dark);

Example screens:

Links

Links redirect the client to another screen.

Custom properties:

Logos

Fourthline's logo always appears in the footer of every screen.

You can add your logo in the top-right corner of the following screens:

• Introduction screens, e.g. for the Document module, Selfie module, Signature module
• Generic and system permission error screens
• Success screens

Send your logo in .svg format to your implementation manager along with the styles file:

• The maximum bounding box size is 120 x 50 px.
• The logo is flexible, as long as it fits within the 120×50 px bounding box.

Padding

To set the padding of the main component, use the --fl-main-spacing property.

You must set an acceptable padding value.

Example code:

{...}
  --fl-main-spacing: 40px 80px 50px;