Documentation

Engage Teaser Widgets

Suggest Edits

About Teaser Widgets

Teasers are designed to peak the user’s interest by presenting the user with relevant financial information and offering access to financial services provided by the bank. Two types of teasers are supported :

  • Insight teasers
  • Tracker teasers

Insight and tracker teasers are implemented by dedicated widgets as briefly described under Supported Widgets , and detailed in this section.

All widgets except for singleWidget, are designed to present numerous teasers and provide placement for the insights’ teasers in the bank app or site. Banks may decide to use Personetics widget as standalone or use the widgets as part of their client. The following types of teaser widgets are available per teaser type:

  • Insight teasers (only) - Inbox widget, Carousel widget, singleWidget
  • Tracker teasers (only) - Dashboard
  • Insight and tracker teasers (in dedicated areas) - Hub

Teaser Structure

Teasers could be simple text, or rich teasers that include visual elements. The rich teaser is constructed by combining the different available visual blocks.

Most - but not all, teasers can lead to a story. Teasers that do not lead to a story, allow for a CTA (call to action) directly from the teaser, skipping the story, or collecting user input using a dedicated API call.

Teasers Structure Templates

Teasers consist of a single dialog, based on a specific template where each template consists of predefined blocks whose order cannot be modified. The teasers templates have both fixed and dynamic areas. The fixed areas include a set of blocks and IDs; The dynamic area can contain an image, a chart, or boxes – depending on the template.

Teaser Customization Capabilities

The teaser widget is customized according to catalog options provided by Personetics. Banks can select customizations such as color, fonts, date formats, CSS adjustments, etc. The customization options for each widget are detailed in the corresponding widget descriptions. For the full catalog, contact you Personetics representative.

singleTeaser

Description

Presents a single card displaying a single insight teaser retrieved from the getInsight response. If more than one insight is triggered for a user, the widget shows the first relevant insight teaser. It is located in the bank’s application.

User Interaction

The following interactions are supported:

  • Clicking on a standard teaser opens the story.
  • Clicking on an interactive teaser initiates the relevant interaction.
  • In case no teasers are available, a message shall be displayed to the user.

Display

  • Displays a single teaser.
  • An empty state is presented in case there are no relevant insights.

Inbox Widget

The inbox widget provides a vertical feed for insight teasers – teasers other than trackers, allowing up and down scrolling.

It is used when a feed\list UX approach is chosen. The widget shows a list of teasers prioritized by date and score. The inbox can be divided into tabs of “all” \” unread” or show a uniform list.

In mobile implementations it is recommended to use a full screen. In desktop implementations the widget may be fitted to a single or multiple teaser list.

Carousel Widget

Description

The carousel widget provides a horizontal feed for insight teasers – teasers other than trackers, located in the bank’s application. It displays the insight teasers retrieved from the getInsight response. Each card in the carousel displays a teaser. Users can swipe between the different cards.

The carousel includes a pagination indicating the number of teasers, and the presented teaser.

User Interaction

The following interactions are supported:

  • Clicking on a standard teaser opens the story.
  • Clicking on an interactive teaser initiates the relevant interaction.
  • Cards can be swiped to the right or to the left.
  • In case no teasers are available, a message shall be displayed to the user.

Display

The carousel widget is combined with the inbox widget and includes navigation directly to the inbox through a View All button. For example, a ‘See All’ button in the carousel that navigates to a vertically scrollable list of all teasers.

Optionally, the carousel can contain two tabs:

  • ‘New Insights’ tab in the upper left side – optionally contains an icon and text. Otherwise, it is left-aligned. The text presents the number of “unread" insights from the getInsight response.
  • ‘View All’ button on the upper right side – clicking on the button opens the inbox widget.

Note: An empty state is presented in case there are no relevant insights.

trackersDashboard

Description

The trackersDashboard widget displays tracker teasers. It will be located in the bank’s application, where each card in the widget displays a tracker teaser.

User Interaction

  • Clicking on a standard teaser opens the story
  • Clicking on an interactive teaser initiates the relevant interaction
  • In case no teasers are available, a message consisting of static text and an image will be displayed to the user.

Display

The trackersDashboard consists of two parts:

  • Optional upper area that includes a title and icon.
  • Lower area containing tows of tracker teasers. Each row contains either one or two teasers.

Hub Widget

The hub widget is used for simultaneously displaying both insight teasers and tracker teasers in dedicated areas. It combines the carousel, and the trackerDashboard widgets and displays them in two separate, independently operational areas:

Updated 9 months ago