Component Customization

Embedded banking components can be customized to best match a Financial Institution (FI) or non-bank partner’s branding and online aesthetics. Various fonts, colors, section visibility, and text snippets in an embedded banking component can be customized to better fit a non-bank partner’s branding and application layout, while ensuring that the FI controls messaging around the FI’s brand and banking services.

Levels

Each configuration parameter can be adjusted at one or more levels. Not all levels are available for every parameter. If multiple levels are available, the lowest level will override any higher level settings. For example, an application level setting can override a partner setting.

The levels from the lowest level to the highest level are:

Institution (Inst) – Financial Institution settings. The Financial Institution (FI) can set configurations that a Non-Bank Partner may not be able to override. These parameters are usually related to the Financial Institutions branding or similar requirements. These configurations are directed by the FI.

Partner – Non-Bank Partner settings. These configurations will apply to any Embedded Banking component managed by one specific non-bank partner across all applications and instances. These configurations are directed by the FI, not the partner themselves.

App – Application setting. These configurations control the Embedded Banking component’s appearance for each application. For instance, the design may need to differ for a mobile website vs a desktop website. These configurations are controlled and can be updated by the partner.

Creating Customizations

During the onboarding process for Embedded Banking, Apiture staff will guide both the FI and the non-bank partner through customizations during a Workshop. The workshop will go over what the FI controls, what the partner controls, and how any suggested changes may look.

After the workshop is completed, and the embedded banking component is available on the partner’s application, the partner can adjust some customizations from the application without any intervention from Apiture. Apiture can also provide assistance using a preview tool, if desired, for help with any future changes.

Some adjustments, like changing the FI’s logo, require Apiture’s intervention to ensure the Partner is not making customizations the FI would not approve.

Labeled Screen Shots

A gallery of components with the relevant customization labeled to the feature is available in the Customization Example‘s gallery. Some of the more complicated features, such as toggling visibility, is also explained where needed.

A list of parameters and an explanation of their values are provided at the Workshop, and their effects on the component can be previewed and experimented in real-time then.

Parameters

Below is a list of names and descriptions of the various parameters that can be adjusted, as well as an example of a valid setting.

General - FI

Application ID

appid

A unique string identifier for the application

Description

description — String

Short description of the application

Client ID

clientId — String

A unique string identifier for the client

Authentication

Days Until Authentication Expires

authenticateDaysToExpire – int

Number of days before automatic disconnection from Embedded Banking.

Component hidden when Unauthenticated

componentHiddenUnauthenticated — Boolean

Hide component when unauthenticated.

Global Settings (App)

Primary Button Style

buttonPrimaryStyles — CSS Style Information

Formatting information for buttons. The color, font-family, and font-size for the button text as well as the background, border and other button shape and coloring information. This should be formatted as one JSON block, such as:

				
					{
"background-color": "#14477B",
"color": "#FFFFFF",
"font-family": "'Poppins', sans-serif",
"font-size": "14px"
},

Secondary Button Style

buttonSecondaryStyles — CSS Style Information

Alternative formatting information for buttons. Secondary button formatting is used for distinguishing a single button when two buttons are presented side-by-side, such as a Confirm and Cancel button. The color, font-family, and font-size for the button text as well as the background, border and other button shape and coloring information. This should be formatted as one JSON block, such as:

				
					{
"border-color": "#005A7C",
"border-width": "1px",
"background-color": "rgb(249 250 251)",
"color": "#005A7C",
"font-family": "'Poppins', sans-serif",
"font-size": "14px"
},

Title Text

componentTitleText — String

Text appearing in the title of the transfers component. Can be left blank for no title.

Title Text Styles

componentTitleTextStyles — CSS Font Information

The color, font-family, and font-size for the title text. This should be formatted as one JSON block, such as:

				
					{
"color": "#132334",
"font-family": "'Poppins', sans-serif",
"font-size": "12px"
},

Primary Text Styles

textPrimaryStyles — CSS Font Information

The color, font-family, and font-size for the majority of text. This should be formatted as one JSON block, such as:

				
					{
"color": "#132334",
"font-family": "'Poppins', sans-serif",
"font-size": "12px"
},

Secondary Text Styles

textSecondaryStyles — CSS Font Information

The color, font-family, and font-size for the remainder of text. This should be formatted as one JSON block, such as:

				
					{
"color": "#132334",
"font-family": "'Poppins', sans-serif",
"font-size": "12px"
},

Link Font Style

linkStyles – CSS Font Information

The color, font-family, and font-size for the remainder of text. This should be formatted as one JSON block, such as:

				
					{
"color": "#005A7C",
},

Global Settings (FI)

Authenticated FI Logo Filename

bankLogoImageUrl — String

URL for the FI’s Logo seen when user is authenticated. supported: png, gif, jpg

Call to Action Unauthenticated URL

callToActionUnauthenticatedText – String

URL for user to perform an action when they are not logged in.

Call to Action Unauthenticated Text

callToActionUnauthenticatedText – String

Text describing the action taken by the Call to Action Unauthenticated URL when the user is not logged in.

Call to Action Authenticated URL

callToActionUnauthenticatedText – String

URL for user to perform an action when they are authenticated.

Call to Action Authenticated Text

callToActionAuthenticatedUrl – String

Text describing the action done by the Call to Action Authenticated URL when the user is authenticated.

Font Library URL

fontUrls — String

URL(s) to any embeddable web fonts

Menu Item Logout Label

menuItemLogoutLabel — String

Text displayed in drop down menu for Disconnecting

Disconnect Message

disconnectMessage — String

Text displayed confirming the user will be disconnected from the FI

Confirm Disconnect Button Text

disconnectConfirmButtonText — String

Text displayed on the Confirm button when disconnecting from the FI

Cancel Disconnect Button Text

disconnectCancelButtonText — String

Text displayed on the Cancel button when disconnecting from the FI

Help Disconnect Button Text

disconnectHelpMessageText — String

Help text displayed when disconnecting from the FI

Accounts

Account Categories Visible

acctCategoriesVisible — Boolean

Display account categories when listing accounts. If user has less than or exactly 3 accounts, Account Categories will not display, even when set to true.

Account Type List

acctTypesList— Array of strings

Get list of accounts matching types in accTypesList. At least 1 type is required in the array.

Account Title Text

acctTitleText – String

Text to appear in title. Can be left blank for no title.

Account Bank Logo Image URL
acctbankLogoImageUrl — String

URL of bank logo. supported: png, gif, jpg

Items per Page

acctItemsPerPage — int

Number of items per page of accounts. Smaller components need a smaller number of items to avoid a scroll bar appearing.

Menu Items 1 & 2

menuItem1 — JSON Menu Information

menuItem2 — JSON Menu Information

Icons, labels and URLs for the Context Menu. Menu order may be pre-determined by the FI.

				
					{
"icon": "add",

"label": "Open an account",

"url": "https://www.example.com "
},

Transaction Bank Logo Image URL

transactionsBankLogoImageURL — String

URL for FI’s logo; supported: png, gif, jpg

Transactions (App)

Title Text Styles

transactionsTitleTextStyles — CSS Font Information

The color, font-family, and font-size for the title text. This should be formatted as one JSON block, such as:

				
					{

"color": "#132334",

"font-family": "'Poppins', sans-serif",

"font-size": "12px"

},

Transfers (FI)

Title Text

transfersComponentTitleText – String

Text appearing in the title of the transfers component. Can be left blank for no title.

Content Text

transfersComponentTitleTextStyles – String

Text appearing underneath the title text

Schedule Transfer Button Text

scheduleTransferTitleText – String

Label for the Schedule Transfer button

Recent Single Transfers Title Text

recentTransferTitleText – String

Header text for Recent Single Transfers panel

Items per page

transferItemsPerPage — int

Items per page in list of transfers. Smaller components need a smaller number of items to avoid a scroll bar appearing.

Show Recent Single Transfers Panel

showRecentTransfers – Boolean

Show or hide the recent transfers history panel

Cancel Creating Transfer Button Text

createTransferCancelButtonText — String

Label for the Cancel button when creating a transfer

Confirm Creating Transfer Button Text

createTransferConfirmButtonText — String

Label for the Confirm button when creating a transfer

Message Creating Transfer Text

createTransferMessageText — String

Text displayed when confirming the user is creating a transfer

Help Message Text

createTransferHelpMessageText – String

Instructions to help users create a transfer

Schedule Transfer URL

callToActionScheduleTransferUrl — String

URL to schedule a transfer on the FI’s website

Schedule Transfer Link Text

callToActionScheduleTransferText — String

Text for link to schedule a transfer on the FI’s website

Recent Transfer URL

callToActionRecentTransferUrl — String

URL to view recent transfers on the FI’s website

Recent Transfer Link Text

callToActionRecentTransferText — String

Text for link to view recent transfers on the FI’s website

External Account URL

callToActionTransfersNotEligibleUrl — String

URL to approve an external account for transfers on the FI’s website

External Account Link Text

callToActionTransfersNotEligibleText — String

Text for link to approve an external account for transfers on the FI’s website

Menu Items 1 – 4

menuItem1 — JSON Menu Information

menuItem2 — JSON Menu Information

menuItem3 — JSON Menu Information

menuItem4 — JSON Menu Information

Icons, labels and URLs for the Context Menu. Menu order may be pre-determined by the FI.

				
					{
"icon": "add",

"label": "Open an account",

"url": "https://www.example.com "

},

Transfers Bank Logo Image URL

transfersBankLogoImageURL — String

URL for FI’s logo; supported: png, gif, jpg

Transfers (App)

Title Text Styles

transfersComponentTitleTextStyles — CSS Font Information

The color, font-family, and font-size for the title text. This should be formatted as one JSON block, such as:

				
					{

"color": "#132334",

"font-family": "'Poppins', sans-serif",

"font-size": "12px"

},