Erste Schritte

Mit dem Web-SDK können Sie Funktionen der Contact Center AI Platform (CCAI Platform) in Ihre Webanwendung einbinden. Das Web-SDK basiert auf dem Headless-Web-SDK. Daher sind alle Headless-Client-Methoden im Web-SDK-Widget verfügbar. Auf dieser Seite erfahren Sie, wie Sie das Web-SDK einbinden, initialisieren und authentifizieren. Außerdem wird erklärt, wie Sie Schaltflächen und Befehle zum Starten neuer Unterhaltungen und zum Herunterladen von Transkripten ausblenden.

Hilfe bei der Installation des Web-SDK finden Sie in den Implementierungsbeispielen auf GitHub.

Einfaches Beispiel

Für das einfache Beispiel sind nur drei Optionen erforderlich:

companyId
host
Authenticate

Folgen Sie der Widget-Dokumentation, um Ihre Unternehmens-ID und Ihren Host zu erhalten.

Vollständiges 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>

Beispiel für benutzerdefinierte Daten

Das Beispiel für benutzerdefinierte Daten ähnelt dem einfachen Beispiel. Sie müssen die benutzerdefinierten Daten mit .config({ customData }) konfigurieren.

Vollständiges 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>

Vorbereitung

So richten Sie das Contact Center AI Platform Web SDK ein:

Fügen Sie das Web-SDK-Widget-Skript ein.
Bereiten Sie ein Bereitstellungselement vor.
Web-SDK mit Ihrer COMPANY_KEY initialisieren

Authentifizierung mit Ihrem COMPANY_SECRET über Ihren Backend-Code initialisieren

<!-- 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>

Unternehmensschlüssel abrufen

Melden Sie sich mit einem Konto mit Administratorberechtigungen im Contact Center AI Platform-Portal an.
Gehen Sie zu Einstellungen > Entwicklereinstellungen.
Kopieren Sie den Unternehmensschlüssel als COMPANY_KEY.

Hier können Sie auch das Unternehmensgeheimnis abrufen. Das Secret wird auf Ihrem Backend-Server verwendet, um einen Authentifizierungstoken-Endpunkt zu erstellen. Weitere Informationen finden Sie im Abschnitt Authentifizieren.

Wird initialisiert

Anschließend können Sie das CCAI Platform Web SDK mit der neuen UJET(options)-Methode initialisieren. Wenn Ihr Portal https://{your_ccaas_host} ist, lautet der Host

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

Die Optionen sind dieselben wie im Headless Web SDK-Leitfaden.

Authentifizierung

getAuthToken ist eine Funktion, die einen JWT-Signierungsmechanismus aus Ihrem Backend aufruft:

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 }
}

Weitere Informationen finden Sie im Abschnitt Authentifizieren.

SDK konfigurieren

Konfigurieren Sie das Web-SDK mit ccaas.config({...}).

Im folgenden Code sind die Attribute für die Konfiguration des Web-SDK aufgeführt:

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

Weitere Informationen finden Sie unter Unterstützte Funktionen und Themenanpassungen.

Schaltfläche zum Starten einer neuen Unterhaltung am Ende einer Sitzung ausblenden

Sie können das Web-SDK so konfigurieren, dass die Schaltfläche Neue Unterhaltung starten am Ende einer Sitzung im Chatfenster eines Endnutzers ausgeblendet wird. Fügen Sie dazu das Attribut hideNewConversation in die Methode ccaas.config ein. Weitere Informationen finden Sie unter SDK konfigurieren.

Befehl zum Herunterladen eines Transkripts während einer Sitzung ausblenden

Sie können das Web-SDK so konfigurieren, dass der Befehl Download transcript (Transkript herunterladen) während einer Sitzung im Chatfenster des Endnutzers im Menü mit den Chatoptionen ausgeblendet wird. Fügen Sie dazu das Attribut hideDownloadTranscriptOptions in die Methode ccaas.config ein. Weitere Informationen finden Sie unter SDK konfigurieren.

Schaltfläche zum Herunterladen eines Transkripts am Ende einer Sitzung ausblenden

Sie können das Web-SDK so konfigurieren, dass die Schaltfläche Transkript herunterladen am Ende einer Sitzung im Chatfenster des Endnutzers ausgeblendet wird. Fügen Sie dazu das Attribut hideDownloadTranscriptPostChat in die Methode ccaas.config ein. Weitere Informationen finden Sie unter SDK konfigurieren.

Widget anbringen

Dazu muss am Anfang ein leeres Element vorbereitet werden:

<div id="ccaas-widget"></div>

Anschließend können wir das Widget in dieses Element einbinden:

ccaas.mount('#ccaas-widget')

Headless Web SDK-Leitfaden

Installieren

Sie können das Paket mit npm installieren:

npm install @ujet/websdk-headless --save

Alternativ können Sie das Skript verwenden, das auf Ihrer CCAI Platform-Instanz gehostet wird:

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

<script>
  // const client = new HeadlessClient(...)
</script>

SDK einbinden

Melden Sie sich mit einem Konto mit Administratorberechtigungen im Contact Center AI Platform-Portal an.
Gehen Sie zu Einstellungen > Entwicklereinstellungen.
Kopieren Sie den Unternehmensschlüssel als COMPANY_KEY.

Wenn Ihr Portal https://{your_ccaas_host} ist, finden Sie hier ein Beispiel für den Abruf der Unternehmensinformationen:

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()

Erste Schritte Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Einfaches Beispiel

Vollständiges HTML

Beispiel für benutzerdefinierte Daten

Vollständiges HTML

Vorbereitung

Unternehmensschlüssel abrufen

Wird initialisiert

Authentifizierung

SDK konfigurieren

Schaltfläche zum Starten einer neuen Unterhaltung am Ende einer Sitzung ausblenden

Befehl zum Herunterladen eines Transkripts während einer Sitzung ausblenden

Schaltfläche zum Herunterladen eines Transkripts am Ende einer Sitzung ausblenden

Widget anbringen

Installieren

SDK einbinden

Erste Schritte