Customisation

16561656

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 customisation

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

720720

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.

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

Dialog mode

The Link SDK is designed to be used as a dialog pop-up out of the box. To extend beyond its shape to any parent container set the dialog_mode property to "uncontained". This property is specially useful if your application relies on native modal sheets or if your design system already has a different set of properties for modals such as border-radius, drop shadow or transitions.

10801080

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.

20642064

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.

20642064

Button radius

By default Link SDK buttons are shaped as rounded rectangles. This default border radius can be modified by setting an integer value to the button_border_radius property in the customization configuration to reflect the shape of the buttons in your application.

20642064

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.

20642064

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.

720720

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.

The dialogMode property is helpful to use the full area of native OS modal sheets and avoid shape-clashing if your application is styled with a different border radius. We still recommend enclosing the SDK within a modal overlay box to focus your users attention into completing the flow.

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.

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

Mistakes to avoid

If you’re embedding the SDK within your own layout and not as an overlay dialog (ie. An onboarding flow), do not populate the surrounding view with interactive elements such as menus and links that could lead to abandonment.

20642064

In desktop, we don’t recommend extending the Link SDK to a fullscreen view (viewport’s full width and height) or on a separate pop-up window as it might result in disruption to the user journey, loss of context, and unexpected errors.

20642064

Avoid complex styling or transitions that could result in a laggy experience for users with legacy browsers or low performing devices.

Do not overlay elements on top of the Link SDK flow such as support bubbles, notifications, logos, or other dialogs.

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

20642064

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

20642064

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

20642064

Did this page help you?