Digital Chat Web SDK

SDK: GitHub

API Reference: GitHub Pages

Sample App: GitHub

NPM Package: npmjs.com

The chat web SDK lets you create your own digital chat application, or add digital chat into an existing web app. It lets you use CXone digital infrastructure in a UI of your choosing. This is a JavaScript-based SDK that supports both LiveChat and Chat Messaging—both synchronous and asynchronous messaging. You can also set up either singleClosed In a single-threaded app, each contact can have only one chat thread. Any interaction they have with your organization takes place in that one chat thread. or multi-threadedClosed In a multi-threaded app, contacts can create as many threads as they want to discuss new topics. These threads can be active at the same time. messaging. This SDK gives you more control over CXone on your website. It helps you avoid certain technical limitations that some websites have. For example, your site may not allow external code, which could prevent the native CXone digital chat from running.

The SDK supports the following features:

  • Digital chat messaging
  • OAuth2.0 for authorization
  • Contact identification and custom fields
  • List of threads and thread recovery
  • Attachments
  • Rich messages
  • Indicators for typing, message seen, and message delivered
  • System messages like case status events or assignment events
  • Queue position events

This SDK is written in TypeScript 4.9+. You must also use a custom application bundler like webpack or Create React App.

SDK Resources

The top of this page or the drop-down below provide links to the various SDK resources.

Your developers can get the SDK from GitHub. The repository has a README that helps the developer get started. It also contains documentation for events and the API reference. The more user-friendly API reference is hosted separately through github.io.

You can also look at the sample application. This lets you try out the chat and look at the correlating source code.

Developers import the SDK as an NPM package. The package entry on npmjs.com contains all the same content and instructions for setting up and building with the SDK.

Key Terms

  • Thread: A conversation within the chat app. The first message sent by either the agent or contactClosed The person interacting with an agent, IVR, or bot in your contact center. begins a thread. Each consecutive message in the conversation is added to the thread. Threads are objects that contain each message. Messages are structured by the author of the message. A threadId identifies an entire conversation, and all messages within a conversation have a message ID. A thread ends when the conversation ends.

  • Single-Thread: An app design where the contact can only have one conversation at a time.

  • Multi-Thread: An app design where the contact can have multiple conversations at a time.

  • Channel: In the context of Digital Experience, channel refers to the type of messaging or the platform used for communication. For example, you could have a WhatsApp real-time messaging channel. The mobile SDK lets you add a chat messaging channel to your mobile app. A channel is created in the CXoneplatform. This determines the settings of the channel along with a channel ID. You use this ID to initiate the chat channel when an app user opens the chat.

  • ChannelId: The ID of the digital chat channel created in the DFO section of CXone. You can find this in the chat channel's settings in CXone (ACDDFOPoints of Contact DigitalChatInitialization & Test).

  • BrandId: This is like a tenantClosed High-level organizational grouping used to manage technical support, billing, and global settings for your CXone environment ID for Digital Experience. It's used to initialize the chat. You can find this in the chat channel's settings in CXone (ACDDFOPoints of Contact DigitalChatInitialization & Test).

  • CustomerId: The unique ID of the chat end user. The SDK creates this ID when the chat is initialized. If you have OAuth set up, this ID stays the same for each contact across all their devices. If you do not have OAuth set up, this ID is different for each device; the ID becomes like a guest login.

  • Region or Environment: The location in the world where your CXone deployment is hosted. This can be: Australia (AU1), Canada (CA1), Europe (EU1), Japan (JP1), North America (NA1), or United Kingdom (UK1). The developer must use the same region where your CXone system is hosted, otherwise the chat connection is rejected.

  • Contact, Customer, and User: These terms all refer to the end-user of the mobile app. The online help typically uses the term contact. In the SDK documentation and code comments, you are likely to see customer and user.

  • CXone: The core platform where you manage and access all the customer experience tools that NICE CXone offers. Depending on which chat features you want to offer in your mobile app, an administrator with the necessary user account permissions must complete several setup tasks in CXone.

  • Digital Experience: The section of CXone where you can manage everything about digital channels.

Before You Start Developing

Consider the following items before building with the mobile SDK:

  • Do you have both an administrator and agent account in CXone? Can an administrator assist you in setting up the necessary features in the CXoneplatform?
  • Do you have existing chat channels, or do you want to create a new one?
  • Do you want to offer single- or multi-threaded conversations?
  • Which types of rich messages do you want to set up? What are some use cases where you can leverage these interactive messages?
  • Will you use proactive actions like pop-ups or welcome messages?