Customize Link SDK

Image showcasing options of customization

Overview

This guide will walk you through the customization features provided and our recommendations to help your customers trust any interactions with Link SDK. These properties allow our customers to match Link SDK UI colors with those of their own branding.

Planning customization

Making visual changes to the Link SDK flows has an impact on your conversion performance. Before updating your build, we recommend planning and testing the ideal customization using our Link SDK Figma community file. This is an easy and interactive way to visualize how well any changes you make to the SDK will match your brand and context within your application.

To edit the colors, you must edit the styles stored directly. These reflect the values passed over the configuration of any of the Link methods.

Duplicate our Link SDK Figma Community file

Image showcasing a sample view of custom colors chosen in the Figma community file.

Customization properties

The following properties are now included within the customization object and are optional, depending your preferences. This guide will cover web implementations. Read more within the Link SDK reference page.

Link SDK reference

javascript

Lean.link({
  app_token: "123",
  customer_id: "123",
  permissions: ["identity", "balance", "accounts", "transactions"],
  sandbox: true,
  customization: {
    theme_color: string,
    button_text_color: string,
    link_color: string,
    overlay_color: string,
  },
});

Theme color

The theme_color property passes a color to the button background-color, the input border when it's active and the loading spinners primary color.

Button text color

By default Link SDK uses absolute white for the elements inside the buttons. This can be changed using the button_text_color which allows you to improve contrast or adapt to your own buttons themes. We recommend always aiming for WCAG compliant contrast ratios.

Link SDK sample views focusing the elements changed from the theme text button color property

Link color

Links help your customers understand requirements or terms. With the link_color property you can adjust the colors of the Links and CTAs to match the ones in your system.

Link SDK sample view focusing on the helper link

Overlay color

Link SDK works as a modal dialog overlaying the current context. The overlay modal background color can be changed from the overlay_color property to match the colors and transparencies used across your application.

Link SDK sample view showcasing color for the background overlay

Best practices

When building your products, helping your customers connect their accounts should be priority over the styling of the platform. One of the core pillars of helping the users succeed is UX continuity and discoverability.

Although a variety of CSS color formats are supported, we recommend using HEX.

In Link SDK the buttons and links help users complete their flows. These are styled to be recognizable and differentiated from the rest of the elements in the view. We recommend theming them according to your application schemes and in a way they don’t disrupt the connection experience.

Mistakes to avoid

Avoid setting "ghost" or light tints for the theme_color as these will blend with the SDK white background affecting discoverability.

Example of color combinations to avoid like red, light tints or clashing color combinations

Avoid using red as this is used to indicate "danger" or failure, in the standard Link SDK UI.

Don't use colors that may produce uncomfortable vibrations or clash with the schemes.