Installing Co-browsing

1 Install the SysPacks

Download the SySDigitalSolutionPackages.zip archive.
Unzip the archive and follow the instructions from the SysPacks Installation page.

NOTE Make sure the following packages are deployed:

10_01 FTOS Cognitive Processor OperatorDM - v20.2.11x1
10_02 FTOS Cognitive Processor OperatorScripts - 20.2.11x1
100 DFP Common Scripts - 21.2.11x0

Also, make sure that the DCS vault for Co-browsing has been configured to accommodate your FTOS instance and install the latest dcs-sdk vanilla.

NOTE We recommend that you load sdk/dcs-cobrowsing-component.js and sdk/dcs-cobrowsing-component.js.map by placing them in the custom-on-demand folder, and import them using the injectScriptAsync method. See example below:

Copy

if (window.CobrowsingComponent == undefined) {
      var slash = ebs.getBaseUrl().slice(-1) === "/" ? "" : "/";
      await ebs.injectScriptAsync(
        ebs.getBaseUrl() +
          slash +
          "custom-on-demand/components/dcs-cobrowsing-component.js"
      );
  }

2 Set up the Co-browsing Service Subscription Key

In order to configure the processors to make the requests correctly to DCS, you must add in web.config / FTOS Vault (Portal / B2C - depending where the server side script is executing) the following keys:

Key Path	Key	Value
kv/<environment>/<FintechOS Portal instance>/app-settings	FTOSServiceCobrowsingEndpoint	DCS web app endpoint URL provided by FintechOS.
kv/<environment>/<FintechOS Portal instance>/app-settings	FTOSServicesCobrowsingAppId	ID for the Surfly Co-browsing service subscription.
kv/<environment>/<FintechOS Portal instance>/app-settings	FTOSServicesCobrowsingSubscriptionKey	Subscription key for the Surfly Co-browsing service.
kv/<environment>/<FintechOS Portal instance>/app-settings	FTOSServicesCobrowsingenableMock	Optional and false by default. Set this to true and the processor will use mock functionalities starting with Syspack 22.1.4003.

IMPORTANT!
Make sure that the Vault configurations are done and that the Webhook is created.

The configuration required by Co-browsing consists of the following:

Serilog Configurations
EbsSqlServer: Connection string pointing to the database where configurations are stored.

To correctly identify the sub-account configuration, Co-browsing requires an extra configuration to be made. This helps retrieve the Surfly Api Key based on the subscription key. For this, an entry in the FintechOS management instance, the ApiKeyRelation entity has to be edited accordingly, similar to the image below:

Field	Description
ApiTypeId	The ID type. It needs to be Cobrowsing.
Name	The name given session name. Must be unique.
SubscriptionKey	Represent the display name of the given subscription key. Must be different from Name.
ApiKey	The API key to be sent to the Co-browsing session.

3 Set up the Processor Settings

Configure the following ProcessorSetting:

Copy

{
    "CustomUI": "",
    "SourceEntityName": "FTOS_BARET_AccountApplication",
    "QueueParameters": [
        {
            "ParamName": "Name",
            "ParamValue": "VideoQueue",
        }
    ]
}

SourceEntityName is the entity from which the Co-browsing session is initiated.
QueueParameters, the ParamValue is the queue value item of the Co-browsing session.

In the exposed journey, on the steps where you’d like to expose start sessions, add the following snippet of code in the After-generate section of the step (note that you need to add a button with the id cobrowsingButton inside the UI editor as well):

Copy

if (typeof dcs !== 'undefined'){
    var loggingService = dcs.common.EventsCommunicationService.getInstance();
    loggingService.listenForEvents(saveSDKLogs);
}

if(typeof(__surfly) == 'undefined'){
    var csl = ebs.importClientScript("FTOS.DFP.Cobrowsing")
    console.log("sessionStorage.B2CSessionIdParam", sessionStorage.B2CSessionIdParam);
    $("#cobrowsingButton").on("click", function() {
        csl.createCobrowsingSessionEvent(
            {
                id: formData.id,
                entityName: formData.entityName,
                entityId: formData.entityId,
                formName: formData.formName,
                pageNo: formData.pageNo
            },
            window.location,
            sessionStorage.B2CSessionIdParam,
            {
                settings: {
                    recordId: formData.model.FTOS_Test_Processorsid,
                    ProcessorSettings: "Test_Processor_CobrowsingSettings"
                }
            }
        )
    }) 
}
else {
    $("#cobrowsingButton").hide();
    
}

function saveSDKLogs(data){
    // save browser info in entity
    if (data.load.message === 'Cobrowsing was initiated with success.'){
        // save browser info in entity: send correct id
        data.id = formData.model.FTOS_Test_Processorsid;
        ebs.callActionByName("FTOS_DFP_SaveInfo_Endpoint", data);
    }
    // set logLevel to "error" to log only errors
    var logLevel = "debug";
    if (data.load.type !== 'error' && logLevel === 'error') {
        return;
    };
    ebs.callActionByName("FTOS_DFP_SDK_Log_Endpoint", data);
}