Questa pagina spiega come eseguire l'upgrade dalla versione 2 dell'SDK web alla versione 3 dell'SDK web. Se installi l'SDK web per la prima volta, consulta la Guida all'SDK web v3.
Esegui l'upgrade all'SDK web v3
Innanzitutto, individua questo script nel codice sorgente:
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
Quindi, sostituiscilo con quanto segue:
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
Differenze notevoli
Questa sezione descrive le principali differenze tra le versioni 2 e 3 del web SDK.
Inizializzazione
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')
Opzioni
Quando inizializzi l'SDK web, specifichi le opzioni. Questa sezione descrive le differenze tra le versioni 2 e 3 dell'SDK web.
v2
N/A per la v2.
v3
Nella versione 3, le opzioni di inizializzazione sono le stesse dell'SDK Headless.
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[];
};
}
È possibile configurare opzioni aggiuntive con il metodo ccaas.config():
ccaas.config({
disableAttachment: true
})
Opzioni di configurazione disponibili:
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;
}
Metodi
Nella versione 2, sono disponibili alcuni metodi aggiuntivi nel caricatore, ad esempio:
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
Nella versione 3, la UI del widget utilizza un client headless, puoi chiamare tutti i metodi supportati dall'SDK headless.
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
Per saperne di più, consulta la Guida all'SDK web headless.
Eventi
Nella versione 2, puoi ascoltare gli eventi con:
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
Nella versione 3, puoi ascoltare gli eventi con il client headless:
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Consulta la guida all'SDK web headless per scoprire di più sugli eventi.
Personalizzazione del tema
L'SDK web v3 ha un approccio aggiornato alla personalizzazione dei temi. Per saperne di più, consulta Personalizzazione dei temi.