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.
Add your Company Logo on the LinkSDK
We allow the addition of a logo on the "Link your account" page of the LinkSDK.
To add the logo, you will need to navigate to the "Settings" section in the Lean Developer Account. It's that simple!
Optimal dimensions for the logo
We highly recommend adding a 400px x 400px square logo to ensure best rendering across all platforms
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Updated over 1 year ago