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.

Basic example

The basic example requires only 3 options:

  1. companyId
  2. host
  3. 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:

  1. Include the web SDK widget script.

  2. Prepare an mount element.

  3. Initialize the web SDK with your COMPANY_KEY

  4. 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

  1. Sign into the Contact Center AI Platform portal using an account with administrator permissions.

  2. Go to Settings > Developer Settings.

  3. 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

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

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.

Configuration

The options in new UJET({...}) are designed for the headless client, but there are also options designed for the widget. You can configure using ccaas.config({...}).

For more information see the Supported Features and Theme Customizations sections.

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

  1. Sign into the Contact Center AI Platform portal using an account with administrator permissions.

  2. Go to Settings > Developer Settings.

  3. 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()