Intro

Using our UI SDK allows you to embed Wayflyer's UI directly into your application, which significantly reduces your development and design work. As part of your onboarding, you'll provide us with your brand style elements, and we will apply them to the Wayflyer banner and modal to ensure they match the look and feel of your platform.

This guide provides a list and examples of the styles you'll need to share with us for a seamless integration. After you provide us with your brand's style elements, we will create your theme which will be visible when you implement the SDK.

Please note: If you do not provide us with any of the required style elements, we will use our default styling.

Overview of Themeable Components

Financing Banner

The Financing banner displays Wayflyer's indicative offer or other relevant calls-to-action. The banner will show different content depending on the availability of the indicative offer and the status of the user's application.

Consent Modal

The Consent modal appears after a user clicks 'Get financing.' It provides more context about Wayflyer, and asks the user to consent to sharing information so they can proceed with their application.

Embedded Styles Overview

For a more seamless user experience, we customize the user interface and Embedded components to align to your brand style requirements. To enable us to customize the UI, we need the following from you:

1. Your brand's specific font name
2. Your brand's accent color
3. Choose the 'Finance banner style'

After reviewing this guide, provide the following to your partnerships manager or the Wayflyer Product Manager via email or Slack.

1. Font Name

Provide the exact font name used on the site to be embedded, as specified in the CSS font-family property.

2. Accent Color

Wayflyer will use this color to highlight main actions such as primary buttons, interactive states, etc. The screenshot below demonstrates how the font and accent color will be used on a primary button.

3. Financing Banner Style Choice

There are two options for the 'financing banner' which allow you to customize the prominence of your Financing banner component to make it stand out more or less on your platform. Choose either the Default style or the Accent style options (see screenshot below).

Recommended Placement of the Financing banner

For the best results, the Financing banner should be placed at the top of the screen, before any other content. It should span the full width of the content area to ensure text displays correctly. If this isn't possible, it can be placed after the most important element on the page, but should still be visible above the fold to ensure higher conversion rates.

Financing banner placement at the top

Financing banner placement after other content