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 Innovation 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 journey or form step on which you want to add the button to call the Co-browsing automation block.

  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
    var csl = ebs.importClientScript("FTOS.DFP.Cobrowsing")
    if(typeof(__surfly) === 'undefined'){

        $("#cobrowsingButton").on("click", function() {
            csl.createCobrowsingSessionEvent(
                formData,
                window.location,
                sessionStorage.B2CSessionIdParam,
                {
                    settings: {
                        // these settings change depending on what entity your form edits
                        recordId: formData.model.myAccountApplicationid,
                        ProcessorSettings: "CobrowsingQueue",
                        // this is just an example, your processor/flow settings 
                        // can be named however you wish
                    }
                }
            )
        }) 
    }
    else {
    //$("button#cobrowsingButton").hide();
    //if the button isn't hidden, use the other selector  
    $("button#cobrowsingButton")
        $("#cobrowsingButton").hide();
    }
  6. Click the Save and Close button at the top right corner 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.