Erste Schritte

Mit dem Web-SDK können Sie Contact Center AI Platform-Funktionen (CCAI Platform) in Ihre Webanwendung einbinden. Das Web-SDK basiert auf dem Headless Web-SDK, und stellt alle Headless-Clientmethoden im Web-SDK-Widget zur Verfügung. 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 Implementierungs beispielen auf GitHub.

Einfaches Beispiel

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

  1. companyId
  2. host
  3. Authenticate

In der Widget-Dokumentation finden Sie Informationen zum Abrufen Ihrer Unternehmens-ID und Ihres Hosts.

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:

  1. Fügen Sie das Web-SDK-Widget-Skript ein.

  2. Bereiten Sie ein Einbindungselement vor.

  3. Initialisieren Sie das Web-SDK mit Ihrem COMPANY_KEY.

  4. Initialisieren Sie die Authentifizierung mit Ihrem COMPANY_SECRET über Ihren Back-End-Code.

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

  1. Melden Sie sich im Contact Center AI Platform-Portal mit einem Konto mit Administratorberechtigungen an.

  2. Gehen Sie zu Einstellungen > Entwicklereinstellungen.

  3. Kopieren Sie den Unternehmensschlüssel als COMPANY_KEY.

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

Initialisierung

Anschließend können Sie das CCAI Platform Web-SDK mit der neuen Methode UJET(options) 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 Leitfaden zum Headless Web-SDK.

Authentifizierung

getAuthToken ist eine Funktion, die einen JWT-Signiermechanismus aus Ihrem Back-End 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({...}).

Der folgende Code listet die Attribute zum Konfigurieren des Web-SDK auf:

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 Designanpassungen.

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 des Endnutzers ausgeblendet wird. Fügen Sie dazu das Attribut hideNewConversation mit der 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 Transkript herunterladen während einer Sitzung im Chatfenster des Endnutzers im Menü mit den Chatoptionen ausgeblendet wird. Fügen Sie dazu das Attribut hideDownloadTranscriptOptions mit der 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 mit der Methode ccaas.config ein. Weitere Informationen finden Sie unter SDK konfigurieren.

Widget einbinden

Zu Beginn muss 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')

Im Leitfaden zum Headless Web-SDK erfahren Sie, wie Sie eigene Chat- und Anruf-Widgets erstellen.

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

  1. Melden Sie sich im Contact Center AI Platform-Portal mit einem Konto mit Administratorberechtigungen an.

  2. Gehen Sie zu Einstellungen > Entwicklereinstellungen.

  3. Kopieren Sie den Unternehmensschlüssel als COMPANY_KEY.

Wenn Ihr Portal https://{your_ccaas_host} ist, können Sie die Unternehmensinformationen so abrufen:

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