🤖 Digital First Omnichannel Chat- CXOne Agent

Introduction

This guide will show you step by step how to install Surfly’s custom component on your

NICE inContact CXOne agent.

This component will let you start co-browsing, video chat and screen sharing sessions with patrons using the DFO chat.

Surfly Integration to CXone Agent

To integrate Surfly with your CXone Agent, please follow the official instructions provided by NICE.

👉 Click here to access the NICE Help Page with full integration steps

Surfly Integration to a website

To integrate Surfly with your Live Chat system, you’ll need to append a Surfly-specific code snippet immediately after your regular Chat Snippet.

1. Your Standard Chat Snippet

Below is an example of a typical chat snippet. This should already be included in your website:

CODE

(function (n, u) {
      window.BrandEmbassy = n,
        window[n] = window[n] || function () { (window[n].q = window[n].q || []).push(arguments); }, window[n].u = u,
        e = document.createElement("script"), e.async = 1, e.src = u + "?" + Math.round(Date.now() / 1e3 / 3600),
        document.head.appendChild(e);
    })('brandembassy', 'https://livechat-static-de-na1.niceincontact.com/4/chat.js');

brandembassy('init', 1022, 'chat_4bc8d701-a316-4b5f-bc12-9c45f766dbd0');
brandembassy('getOngoingThreads');

2. Surfly Integration Snippet

Insert the following snippet right after your chat snippet.

Important:

Replace the placeholder customerWidgetKey with your Surfly Widget Key.
To find it: go to Surfly Dashboard → Settings → Integration. Use the Widget Key, not the REST API Key.
The default trigger phrase is #COBROWSE#. You can customize this to suit your workflow.

CODE

brandembassy('setAllowedExternalMessageTypes', ['MESSAGE_SENT', 'MESSAGE_RECEIVED']); window.addEventListener("message", function (event) {       console.log(event, 'listener event');       // Ensure the data structure is as expected       if (event.data && event.data.actionType === "MESSAGE_RECEIVED") {         console.log(event.data.actionType, 'ACTION TYPE');         const messageContent = event.data.action.message;         // Check if the message content is "#COBROWSE#"     if (messageContent === "#COBROWSE#") {       console.log("Cobrowse message received:", event.data);       startCobrowse();     }   } });  function startCobrowse() {   let customerWidgetKey = "134f5fd2ac8842c0a1cd6062818eee74"; //set customer widget key to variable
  window.parent.Surfly.settings.widget_key = customerWidgetKey; //set customer widget key to widget_key high level
  if (window.parent.Surfly.settings.widget_key === customerWidgetKey) {
    // check if it worked to avoid null
    console.log('widget key change correctly', customerWidgetKey);
    Surfly.session().on(
      'session_created',
      function (session, event) {
        console.log("Session created", session, event);
        var surflySessionPin = session.pin;
        console.log("Surfly session pin", surflySessionPin);
        if (surflySessionPin) {
          console.log(document, 'document');
          //document.getElementsByName("reply-box")[0].value = surflySessionPin;
        }
      }
    ).on('session_started', function (session, event) {
      console.log("Session started", session, event);

    }).startLeader();
  }

}