Upgrade from web SDK version 2 to web SDK version 3

This page explains how to upgrade from web SDK version to 2 web SDK version 3. If you're installing the web SDK for the first time, see Web SDK v3 Guide .

Upgrade to web SDK v3

First, locate this script within your source code:

 <script  
 type 
 = 
 "module" 
  
 src 
 = 
 "https://websdk.ujet.co/v2/loader.js" 
></script>

Then, replace it with the following:

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

Notable differences

This section outlines key differences between version 2 and 3 of the web SDK.

Initialize

v2

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

v3

 var  
 ccas 
  
 = 
  
new  
UJET ({ 
  
 "companyId" 
:  
 "{companyId}" 
,  
 "host" 
:  
 "https://{your_ccaas_host}" 
,  
 "authenticate" 
:  
getAuthToken }) 
//  
v3  
has  
a  
mount  
point
//  
ccaas.mount ( 
HTMLElement  
 | 
  
string ) 
ccaas.mount ( 
 '#ccaas-widget' 
 )

Options

When you initiate the web SDK, you specify options. This section describes the differences between version 2 and 3 of the web SDK.

v2

N/A for v2.

v3

In v3, the initialization options are the same as the Headless SDK.

 interface  
ClientOption  
 { 
  
companyId:  
string ; 
  
authenticate:  
 () 
  
 = 
>  
Promise<TokenResponse> ; 
  
tenant?:  
string ; 
  
host?:  
string ; 
  
lang?:  
string ; 
  
bridge?:  
string ; 
  
cobrowse?:  
 { 
  
enabled:  
boolean ; 
  
template?:  
string ; 
  
messages?:  
CobrowseMessages ; 
  
api?:  
string ; 
  
license?:  
string ; 
  
trustedOrigins?:  
string [] 
 ; 
  
capabilities?:  
string [] 
 ; 
  
registration?:  
boolean ; 
  
redactedViews?:  
string [] 
 ; 
  
unredactedViews?:  
string [] 
 ; 
  
 } 
 ; 
 }

Extra options can be configured with ccaas.config() method:

 ccaas.config ({ 
  
disableAttachment:  
 true 
 })

Available config options:

 interface  
ConfigOptions  
 { 
  
accent?:  
AccentColor ; 
  
logo?:  
string ; 
  
menuKey?:  
string ; 
  
ticketId?:  
string ; 
  
preferredChannel?:  
string ; 
  
disableAttachment?:  
boolean ; 
  
customData?:  
string  
 | 
  
Record<string,  
any> ; 
  
messages?:  
Record<string,  
unknown> ; 
  
reCaptchaSiteKey?:  
string ; 
 }

Methods

In v2, there are a few extra methods on the loader, such as:

 ccaas.createCobrowseCode () 
ccaas.fetchWaitTimes ({ 
id:  
 123 
 })

In v3, the widget UI is using a headless client, you can call all methods that the Headless SDK supports.

 const  
 client 
  
 = 
  
ccaas.client
client.getCompany () 
client.loadOngoingChat ()

See Headless web SDK guide to learn more.

Events

In v2, you can listen to events with:

 ccaas.on ( 
 'chat:update' 
,  
 ( 
chat ) 
  
 = 
>  
 { 
  
console.log ( 
chat ) 
 })

In v3, you can listen to events with the headless client:

 const  
 client 
  
 = 
  
ccaas.client

client.on ( 
 'chat.updated' 
,  
 ( 
chat ) 
  
 = 
>  
 { 
  
console.log ( 
chat ) 
 })

See Headless web SDK guide to learn about more events.

Theme customization

Web SDK v3 has an updated approach to theme customization. For more information, see Theme customization .