This page contains the startWidget map key values for all layouts. Most values are relevant to all layouts. Parameters relevant to specific layouts are indicated as such.

Parameter

Map Key Values

The following parameters are mapped to the startWidget and determine how the widget is rendered. All parameters are provided with every package; however, they are not relevant for every solution. (This allows for flexibility in future upgrades.)

Note: Some of the parameters are relevant only to specific widgetType values.

*Flutter only. Refer to Flutter Height Implementation

**Relevant or required only for story-widget as detailed in parameter description.

Theme

The ‘theme’ parameter enables configuring the color scheme of each widget per startWidget call. Two themes are supported: darkMode and Lightmode. Both themes have the same color array, that includes the following fields, each with a bank configurable hex code value. The color fields correspond to different elements in the widgets, as listed below along with example hex values:
If one of the fields is missing or its value is invalid, the specific color would not be overridden and remain as the hex code in the project color palette. The color would override the basic color in the color palette, the shades shall be updated accordingly.
Use case examples: color classification according to insight segment such as onboarding, user self-management, and more.

List of theme attributes and example values
grayScale: "#313131", neutral: "#736B94", primary: "#7F5BFF", secondary: "#007AFF", out: "#DC2339", in: "#399D90", alternative: "#FFAF18", header: "#dddddd",

Code Example

{
    theme: {
        lightTheme: {
            palette: {
                grayScale: "#313131",
                neutral: "#736B94",
                primary: "#7F5BFF",
                secondary: "#007AFF",
                out: "#DC2339",
                in: "#399D90",
                alternative: "#FFAF18",
                header: "#dddddd",
            },
        },
        darkTheme: {
            palette: {
                grayScale: "#313131",
                neutral: "#736B94",
                primary: "#7F5BFF",
                secondary: "#007AFF",
                out: "#DC2339",
                in: "#399D90",
                alternative: "#FFAF18",
                header: "#dddddd",
            },
        },
    },
};

Payload Structure

There are three types of payloads for various widgets as follows:

• getInsights - carousel, trackersDashboard, hub, singleTeaser
• getInboxInsights - inbox
• getInsightDetails - story-widget

The payload is located in the config object as detailed in each example below.

Note: Before calling the startWidget API, the bank may call the Personetics service to retrieve the API rendering response

Structure per Widget

case "inbox":
   this.config.configurations.params.payload["GET_INBOX_INSIGHTS"] = getInboxInsights;
   break;

case "carousel":
case "hub":
case "singleTeaser":
case "singleTrackerTeaser":
case "trackersDashboard":
   this.config.configurations.params.payload["GET_INSIGHTS"] = getInsights;
   break;

case "recap":
case "story-widget":
   this.config.configurations.params.payload["GET_INSIGHT_DETAILS"] = getInsightDetails;
   break;

default:                   
   this.config.configurations.params.payload["GET_INSIGHTS"] = getInsights;

Flutter Height Implementation

Height configuration is required only for ‘carousel’ widgetType, where the widget height should be set according to the information in this section.

For other widgets, the widget height can be optionally be configured according to the information in this section; otherwise, it will be set according to screen height.

Personetics Implementation Classes

The Personetics client is responsive, where all widgets’ elements affected by size, self-adjust to the device width. (This includes fonts, images, etc.). The adjusted device width, determines the set height.

Small-sized devices - design conforms to the FI’s requirements.

For medium and larger devices - several classes corresponding to the device size:

• 320 - 347 pixel device width – class "perso-small" (iPhone 5/SE)
• 347 - 395 pixel device width – class :"perso-medium" (iPhone 6/7/8)
• 396 to max pixel available – class "perso-large" (iPhone 6/7/8 plus)

Height Implementation Example

var widgetHeight;  
      if ((WidgetsBinding.instance.window.physicalSize.width >= 320) &&  
          (WidgetsBinding.instance.window.physicalSize.width \< 347)) {  
             widgetHeight = 212;  
      }  
      if ((WidgetsBinding.instance.window.physicalSize.width >= 347) &&  
          (WidgetsBinding.instance.window.physicalSize.width \< 395)) {  
             widgetHeight = 228;  
      }  
      if (WidgetsBinding.instance.window.physicalSize.width >= 396) {  
        widgetHeight = 260;  
      }  
      personeticsInfo["widgetHeight"] = widgetHeight;