Skip to main contentWatson Assistant web chat

Nice CXone

Nice CXone Digital First Omnichannel

Overview

Web chat comes with a built-in integration to the Nice CXone Digital First Omnichannel (DFO) Live Chat messaging channel. This integration currently only supports client-side configuration and is not available inside the Watson Assistant UI. This page documents the configuration settings needed by web chat to enable the integration.

You can find more information about setting up DFO Live Chat on the Nice CXone website.

Enabling the integration

To enable the integration you will need know your DFO channel ID, brand ID and environment. These values can be found in the embed code Nice CXone provides you for embedding the chat on your website. You will need to include these values in the web chat configuration object as shown below.

The environment will be one of AU1, CA1, EU1, JP1, NA1 or UK1. You can find this value from the script URL in the embed code. For example, if your script URL is https://livechat-static-de-na1.niceincontact.com/4/chat.js (which contains "na1"), your environment will be NA1.

The brand ID and channel ID can be found in the "init" call in the embed code. For example, if your embed code contains brandembassy('init', 1234, 'chat_12345678-1234-1234-1234-123456789012'), then your brand ID is 1234 and your channel ID is 'chat_12345678-1234-1234-1234-123456789012'.

<script>
  window.watsonAssistantChatOptions = {
    integrationID: 'YOUR_INTEGRATION_ID',
    region: 'YOUR_REGION',
    serviceInstanceID: 'YOUR_SERVICE_INSTANCE_ID',

    serviceDesk: {
      // This will enable the DFO integration.
      integrationType: 'nicedfo',
      niceDFO: {
        environment: 'NA1',
        channelID: 'YOUR_CHANNEL_ID',
        brandID: 1234, // Note that this is a number and not a string.
      },
    },

    onLoad: function(instance) {
      instance.render();
    }
  };
  
  setTimeout(function(){const t=document.createElement('script');t.src='https://web-chat.global.assistant.watson.appdomain.cloud/versions/' + (window.watsonAssistantChatOptions.clientVersion || 'latest') + '/WatsonAssistantChatEntry.js';document.head.appendChild(t);});
</script>

Authenticated users

The DFO chat allows you enable configuration that ensures only authenticated users may connect to Nice CXone. To enable this functionality, you will need an OAuth provider that can provide an authentication code that you will make available to DFO. To provide the code, you will need to listen for the web chat agent:niceDFO:getAuthCode event. This event has a authCode and optional visitorID property on it which should be set by the listener. Web chat will then pass these values to DFO when it calls the DFO authorize function.

You can read about the setting up authentication in the DFO documentation.

Example

instance.on({
  type: 'agent:niceDFO:getAuthCode',
  handler: (event) => {
    // Here you will add your code to call your oauth provider to get an authentication code. This may involve a
    // redirect to your authentication or login page so you may need to provide a redirect URL to get back to this
    // page.
    const authCode = await someFunctionToGetAuthCode();
    
    // Set the auth code on the event which web chat will then pass to DFO.
    event.authCode = authCode;
  },
});

Customer name and custom fields

The DFO SDK allows you to set the name of the customer visible to the agent as well as the values of custom fields that may be available inside of Nice CXone. Web chat allows you to provide these values before a chat has started by using the agent:pre:startChat event. To provide custom fields, set the preStartChatPayload.consumerContact.customFields property of the event. To provide the customer name, set the preStartChatPayload.customerName property of the event.

You can use an agent pre-chat form to gather any custom data you want to send to DFO before the chat begins. The event documentation includes a basic example for how to do this. You can also view our tutorial for creating pre and post-chat forms based on the window open and closed events. Handling a pre or post-chat event with an agent will be similar code except you'll use agent:pre:startChat instead of window:open.

Example
instance.on({
  type: 'agent:pre:startChat',
  handler: (event) => {
    event.preStartChatPayload = {
      customerName: 'Happy customer',
      consumerContact: {
        customFields: [{
          ident: 'field-name',
          value: 'field-value';
        }],
      },
    };
  },
});