Introduction

This document describes how to perform the physical integration of the Personetics client web SDK into your app. The package includes the following:

Engage - the Engage product includes the budget widget
ACT* - relevant for customers that have acquired ACT.
Open Banking (OB)* - relevant for customers that have acquired OB.

*Requires Engage to be installed either previously or simultaneously.

Package Description

The customer is provided with the SDK package personetics-integration-app-web-xxxx.zip. The package includes Engage, and may also include ACT, and/or Open Banking if relevant.

Note: The sample vanilla SDK package and the customized bank package contain the same product folders, with different files.

Engage Folders	Description and Sub-folders
home	Simulates customer application and allows sample code to run. Contains examples and reference files relevant to the Vanilla integration package, including eventDelegate.js.
home-mw	Simulates customer application when using multiple instances / widgets and allows sample code to run.
personetics-product	- js folder (mandatory js files) - css file (mandatory) - resources folder (fonts and images)
personetics-react-product	- js (Folder) - resources folder (fonts and images)
personetics-act	ACT product files. Relevant for customers with ACT products.
personetics-open-banking	Open banking files. Relevant for customers with open-banking.

Note: Do not change the hierarchy of the folders or files.

Integration Process

Follow these steps, described in this section:

Extract the compressed SDK files to an accessible location in you project.
Import the relevant SDK JS and CSS files
Call startWidget - detailed in the Client API document

Import JS and CSS

To import the SDK JS and CSS Files, add the tags to the bank’s HTML file where the project is located. Note that one tab is for Engage, ACT, and OB; another tab for Engage only.

<!-- personetics third party scripts -->
<script src="../personetics-product/js/personetics-vendors.min.js"></script>

<!-- personetics api -->
<script src="../personetics-product/js/personetics-api.min.js"></script>

<!-- personetics widgets -->
<script src="../personetics-product/js/personetics-widget.min.js"></script>

<!—personetics react vendor -->
<script src="../ personetics-react-product/js/personetics-vendor.min.js"></script>

<!—personetics-react-product widgets -->
<script src="../personetics-react-product/js/personetics-widget.min.js"></script>

<!—personetics act widgets -->
<script src="../act/personetics-widget.js"></script>

<!—personetics personetics-open-banking widgets -->
<script src="../personetics-open-banking/build.js"></script>

<!-- personetics css -->
<link rel="stylesheet" type="text/css" href="../personetics- product/css/personetics.css">

<!-- personetics third party scripts -->
<script src="../personetics-product/js/personetics-vendors.min.js"></script>

<!-- personetics api -->
<script src="../personetics-product/js/personetics-api.min.js"></script>

<!-- personetics widgets -->
<script src="../personetics-product/js/personetics-widget.min.js"></script>

<!—personetics react vendor -->
<script src="../ personetics-react-product/js/personetics-vendor.min.js"></script>

<!—personetics-react-product widgets -->
<script src="../personetics-react-product/js/personetics-widget.min.js"></script>

<!-- personetics css -->
<link rel="stylesheet" type="text/css" href="../personetics- product/css/personetics.css">

Event Handler Functions

Import the eventDelegate to the bank’s HTML as follows:

<!-- Personetics events delegate -->
<script src="js/eventDelegate.js"></script>

Referring to the Client API, add your (the bank’s) implementation to the following functions:
sendRequestToServer()
widgetEvent()

Note the following:

The minimum implementation is required at this stage; however, the bank is required to add its own implementation for each and every function on the eventDelegate object. This can be done at a later stage of the integration. See Function Descriptions.
An eventDelegate.js code file is is located in the Home directory. The file provides examples of some Personetics API and widget events usage options and integration code examples. The file is required only for the initial integration, and is only provided in the initial product delivery and should be saved by the bank’s team in a known location for reference.

Call startWidget

Referring to the Widget API document:

Call startWidget using the appropriate settings. The relevant response will be returned by the server.
For example: If teaser(s) are rendered, when a teaser is clicked – the insight story is returned by the server.
The triggered events are handled by eventDelegate (widgetEvent).

Function Descriptions

The following table lists the functions in the appropriate syntax, along with a brief description. Detailed descriptions of each functions are provided in the Client API documentation.

Function Name	Description
this.navigateToPage = function (params)	Provides information to be used by the bank to navigate to the relevant page. Relevant if Call To Action is activated. Personetics invokes this function when user clicked a certain button that requires the bank action. Values can optionally be assigned (function must be included).
this.sendRequestToPServer = function (requestHeaders, data, requestId)	Mandatory – Personetics does not support independent HTTP calls. As such, all HTTP calls should be made by the bank secured channel using the bank application code. Personetics calls this function when an HTTP request should be made to the server. The function sends two properties: requestHeader: Should be sent as the header of the request. requestId: Should be passed back with the response when using handleServerResponse().
this.sendRequestToEnrichServer = function (requestHeaders, data, requestId)	Mandatory – Personetics does not support independent HTTP calls. All HTTP calls should be made by the bank secure channel using the bank application code. Called by Personetics when an HTTP request should be made to the server. Parameters: requestHeader: Should be sent as the header of the request. requestId: Should be passed back with the response when using handleServerResponse().
this.handlePServerResponse = function (data, requestId) {	The bank calls this function as a response to the “sendRequestToPServer” event sent by Personetics. Personetics calls the “sendRequestToPServer” function for each HTTP request. The response received by the Personetics server should be passed to Personetics using this function. Parameters: Response string - Personetics server response requestId string - This property needs to be attached to the reply of each call.
this.widgetEvent = function widgetEvent(widget, params) {	Will be triggered by Personetics Widget when a widget specific event occurs. For example, teaser widget is clicked, story widget is closed, etc. Parameters: Widget – the widget object (map) params_map – event parameters (map)
this.handleWidgetAction = function handleWidgetActions(widget, params) {	Handles widget actions when they are triggered. This function is called from the widgetEvent function. Parameters: Widget – the widget object (map) params_map – event parameters (map) Action Event types: - externalNavigation – sends a string to the bank’s delegate for external navigation from the widget - externalNavigationURL – opens a defined URL within the widget - CallPeronseticsAPI – sends a defined API request to the Pserver - openStory – opens a story (from a teaser)
this.sessionError = function (error)	Optional. Do not have to assign values to function BUT function must be included in the ‘configuration file’ Personetics will call this function in case of an error.
this.sessionEnded = function (config) {	Optional. Relevant only if Personetics’ widgets have a “Close” button according to the design. Function called by Personetics when the story “Close” button is clicked. Default behavior: The bank should close the controller\View.
this.handleError = function () {	Will be triggered by bank application if there is an application error. Parameter(s) errorInfo - Error information in key/value fashion including errorCode and errorMessage