API Implementation Examples

This section describes how to use startWidget to render the story-widget and teaser widgets, and provides examples of rendering both in various layouts.

Code Examples

JSONObject configurations = new JSONObject();
JSONObject params = new JSONObject();
JSONObject assets = new JSONObject();
JSONObject internationalization = new JSONObject();
JSONObject theme = new JSONObject();
try {
     if(getResources().getBoolean(R.bool.is_use_payload)) {
	      params.put(Personetics.PDB_PAYLOAD, config.get(Personetics.PDB_PAYLOAD));
}
params.put(Personetics.PDB_USER_ID, getResources().getString(R.string.default_user));
configurations.put(Personetics.PDB_WIDGET_TYPE, "inbox");
configurations.put(Personetics.PDB_DEVICE_TYPE, "android");
configurations.put(Personetics.PDB_SELECTOR_STRING, "#root");
configurations.put(Personetics.PDB_PARAMS, params);
if(getResources().getBoolean(R.bool.is_use_remote_assets_mode)) {
    assets.put(Personetics.PDB_BASEURL, getString(R.string.remote_assets));
    assets.put(Personetics.PDB_USEREMOTEASSETS, true);
    }
    internationalization.put(Personetics.PDB_LANGUAGE, "en");
    theme.put(Personetics.PDB_DARKMODE, false);

    config.put(Personetics.PDB_CONFIGURATIONS, configurations);
    config.put(Personetics.PDB_ASSETS, assets);
    config.put(Personetics.PDB_INTERNATIONALIZATION, internationalization);
    config.put(Personetics.PDB_THEME, theme);

    } catch (JSONException e) {
	    e.printStackTrace();
    }

    return ((MainActivity)getActivity()).getPersonetics().startWidgetWithView(getActivity(), config);

let personeticsInfo = NSMutableDictionary.init()
       let personeticsBridge = BankPersoneticsDelegate.init()
       let configurations = NSMutableDictionary.init()
       let params = NSMutableDictionary.init()
       let assets = NSMutableDictionary.init()
       let internationalization = NSMutableDictionary.init()
       let theme = NSMutableDictionary.init()

       guard let constants = NetworkManager.shared.constants else { return }

       params.setValue(constants.userName, forKey: Personetics.PDBuserId)
       configurations.setObject("inbox", forKey: Personetics.PDBWidgetType as NSCopying)
       configurations.setObject("ios", forKey: Personetics.PDBDeviceType as NSCopying)
       configurations.setObject("#root", forKey: Personetics.PDBSelectorString as NSCopying)
       internationalization.setObject(constants.appLanguage, forKey: Personetics.PDBlanguage as NSCopying)
       personeticsBridge.viewCtrl = self

       personeticsInfo.setValue(constants.protocolVersion, forKey: Personetics.PDBprotocolVersion)
       personeticsInfo.setValue(constants.webViewTag, forKey: Personetics.PDBwebViewTag)

       if constants.useRemoteAssets == true {
           assets.setObject(true, forKey: Personetics.PDBuseRemoteAssets as NSCopying)
           assets.setObject(constants.remoteUrl, forKey: Personetics.PDBbaseUrl as NSCopying)
       }
       if constants.darkMode == true {
           theme.setValue(constants.darkMode, forKey: Personetics.PDBdarkMode)
       }
       personeticsInfo.setValue(personeticsBridge, forKey: Personetics.PDBpDelegate  )
       if constants.usePayload {
           if let infoPayload = payload {
               params.setValue(infoPayload, forKey: Personetics.PDBpayload)
           } else {
               getPayloadForType(type: "inbox", requestType: "getInboxInsights", navParams: nil)
               return
           }
       }
       configurations.setObject(params, forKey: Personetics.PDBparams as NSCopying)

       personeticsInfo.setValue(configurations, forKey: Personetics.PDBconfigurations)
       personeticsInfo.setValue(assets, forKey: Personetics.PDBassets)
       personeticsInfo.setValue(internationalization, forKey: Personetics.PDBinternationalization)
       personeticsInfo.setValue(theme, forKey: Personetics.PDBtheme)

       let personetics = Personetics.init()
       personeticsBridge.personetics = personetics
       if let personeticsController = personetics.startWidget(personeticsInfo: personeticsInfo) as? UIViewController {
           personeticsController.updateViewConstraints()
           self.navigationController?.pushViewController(personeticsController, animated: true)
       }

Carousel Example

Following are code examples, for carousel for each layout. The examples are the same for trackersDashboard, hub, inbox, and manage-budgets, as defined for widgetType.

personetics.startWidget(
{"configurations": {
        "deviceType": "web",
        "ctxId": "dashboard",
        "params": {
            "userId": "B_1012"
        },
        "selectorString": "#root",
        "widgetType": "carousel"
    },
    "assets": {"useRemoteAssets": true
			“baseUrl”: "https://bank-assets.s1.amazonaws.com/clientproduct-assets/assets/"
},
       "internationalization": {
        "language": "en"
    }});

final personeticsInfo_carousel = {
  "protocolVersion": "2.6",
  "internationalization": {"language" “en”},
  "configurations": {
    "widgetType": “carousel”,
    "selectorString": "#root",
    "deviceType": “flutter”,
    "ctxid": “dashboard”,
		  "params": {},
  },
  'widgetHeight': 260,
  'widgetWidth': 320,
};

let personeticsInfo = NSMutableDictionary.init()
       let personeticsBridge = BankPersoneticsDelegate.init()
       let configurations = NSMutableDictionary.init()
       let params = NSMutableDictionary.init()
       let assets = NSMutableDictionary.init()
       let internationalization = NSMutableDictionary.init()
       let theme = NSMutableDictionary.init()

       guard let constants = NetworkManager.shared.constants else { return }

       params.setValue(constants.userName, forKey: Personetics.PDBuserId)
       configurations.setObject("inbox", forKey: Personetics.PDBWidgetType as NSCopying)
       configurations.setObject("ios", forKey: Personetics.PDBDeviceType as NSCopying)
       configurations.setObject("#root", forKey: Personetics.PDBSelectorString as NSCopying)
       internationalization.setObject(constants.appLanguage, forKey: Personetics.PDBlanguage as NSCopying)
       personeticsBridge.viewCtrl = self

       personeticsInfo.setValue(constants.protocolVersion, forKey: Personetics.PDBprotocolVersion)
       personeticsInfo.setValue(constants.webViewTag, forKey: Personetics.PDBwebViewTag)

       if constants.useRemoteAssets == true {
           assets.setObject(true, forKey: Personetics.PDBuseRemoteAssets as NSCopying)
           assets.setObject(constants.remoteUrl, forKey: Personetics.PDBbaseUrl as NSCopying)
       }
       if constants.darkMode == true {
           theme.setValue(constants.darkMode, forKey: Personetics.PDBdarkMode)
       }
       personeticsInfo.setValue(personeticsBridge, forKey: Personetics.PDBpDelegate  )
       if constants.usePayload {
           if let infoPayload = payload {
               params.setValue(infoPayload, forKey: Personetics.PDBpayload)
           } else {
               getPayloadForType(type: "inbox", requestType: "getInboxInsights", navParams: nil)
               return
           }
       }
       configurations.setObject(params, forKey: Personetics.PDBparams as NSCopying)

       personeticsInfo.setValue(configurations, forKey: Personetics.PDBconfigurations)
       personeticsInfo.setValue(assets, forKey: Personetics.PDBassets)
       personeticsInfo.setValue(internationalization, forKey: Personetics.PDBinternationalization)
       personeticsInfo.setValue(theme, forKey: Personetics.PDBtheme)

       let personetics = Personetics.init()
       personeticsBridge.personetics = personetics
       if let personeticsController = personetics.startWidget(personeticsInfo: personeticsInfo) as? UIViewController {
           personeticsController.updateViewConstraints()
           self.navigationController?.pushViewController(personeticsController, animated: true)
       }

Note: the ‘selectorString’ example of ‘#root’ corresponds to the sample app example. The relevant path should be defined.

payload Example

Following are payload examples per layout.

Note: For details on 'payload', refer to payload Structure.

{
  "configurations": {
    "deviceType": "web",
    "ctxId": "dashboard",
    "params": {
      "payload": {
        "GET_INSIGHTS": {
          "ok": true,
          "protocolVersion": "2.6",
          "requestChannel": "VANILLA_QA",
          "requestType": "getInsights",
          "requestId": "NLjFSETDjW7-K35x",
          "status": "200",
          "statusMessage": "ok",
          "insights": []],
          "numberOfInsights": 8,
          "unreadMessages": 4,
          "numberOfUnreadInsights": 4
        }
      },
      "userId": "B_1012"
    },
    "selectorString": "#root",
    "widgetType": "inbox"
  },
"assets": {
    "baseUrl": https://client-vanilla-assets.s3.amazonaws.com/product-react-assets/assets/,
    "useRemoteAssets": false
  },
  "internationalization": {
    "language": "en"
  },
}

func getPayloadForType(type: String, requestType: String, navParams: NSMutableDictionary?) {
        let serverUrl = NetworkManager.shared.getEngageServerUrl()
        let requestType = requestType
        let requestBodyParams = NSMutableDictionary.init()
        guard let constants = NetworkManager.shared.constants else { return }
 
        requestBodyParams.setValue(requestType, forKey: "type")
        requestBodyParams.setValue("dashboard", forKey: Personetics.PDBctxId)
        requestBodyParams.setValue(constants.protocolVersion, forKey: "protocolVersion")
        requestBodyParams.setValue(constants.appLanguage, forKey: "lang")
        let requestHeaders = NetworkManager.shared.getOptionalReqHeaders()
        NetworkManager.shared.doPostMessage(serverUrl: serverUrl, reqHttpBoday: requestBodyParams,
                                            reqHeaders: requestHeaders, requestType: requestType, onSuccess: { [weak self] result in
            if let payload = result as? String {
                switch type {
                case "story-widget":
                    self?.startStoryWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "inbox":
                    self?.startInboxWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "hub":
                    self?.startHubWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "singleTeaser":
                    self?.startSingleTeaserWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "trackersDashboard":
                    self?.startTrackersDashboardWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "carousel":
                    self?.startCarouselWidget(payload: BankUtility.stringToJsonObject(dataString: payload))
                case "manage-budgets":
                    if let addNavParams = navParams {
                        self?.startBudgetManageWidget(payload: BankUtility
                            .stringToJsonObject(dataString: payload), navParams: addNavParams)
                    } else {
                        self?.startBudgetManageWidget(payload: BankUtility
                            .stringToJsonObject(dataString: payload), navParams: nil)
                    }
                case "subscription-dashboard":
                    if let addNavParams = navParams {
                        self?.startSubscriptionDashboardWidget(payload: BankUtility
                            .stringToJsonObject(dataString: payload), navParams: addNavParams)
                    } else {
                        self?.startSubscriptionDashboardWidget(payload: BankUtility
                            .stringToJsonObject(dataString: payload), navParams: nil)
                    }
                case "actOnboarding":
                    if let addNavParams = navParams{
                        self?.startOnboardingWidget(payload: BankUtility.stringToJsonObject(dataString: payload), navParams: addNavParams)
                    }else{
                        self?.startOnboardingWidget(payload: BankUtility.stringToJsonObject(dataString: payload), navParams:nil)
                    }
                case "actManagement":
                    if let addNavParams = navParams{
                        self?.startManagementWidget(payload: BankUtility.stringToJsonObject(dataString: payload), navParams: addNavParams)
                    }else{
                        self?.startManagementWidget(payload: BankUtility.stringToJsonObject(dataString: payload), navParams:nil)
                    }
                default:
                    break
                }
            } else {
            }
        }, onError: {result in
            print("Get Payload \(requestType) Response ****Failed****: \(String(describing: result)))")
        })
    }

private View populatePersoneticsPriview() {
    JSONObject configurations = new JSONObject();
    JSONObject params = new JSONObject();
    JSONObject assets = new JSONObject();
    JSONObject internationalization = new JSONObject();
    JSONObject theme = new JSONObject();

    try {
        params.put(Personetics.PDB_USER_ID, getResources().getString(R.string.default_user));
        configurations.put(Personetics.PDB_WIDGET_TYPE, "inbox");
        configurations.put(Personetics.PDB_DEVICE_TYPE, "android");
        configurations.put(Personetics.PDB_SELECTOR_STRING, "#root");
        if(getResources().getBoolean(R.bool.is_use_remote_assets_mode)) {
            assets.put(Personetics.PDB_BASEURL, getString(R.string.remote_assets));
            assets.put(Personetics.PDB_USEREMOTEASSETS, true);
        }
        internationalization.put(Personetics.PDB_LANGUAGE, "en");
        theme.put(Personetics.PDB_DARKMODE, false);
        if (getResources().getBoolean(R.bool.is_use_payload)){
            params.put(Personetics.PDB_PAYLOAD,payload);
        }
        configurations.put(Personetics.PDB_PARAMS, params);
        config.put(Personetics.PDB_CONFIGURATIONS, configurations);
        config.put(Personetics.PDB_ASSETS, assets);
        config.put(Personetics.PDB_INTERNATIONALIZATION, internationalization);
        config.put(Personetics.PDB_THEME, theme);

    } catch (JSONException e) {
        e.printStackTrace();
    }
    return  ((MainActivity)getActivity()).getPersonetics().startWidgetWithView(getActivity(), config);
}

The payload variable contains:
payload.put("GET_INBOX_INSIGHTS",jsonResponse);

story-widget Example

Rendering Blocks

The story uses the getInsightDetails API command to retrieve the blocks, and requires instructions from the server to render the blocks. The command (API) can be called by the bank in one of the following ways:

Using Personetics SDK
Independently by injecting the payload property (as part of the startWidget) into the widget.

User Rating and Feedback

The story widget allows user to rate and send feedback on a specific insight. This is done using dedicated API calls. The rating and feedback options appears at the bottom of all insights. The following APIs are used (refer to the Server API document):

getInsightRating
updateInsightRating
updateInsightFeedback

Code Examples

{
	"protocolVersion": "2.6",
   "configurations": {
        "params": {
            "insightId": "dda4db90-76ba-4598-932d-027760271f26",
            "instanceId": "VerifyMailAddress",
          },
        "widgetType": "story-widget",
        "selectorString": "#root",
        "deviceType": "flutter"

    },
    "internationalization": {
        "language": "en"
    }
}

"userId": "ProgramUser_3", // example for userID
    "insightId": "bd165da9-cf04-46da-ad22-1c8844a86454",// example for insightId of a clicked teaser
    "instanceId": "ProgramTracker",", // example for instanceId of a clicked teaser
    "eventType": "teaserClick", 
    "lang": "en", //language
    "clickedTeaser": <elm>  //an element node of the clicked teaser
     teaserId": "perso-teaser-template_bd165da9-cf04-46da-ad22-1c8844a86454" //an id attribute of the clicked teaser
}