Getting started

The Contact Center AI Platform (CCAI Platform) web SDK version 3 is built on the headless web SDK , so all methods that are available on headless client are also accessible within the widget.

For help installing the web SDK, see the implementation examples in GitHub.

Basic example

The basic example requires only 3 options:

companyId
host
Authenticate

Follow widget documentation to get your company ID and host.

Full HTML

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Custom data example

The custom data example is similar to the basic example. You need to configure the custom data with .config({ customData }) .

Full HTML

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Preparation

To get the Contact Center AI Platform Web SDK up and running, do the following:

Include the web SDK widget script.
Prepare a mount element.
Initialize the web SDK with your COMPANY_KEY

Initialize authentication with your COMPANY_SECRET using your backend code

 <!--  
an  
empty  
element  
to  
mount  
the  
web  
SDK  
-->
<div  
 id 
 = 
 "ccaas-widget" 
></div>

<script  
 src 
 = 
 "https://{your_ccaas_host}web-sdk/v3/widget.js" 
></script>
<script>  
//  
const  
 ccaas 
  
 = 
  
new  
UJET ({ 
  
...  
 }) 
</script>

Get company key

Sign into the Contact Center AI Platform portal using an account with administrator permissions.
Go to Settings > Developer Settings.
Copy the Company Key as COMPANY_KEY .

You can also get the company secret here. The secret is used in your backend server to create an authentication token endpoint. For more information see the Authenticate section.

Initializing

You can then initialize the CCAI Platform web SDK with the new UJET(options) method. If your portal is https://{your_ccaas_host} , then the host is

  h 
 tt 
 ps 
 : 
 //{your_ccaas_host}: 
 co 
 nst 
  
 ccaas 
  
 = 
  
 ne 
 w 
  
 UJET( 
 { 
  
 compa 
 n 
 yId 
 : 
  
 "{COMPANY_KEY}" 
 , 
  
 hos 
 t 
 : 
  
 "https://{your_ccaas_host}" 
 , 
  
 au 
 t 
 he 
 nt 
 ica 
 te 
 : 
  
 ge 
 t 
 Au 
 t 
 hToke 
 n 
 , 
 } 
 );

The options are the same as the Headless web SDK Guide .

Authentication

The getAuthToken is a function that calls upon a JWT signing mechanism from your backend:

 async  
 function 
  
getAuthToken () 
  
 { 
  
//  
YOU  
SHOULD  
HAVE  
THIS  
KIND  
OF  
API  
ON  
YOUR  
SERVER  
const  
 resp 
  
 = 
  
await  
fetch ( 
 '/auth/token' 
 ) 
  
const  
 data 
  
 = 
  
await  
resp.json () 
  
 return 
  
 { 
  
token:  
data.token  
 } 
 }

For more information see the Authenticate section.

Configure the SDK

Configure the web SDK using ccaas.config({...}) .

The following code lists the properties for configuring the web SDK:

  export 
  
interface  
ConfigOptions  
 { 
  
name?:  
string  
accent?:  
 'default' 
  
 | 
  
 'blue' 
  
 | 
  
 'green' 
  
 | 
  
 'purple' 
  
 | 
  
 'orange' 
  
 | 
  
 'yellow' 
  
 | 
  
 'gold' 
  
 | 
  
 'red' 
  
logo?:  
string  
menuKey?:  
string  
ticketId?:  
string  
preferredChannel?:  
string  
disableAttachment?:  
boolean  
customData?:  
Record<string,  
any>  
signedCustomData?:  
string  
messages?:  
Record<string,  
unknown>  
disableLauncher?:  
boolean  
launcherOpenIcon?:  
string  
launcherCloseIcon?:  
string  
launcherLoadingIcon?:  
string  
optionsMenuIcon?:  
string  
confirmationIcon?:  
string  
enableMuteChat?:  
boolean  
hideNewConversation?:  
boolean  
hideDownloadTranscriptOptions?:  
boolean  
hideDownloadTranscriptPostChat?:  
boolean }

For more information, see Supported Features and Theme Customizations .

Hide the button to start a new conversation at the end of a session

You can configure the web SDK to hide the Start a new conversationbutton in an end-user's chat window at the end of a session. To do this, include the hideNewConversation property with the ccaas.config method. For more information, see Configure the SDK .

Hide the command to download a transcript during a session

You can configure the web SDK to hide the Download transcriptcommand from the chat options menu in the end-user's chat window during a session. To do this, include the hideDownloadTranscriptOptions property with the ccaas.config method. For more information, see Configure the SDK .

Hide the button to download a transcript at the end of a session

You can configure the web SDK to hide the Download transcriptbutton in the end-user's chat window at the end of a session. To do this, include the hideDownloadTranscriptPostChat property with the ccaas.config method. For more information, see Configure the SDK .

Mount the widget

It is required to prepare an empty element at the beginning:

 < div 
  
 id 
 = 
 "ccaas-widget" 
>< / 
 div 
>

Then, we can mount the widget into this element:

  ccaas 
 . 
 mount 
 ( 
 '#ccaas-widget' 
 )

Use the Headless web SDK guide to create your own chat and call widgets.

Install

You can install the package with npm:

  npm 
  
 install 
  
 @ 
 ujet 
 / 
 websdk 
 - 
 headless 
  
 -- 
 save

Or, you can use the script hosted on your CCAI Platform instance:

 <script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

Integrate the SDK

Sign into the Contact Center AI Platform portal using an account with administrator permissions.
Go to Settings > Developer Settings.
Copy the company key as COMPANY_KEY .

If your portal is https://{your_ccaas_host} , here is an example to get the company information:

  import 
  
 { 
  
 Client 
  
 } 
  
 from 
  
 "@ujet/websdk-headless" 
 async 
  
 function 
  
 authenticate 
 () 
  
 { 
  
 const 
  
 resp 
  
 = 
  
 await 
  
 fetch 
 ( 
 "/your-auth-endpoint" 
 ) 
  
 const 
  
 data 
  
 = 
  
 await 
  
 resp 
 . 
 json 
 () 
  
 return 
  
 { 
  
 token 
 : 
  
 data 
 . 
 token 
  
 } 
 } 
 const 
  
 client 
  
 = 
  
 new 
  
 Client 
 ({ 
  
 companyId 
 : 
  
 "COMPANY_KEY" 
 , 
  
 host 
 : 
  
 "https://{your_ccaas_host}" 
 , 
  
 authenticate 
 : 
  
 authenticate 
 , 
 }) 
 const 
  
 company 
  
 = 
  
 await 
  
 client 
 . 
 getCompany 
 ()