Skip to main contentIBM watsonx 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 watsonx Assistant UI. This page documents the configuration settings needed by web chat to do the integration.

You can find more information about setting up DFO Live Chat on the Nice CXone website. Nice CXone provides its own chat widget for interacting with an agent on their service. It is recommended that you first enable and test their widget to ensure that your account is set up correctly. Once that is working, you can then enable the settings to use web chat as the widget.

Enabling the integration

To enable the integration, you 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 need to include these values in the following web chat configuration object.

The environment is 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 is 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: async (instance) => {
      await 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

You can configure the DFO chat, which ensures only authenticated users can connect to Nice CXone. To enable this functionality, you need an OAuth provider that can provide an authentication code that you make available to DFO. To provide the code, you need to listen for the web chat agent:niceDFO:getAuthCode event. This event has a authCode and optional visitorID property on it, which the listener sets. Web chat 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 can involve a
    // redirect to your authentication or login page so you 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

You can set the name of the customer by using DFO SDK to be visible to the agent as well as the values of custom fields that are available inside of Nice CXone. You can use Web chat 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. The custom fields provided here are case custom fields and not customer card custom fields.

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 is similar to code except you use agent:pre:startChat instead of window:open.

Example
instance.on({
  type: 'agent:pre:startChat',
  handler: (event) => {
    event.preStartChatPayload = {
      customerName: 'Happy customer',
      consumerContact: {
        customFields: [{
          // This must be a valid case field defined in your account or the chat will fail to start.
          ident: 'field-name',
          value: 'field-value';
        }],
      },
    };
  },
});