Adding Co-browsing to a Digital Journey

The Co-browsing automation block can be added at any step of the customer journey. Follow the steps below to integrate it in a flow:

  1. In FintechOS Studio, create a custom journey to define a button to call the Co-browsing automation block. For information on how to create a custom journey, section Custom Flows.

  2. Go to the form driven form or step on which you want to add the button to call the Co-browsing automation block. Note that you need to add a button with the id “cobrowsingButton” inside the UI editor as well.

  3. Click the Advanced tab.
  4. Click the After Events tab (for Steps, it is displayed by default, being the only tab available).
  5. In the JavaScript field, provide the following code to call the Co-browsing processor:
    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);
    }
  6. Click Save and Close to save your digital journey.
IMPORTANT!  

  • If the journey contains multiple processors, if the Co-browsing session is closed in a step including a processor, then the flow is automatically redirected to the first step containing a processor.

  • After the Co-browsing session ends, the user needs to be redirected to the step in which the session was closed. For this, the journey needs to have a Business Workflow behind it, as well as a custom code for redirecting.

Troubleshooting

  • if ebs.importClientScript does not load in a B2C environment and you get the following error message: "clientScriptLibray not found: FTOS.DFP.Cobrowsing", then use the following workaround:

    • On the form driven flow entity call "formScope.csl = ebs.importClientScript("FTOS.DFP.Cobrowsing".

    • On the button, instead of “csl.createCobrowsingSessionEvent” call “formScope.csl.createCobrowsingSessionEvent”.

  • for recordid, instead of formData.model.myAccountApplicationid, you must add the Id of the entity used for launching the Co-browsing session. The following can also be used: recordId: ebs.getCurrentEntityId().

  • ProcessorSettings value is the name of the file configured after installation here.

  • In the FTOS.DFP.Cobrowsing client script library, at the buildURLFromFormData and buildURLFromCustomAction functions, for obtaining the URL you must take into account if the location.host has proxy or not. The initial code is:

Copy 
location.protocol +
                "//" +
                location.host +
                "/Main" +
                continueToUrl;    

If the environment's URL contains “proxy” or “b2cproxy”, then the following must be added:

Copy 
continueToUrl = location.protocol +
                "//" +
                location.host +
                "/proxy/Main" +
                continueToUrl;
// or
continueToUrl = location.protocol +
                "//" +
                location.host +
                "/b2cproxy/Main" +
                continueToUrl;

  • On the environment, the IPs obtained from this URL must be whitelisted.