Auf dieser Seite wird beschrieben, wie Sie ein Upgrade von Web-SDK-Version 2 auf Web-SDK-Version 3 durchführen. Wenn Sie das Web-SDK zum ersten Mal installieren, lesen Sie den Leitfaden für das Web-SDK v3.
Auf Web-SDK v3 aktualisieren
Suchen Sie zuerst im Quellcode nach diesem Script:
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
Ersetzen Sie es dann durch Folgendes:
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
Wichtige Unterschiede
In diesem Abschnitt werden die wichtigsten Unterschiede zwischen Version 2 und Version 3 des Web-SDK beschrieben.
Initialisieren
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')
Optionen
Wenn Sie das Web-SDK initialisieren, geben Sie Optionen an. In diesem Abschnitt werden die Unterschiede zwischen Version 2 und Version 3 des Web-SDK beschrieben.
v2
Nicht zutreffend für Version 2.
v3
In Version 3 sind die Initialisierungsoptionen dieselben wie im 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[];
};
}
Zusätzliche Optionen können mit der Methode ccaas.config() konfiguriert werden:
ccaas.config({
disableAttachment: true
})
Verfügbare Konfigurationsoptionen:
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;
}
Methoden
In Version 2 gibt es einige zusätzliche Methoden für den Loader, z. B.:
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
In Version 3 wird für die Widget-Benutzeroberfläche ein Headless-Client verwendet. Sie können alle Methoden aufrufen, die vom Headless SDK unterstützt werden.
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
Weitere Informationen finden Sie im Headless Web SDK-Leitfaden.
Ereignisse
In Version 2 können Sie Ereignisse mit folgenden Methoden erfassen:
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
In Version 3 können Sie Ereignisse mit dem Headless-Client erfassen:
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Weitere Informationen zu Ereignissen finden Sie im Headless Web SDK-Leitfaden.
Design anpassen
Web-SDK v3 bietet eine neue Möglichkeit zur Anpassung von Designs. Weitere Informationen finden Sie unter Thema anpassen.