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 an mount element.
-
Initialize the web SDK with your
COMPANY_KEY -
Initialize authentication with your
COMPANY_SECRETusing 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.
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
-
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
()
