Auf dieser Seite wird beschrieben, wie Sie von Web SDK Version 2 auf Web SDK Version 3 aktualisieren. Wenn Sie das Web SDK zum ersten Mal installieren, lesen Sie die Anleitung zum Web SDK Version 3 Guide.
Funktionen des Web SDK Version 3
Hier sind einige Funktionen des Web SDK Version 3, die im Web SDK Version 2 nicht vorhanden sind:
Benutzerdefinierte Formulare: Agents können benutzerdefinierte Datenerhebungsformulare direkt in der Web-Chat-Oberfläche senden. Weitere Informationen finden Sie unter Datenerfassungs formulare.
Herunterladbare Transkripte: Endnutzer können ihre Chat-Transkripte direkt über das Widget herunterladen. Weitere Informationen finden Sie unter Chat-Transkripte mit dem Web SDK und den mobilen SDKs herunterladen.
Erweiterte proaktive Chat-Trigger: Verwenden Sie erweiterte proaktive Chat Trigger, z. B. um die Warteschlangensprache anzugeben oder eine komplexe UND/ODER-Logik für URL-Keywords zu verwenden. Weitere Informationen finden Sie unter Proaktive Web SDK Triggers.
Auf Web SDK Version 3 aktualisieren
Suchen Sie zuerst dieses Skript im Quellcode:
<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
Das Web SDK Version 3 basiert direkt auf dem Headless-Client von UJET. Da die Widget-UI diese Headless-Struktur verwendet, können Sie auf alle zugrunde liegenden Methoden zugreifen und sie aufrufen sowie Ereignisse beobachten, die vom Headless SDK unterstützt werden, indem Sie ccaas.client als Ziel festlegen.
In diesem Abschnitt werden die wichtigsten Unterschiede zwischen Version 2 und 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 initiieren, geben Sie Optionen an. In diesem Abschnitt werden die Unterschiede zwischen Version 2 und 3 des Web SDK beschrieben.
v2
Nicht zutreffend für Version 2.
v3
In Version 3 sind die Initialisierungsoptionen dieselben wie beim 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 verwendet die Widget-UI einen Headless-Client. 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 in der Anleitung zum Headless Web SDK.
Ereignisse
In Version 2 können Sie Ereignisse mit folgenden Methoden beobachten:
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
In Version 3 können Sie Ereignisse mit dem Headless-Client beobachten:
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Weitere Ereignisse finden Sie in der Anleitung zum Headless Web SDK.
Design anpassen
Das Web SDK Version 3 bietet einen aktualisierten Ansatz für die Designanpassung. Weitere Informationen finden Sie unter Design anpassen.