User Interface

Plugins are based on web technology (i.e. HTML + CSS + JavaScript). The main content that you’ll create will render in a webview.

Plugins should be designed to be responsive and adapt to a variety of screen sizes to accommodate a great user experience for both Banno Mobile and Banno Online users.

Anatomy

Plugins are rendered as UI summary cards on the Dashboard of our apps. An optional primary action leads users to a full screen webview.

Card Face

1. Card title

The Title displayed in the card’s header. Determined by your plugin configuration.

2. Ellipsis menu

The ellipsis menu opens a menu for the card. More on this in the Card Menu section.

3. Webview

The webview contains your web app’s content.

Its size is determined by the Initial height in your plugin configuration.

The web address to be loaded is determined by the External Application in your plugin configuration.

4. Primary action (optional)

This natively-drawn button leads to a full-screen embedded webview of your External Application.

The action button Label and the destination External Application is determined by your plugin configuration.

If there is no primary action button configured, the bottom edge of the webview becomes the bottom edge of the card.

Card Menu

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Icon

An Icon of your choice from our available options . Determined by your plugin configuration.

This icon is also used in the Organize Dashboard view when the user adds a card.

3. Organize dashboard

All card menus contain a button that navigates the user to where they can change the dashboard card order.

Organize Dashboard

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Icon

The same as the Icon displayed in the Card Menu. Determined by your plugin configuration.

3. Card description

The short Description of your card. Determined by your plugin configuration.

Destination

Tapping on the primary action that corresponds to the plugin leads to a full-screen view of content.

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Done

This button closes the modal view that contains the webview. This is not configurable.

3. Webview

The webview contains your web app’s content.

The External Application to be loaded is determined by your plugin configuration.

Theming

Plugins should render themselves in a pleasing way that matches the theme configured for your financial institution in Banno.

There are two different ways to retrieve the configured theme for your financial institution: the Institutions API or the Identity Token (when authenticating a user).

If you do not want to use the Banno theme data and instead prefer to render your content using generic light and dark mode support, then you’ll have to take appropriate action on a per-platform basis.

Institutions API

The Institutions API is offered as part of the Consumer API and is the best way to dynamically retrieve the theme data for your financial institution.

Part of the institutions api is the themes endpoint to retrieve the themes configured for an institution. You should use the theme values returned from this api to keep your plugin design matching the overall theme of the Banno Apps automatically.

External Resources

Dark Mode and Color Schemes

If you want to learn more about handling dark mode and other color schemes in your web content, these external resources may be useful:

• Article: Dark Mode Support in WebKit
• Video: Supporting Dark Mode in Your Web Content
• Spec: prefers-color-scheme

Responsive and Adaptive Web Design

• Article: 9 basic principles of responsive web design
• Article: Responsive web design basics
• Article: The building blocks of responsive design