Theming the Embedded UI
A guide to providing Wayflyer with the necessary style elements to make the embedded UI look and feel like a native part of your platform.
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 branding guidelines, and we will apply them to the Wayflyer banner and modal to ensure they match the look and feel of your application.
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.
Financing banner within mock dashboard
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.
Consent modal within mock dashboard
Required UI Styles List
Below are all the styles required to build the two components of the Wayflyer Hosted Capital Solution: the Financing banner and the Consent modal.
The values listed are for our demo, as a reference. Please provide us with your brand's specific font and color styles for the lists below, so we can theme the UI layer for your integration.
| Font styles | Default style |
|---|---|
| font-family | DM Sans |
| font-size-base | 15px |
| font-size-small | 12px |
| font-size-large | 18px |
| font-size-extra-large | 24px |
| font-weight-regular | 400 |
| font-weight-medium | 500 |
| font-weight-bold | 600 |
| Color styles | Default style |
|---|---|
| text-default | #323440 |
| text-light | #50555F |
| background-banner | #CAF1DC |
| background-button | #2C645C |
| background-button-hover | #193E3C |
| modal-lightbox | #11142B (60% opacity) |
| Border radius styles | Default style |
|---|---|
| banner-border-radii | 8px |
| modal-border-radii | 8px |
| button-border-radii | 8px |
Visual Examples
Below are visual examples of how these styles are applied to each component.
Financing banner component – font styles
Financing banner component – color and border radii styles
Consent modal component – font styles
Consent modal component – color and border radii styles
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