This document provides instructions for the bank to integrate the Personetics widgets into their Flutter based application platforms. The bank may be initially provided with a sample vanilla package to be used for testing the integration, analyzing the code implementation, and viewing widget operation in their application. This will be followed by the bank customized product package.

Supported Flutter versions: 1.17.0 and higher

Package Description

Initially, two compressed packages are provided:

• personetics_flutter_engage_integration - Sample and various files related to the Vanilla client operation – APIs, assets, delegates, and Flutter files.
• Flutter_engage_package – product files, and Flutter envelope code

Viewing Sample App

The sample app enables viewing sample code response from the server, and widget operation.

To view the sample app

1. Download the compressed personetics_flutter_engage_Integration file to your computer and extract the compressed contents. To display the following directories.

2. Open the file in your code editor (e.g. VSCODE).
3. Open a new terminal under personetics_flutter_engage_Integration directory.
4. Run the following command: flutter run
5. Choose the device on which the app will be run (e.g. iPhone, Android, etc.). The app will appear (the first run may take a couple of minutes). The app displays two types of elements:
   • Server response to API requests (init Personetics, number of insights, get insights, get inbox insights)
   • Widget operations – start carousel widget, start inbox widget, start story widget.

4. Verify the top-right access option is set to 'predefine'.

5. The app provides two types of elements:

   • Responses to API requests. For example, Number of Insights, displays the response to Get Number of Insights.
   
   • Widgets operations – click on the relevant widget.
   

   Note: The Budget and Subscription widgets can be accessed by running the Trackers Dashboard or Hub (for Budget only) widget, and clicking the Budget Tracker.

Integrating Vanilla/Custom Code

This section describes how to integrate Personetics Vanilla code into the bank’s application and provides explanations on the relevant files, available parameters, and code implementation. An example of the vanilla interface is available for reference. The same process can then be used to integrate Personetics custom Bank code into the bank’s system.

The process consists of the following phases:

1. Add the flutter_engage_package to the bank’s project.
2. Create the EngageWebView widget.
3. Configure the class delegate protocol.
4. Call startWidget.

Import the Client Code Package

Import the client code package into your project. Initially, this would be the vanilla code - used to test the integration. The same process will be used for the customer code.

To import the flutter_engage_package into the bank’s project

1. Extract the flutter_engage_package to an accessible location on your computer.
2. Create a ‘package’ folder in your project main directory.
3. Add the flutter_engage_package folder into the package folder (as illustrated below).

3. Open the pubspec.yaml file, and under dependencies, add the following:
   flutter_engage_package: path: package/flutter_engage_packagean

Create the EngageWebView Widget

Create the EngageWebView widget where it is to be called in the bank’s project:

1. Import flutter engage package into the bank’s widgetController code using the following command:
   import 'package:flutter_engage_package/flutter_engage_package.dart';
2. Create the component which returns a controller of the engage package.

   @override  
     Widget build(BuildContext context) {  
   		return EngageWebView();  
   }
   

3. For iOS devices only: To allow rendering a keyboard on iOS web devices in WebView, add the following key when calling the Engage package. (i.e. window area scrolls up to allow for the keyboard).

resizeToAvoidBottomInset: false,

Note: The default setting is ‘true’, the [body] and the scaffold's floating widgets adjust to the full screen size, not allowing for the keyboard.

4. When calling the EngageWebView widget component, send the relevant function call (delegate function for callback) and the startWidget data (object).

Example:

EngageWebView(
        _object,
        sendRequestToPServerCallBack,
        sendRequestToEnrichServerCallBack,
        personeticsEventCallBack,
        navigateToPageCallBack,
        sessionEndedCallBack,
)

EngageWebView(
        _object,
        sendRequestToPServerCallBack,
        sendRequestToEnrichServerCallBack,
        personeticsEventCallBack,
        navigateToPageCallBack,
        sessionEndedCallBack,
        sessionErrorCallBack);

Configure Class Delegate

Create protocol with class Delegate and implement the Delegate functions provided by Personetics. Refer to the following for examples, and available function details:

• List of available functions
• Examples of function implementation – bankPersoneticsDelegate.dart file in the lib directory.

• Details of functions and values – Widget API

Call StartWidget

The startWidget function is used to render any Personetics widget within the bank page. (Refer to Widget API for a detailed description of the startWidget function and the relevant parameters.)

Call StartWidget by doing the following:

These are the functions the bank wrote in the delegateController and references must be made to these functions.
import 'package:flutter_engage_package/flutter_engage_package.dart';

In order to implement call startWidget, send the relevant data to the engageWebView widget that was created earlier as the _object.
return EngageWebView(_object, doPersoneticsCommendCallBack);

Send map data in the _object

_object example of minimum required params as described in the Flutter API document:

_object=  
{  
  "protocolVersion": "2.6",  
  "internationalization": {"language": "en"},  
  "configurations": {  
  	"widgetType": "carousel",  
  	"selectorString": "#root",  
  	"deviceType": "flutter",  
  	"params": {},  
  },  
  "widgetHeight" 260,  
  "widgetWidth": 320,  
};

_object=
{
 "widgetType":INBOX_WIDGET,
 "ctxId":DASHBOARD,
 "protocolVersion":PROTOCOL_VERSION,
 "autoGenerate":false,
 "lang":LANG,
 "webViewTag":1000,
 "darkMode":false,
 "deviceType":DEVICE,
 "darkMode":IS_DARK_MODE,
};

Note: Be sure to send the complete _object code, including “params”: {} shown below.

Class Delegate Functions

This section lists all the available functions for the creation of the Class Delegate Protocol file. Examples of some implementations are provided in the BankPersoneticsDelegate.js file provided with your package.