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.
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 URLacctbankLogoImageUrl — 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"
},