Installationsanleitung für das Web-SDK

Auf dieser Seite wird beschrieben, wie Sie das Web-SDK für die Contact Center AI Platform (CCAI Platform) installieren und verwenden. Um Ihnen den Einstieg zu erleichtern, empfiehlt Google, unsere Beispieldateien für Web-SDK Version 2 herunterzuladen und zu verwenden.

Hinweise

  1. Fügen Sie den CCAI Platform Web SDK-Loader in Ihren Webclient ein.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. Initialisieren Sie das CCAI Platform Web-SDK mit Ihrem COMPANY_KEY.

  3. Initialisieren Sie die Authentifizierung mit Ihrem COMPANY_SECRET über Ihren Backend-Code.

Installationsworkflow

Installationsworkflow

Jetzt starten

Die folgenden Abschnitte enthalten Informationen zum Einstieg in das CCAI Platform Web SDK.

Web-SDK initialisieren

Sie können das Web-SDK mit Ihrem Unternehmensschlüssel initialisieren.

Unternehmensschlüssel abrufen

So erhalten Sie Ihren Unternehmensschlüssel:

  1. Melden Sie sich mit Administratoranmeldedaten im CCAI Platform-Portal an.

  2. Klicken Sie auf  Menü und dann auf Einstellungen > Entwicklereinstellungen.

  3. Rufen Sie den Bereich Unternehmensschlüssel und geheimer Code auf und speichern Sie den Code im Feld Unternehmensschlüssel.

Anschließend können Sie das Web-SDK mit der Methode UJET(config) und dem Ereignis ujet.on('created', function) initialisieren. Geben Sie den Host Ihrer CCAI Platform-Instanz an, z. B. myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

Alternativ können Sie die Authentifizierungsoption ohne erstelltes Ereignis verwenden:

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

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

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

Dabei ruft fetch() einen JWT-Signierungsmechanismus aus Ihrem Backend auf. Weitere Informationen finden Sie in der Mozilla Fetch API.

Web-SDK für die gemeinsame Navigation konfigurieren

Die gemeinsame Navigation ist eine optionale Funktion, mit der ein Kundenservicemitarbeiter den Bildschirm eines Endnutzers sehen und ihn optional steuern kann. Wenn Sie die gemeinsame Browsersitzung verwenden möchten, müssen Sie bei der SDK-Initialisierung die Domain und den Lizenzschlüssel Ihrer CCAI Platform-Instanz angeben.

So konfigurieren Sie das Web-SDK für die gemeinsame Navigation:

  1. So rufen Sie die Co-Browse-Domain und den Lizenzschlüssel Ihrer CCAI Platform-Instanz ab:

    1. Melden Sie sich mit Administratoranmeldedaten im CCAI Platform-Portal an.

    2. Klicken Sie auf  Menü und dann auf Einstellungen > Entwicklereinstellungen.

    3. Rufen Sie den Bereich Gemeinsames Surfen auf und klicken Sie auf die Ein/Aus-Schaltfläche, um die Position „Ein“ festzulegen.

    4. Speichern Sie die Werte in den Feldern Co-browse Domain (Domain für gemeinsame Browsersitzungen) und License Key (Lizenzschlüssel).

  2. Wenn Sie die Co-Browse-Domain und den Lizenzschlüssel während der SDK-Initialisierung angeben möchten, fügen Sie den folgenden Code ein, wenn Sie das Web-SDK initialisieren:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

    Ersetzen Sie Folgendes:

    • LICENSE_KEY: Der Lizenzschlüssel, den Sie im vorherigen Schritt gespeichert haben

    • CO-BROWSE_DOMAIN: Die Co-Browse-Domain, die Sie im vorherigen Schritt gespeichert haben.

Weitere Informationen finden Sie unter Gemeinsames Surfen einrichten.

Authentifizierung mit Ihrem Unternehmensgeheimnis initialisieren

Die Funktion getAuthToken() sollte Ihre API aufrufen und Ihre Nutzlast mit Ihrem COMPANY_SECRET codieren.

Hier ist ein Beispiel für die JWT-Signierung mit ExpressJS:

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

Sie können einen beliebigen Backend-Dienst verwenden.

Content Security Policy

Wenn Ihr Produktionsserver eine Content Security Policy hat, fügen Sie https://websdk.ujet.co/ in Ihre script-src und frame-src ein.

Support für Internet Explorer 11

Zur Unterstützung von Internet Explorer wird in unserem Code „babel-polyfill“ verwendet. Wenn auf Ihrer Website auch babel-polyfill verwendet wird, importieren Sie es nicht in das Web-SDK, da die Verwendung derselben Bibliothek global und im Web-SDK eine Ausnahme verursachen kann. Bevor Sie das Paket importieren, empfehlen wir, Code hinzuzufügen, um dies zu prüfen und zu verhindern.

Nutzer im Blick behalten

Im vorherigen Beispiel werden Nutzer nicht erfasst. Wenn Sie wiederkehrende Nutzer in Ihrem CRM identifizieren und vorgefertigte Antworten mit den Informationen der Nutzer verwenden möchten, müssen Sie den Nutzern Kennungen hinzufügen.

Dazu müssen Sie an den folgenden Stellen Kennungen hinzufügen:

  1. An das Backend übergeben in getAuthToken()

    function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token', {
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({
      payload: {
        identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
        name: 'Test user',
        email: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

  2. Nutzlast beim Codieren des JWT hinzufügen

    const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = req.body.payload
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

  3. Zusätzliche Optionen in authentication() hinzufügen

    new UJET({
  // ...
  authenticate: function() {
    return getAuthToken().then({ token } => {
      return {
        token: token,
        user: {
          identifier: YOUR_UNIQUE_USER_ID,
          name: 'Test user' //optional,
          email: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

Weiterleitung an externen Chatbot

Wenn Sie einen Chat vom virtuellen Kundenservicemitarbeiter an den Kundenservicemitarbeiter übertragen, können Sie die Begrüßungsnachricht überschreiben und die Transkripte an den Kundenservicemitarbeiter weiterleiten, indem Sie das Feld „external_chat_transfer“ mit den benutzerdefinierten Daten füllen. Die greeting_override unterstützt die Markdown-Formatierung.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Chatten mit nicht signierten benutzerdefinierten Daten

Wenn ein Chat gestartet wird, können Sie benutzerdefinierte Daten mit dem Chat-Objekt übergeben. Benutzerdefinierte Daten können das Betriebssystem, die Versionsnummer, der Standort oder andere Daten sein, die für den Chat relevant sein könnten. Diese Daten sind nicht verschlüsselt und sollten daher keine personenidentifizierbaren Informationen enthalten.

Sie können diese benutzerdefinierten Daten auch an einen virtuellen Agenten übergeben. Weitere Informationen finden Sie unter Virtuelle Agents.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

Das benutzerdefinierte Datenformat ähnelt JSON. Jedes Datenfeld enthält einen Schlüssel, ein Label und einen Wert. Hier ein Beispiel:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

In diesem Beispiel sind k1 und k2 Schlüssel. label ist ein Label auf einer CRM-Seite und value der Wert des Labels.

Anzeige benutzerdefinierter Daten verhindern

Sie können die Eigenschaft invisible_to_agent mit einem customData-Objekt verwenden, um zu verhindern, dass signierte oder nicht signierte benutzerdefinierte Daten im Agent-Adapter angezeigt werden. Im folgenden Beispiel wird die Version im Agent-Adapter angezeigt, die Plattform jedoch nicht.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Wenn Sie die Property "invisible_to_agent" : true in ein benutzerdefiniertes Datenobjekt einfügen, können Sie mit dem folgenden Verhalten rechnen:

  • Die benutzerdefinierten Daten sind in der Datei mit Sitzungsmetadaten enthalten.
  • Die benutzerdefinierten Daten sind nicht in CRM-Datensätzen enthalten.

Weitere Informationen finden Sie unter Sitzungsdaten im Agent-Adapter ansehen.

Reservierte Daten-Properties

Sie können reservierte Dateneigenschaften als signierte benutzerdefinierte Daten an die Contact Center AI Platform (CCAI Platform) senden, wenn eine Sitzung beginnt. Weitere Informationen finden Sie unter Reservierte Datenattribute senden.

Im Folgenden finden Sie ein Beispiel für reservierte Datenattribute in benutzerdefinierten Daten:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

Ersetzen Sie Folgendes:

  • VERIFIED_CUSTOMER_BOOLEAN: „True“, wenn Sie diesen Endnutzer als legitimen Kunden betrachten.
  • VERIFIED_BAD_ACTOR_BOOLEAN: „True“, wenn Sie diesen Endnutzer als potenziell böswilligen Akteur betrachten.
  • REPEAT_CUSTOMER_BOOLEAN: „True“, wenn Sie festgestellt haben, dass dieser Endnutzer Ihr Contact Center bereits kontaktiert hat.

Anhänge deaktivieren

Mit der Option disableAttachment können Sie verhindern, dass Nutzer Anhänge hochladen:

new UJET({
// ...
  disableAttachment: true
});

Bei disableAttachment: true wird im Chateingabebereich kein Anhangssymbol angezeigt und Nutzer können keine Dateien in den Nachrichtenbereich ziehen.

Chat-Ablenkung

Wenn keine Kundenservicemitarbeiter verfügbar sind, können Sie Optionen für die automatische Verarbeitung dieser Situation für Web- und mobile Chats angeben.

Optionen für die Chat-Ablenkung finden Sie im CCAI Platform-Portal unter Einstellungen>Chat>Web- und mobile Ablenkung.

Ablenkung nach Börsenschluss

Die Weiterleitung außerhalb der Geschäftszeiten bezieht sich auf das Contactcenter oder die Warteschlange außerhalb der Betriebszeiten. So aktivieren Sie die Weiterleitung außerhalb der Geschäftszeiten:

  1. Im CCAI Platform-Portal unter Einstellungen > Chat > Web- und mobile Weiterleitung.

  2. Wenn Anrufumleitung außerhalb der Geschäftszeiten deaktiviert ist, kann sie durch Auswahl der Option Anrufumleitung außerhalb der Geschäftszeiten aktiviert werden.

  3. Ändern Sie die Option Übertragungen zulassen, um Übertragungen an Warteschlangen außerhalb der Geschäftszeiten zu ermöglichen. Das hat folgende Auswirkungen:

    • Agents können die folgenden Warteschlangen im Agent-Adapter als Optionen für die Weiterleitung sehen:

      • Alle Warteschlangen während der Betriebszeiten

      • Alle Warteschlangen, die außerhalb der Geschäftszeiten liegen, bei denen keine Umleitung aktiviert ist und aktive, angemeldete Kundenservicemitarbeiter

      • Alle Warteschlangen, die nach Feierabend mit einem zugewiesenen virtuellen Agent im 24‑Stunden-Verfügbarkeitsmodus aktiv sind

    • Kundenservicemitarbeiter können die folgenden Warteschlangentypen nicht sehen:

      • Alle Warteschlangen, die nach Feierabend mit aktivierter Weiterleitung nach Feierabend sind

      • Alle Warteschlangen, die außerhalb der Geschäftszeiten liegen und denen ein virtueller Kundenservicemitarbeiter zugewiesen ist, der auf die Geschäftszeiten der Warteschlange beschränkt ist

Ablenkung aufgrund von Überlastung

Die Überlastungsabweichung ist spezifisch für die aktuelle Agentenkapazität und die aktuelle Wartezeit für die Warteschlange, der die Sitzung zugewiesen ist. So aktivieren Sie diese Option:

  1. Im Contact Center AI Platform-Portal unter Einstellungen > Chat > Web und Mobil > Weiterleitung.

  2. Wenn Überlastungsumleitung deaktiviert ist, wählen Sie den Schalter Überlastungsumleitung aus, um die Funktion zu aktivieren.

  3. Legen Sie die Wartezeit in Minuten fest, nach der sich der Status der Warteschlange in „Überlastet“ ändert.

    Mit dieser Einstellung für den Zeitgrenzwert wird auch die Häufigkeit festgelegt, mit der Endnutzern die Meldung zur Überlastung angezeigt wird.

Optionen für die Umleitung

Es ist möglich, die Optionen anzugeben, die dem Endnutzer bei der Umleitung zur Verfügung stehen.

E-Mail

Wenn die E‑Mail-Option aktiviert ist, kann der Endnutzer zur E‑Mail weitergeleitet werden. Wenn der Endnutzer nach Feierabend eine Web- oder mobile Chatsitzung startet, wird er gefragt, ob er eine E-Mail verfassen möchte.

Das spezifische Verhalten ist wie folgt:

  • Mobilgeräte:Wenn die E-Mail-Weiterleitung aktiviert ist und der Schwellenwert für die geschätzte Wartezeit erreicht wurde, wird der Endnutzer zur Standard-E-Mail-App weitergeleitet, wenn er auf die Chat-Option tippt. Die App-Version und die iOS-/Android-Version werden automatisch in den E-Mail-Text eingefügt und die Betreffzeile lautet Support für [ausgewählter Menüpfad]. Alternativ kann das E‑Mail-Formular aktiviert werden. Weitere Informationen finden Sie unter Integriertes E-Mail-Formular für Mobilgeräte- und Web-SDKs.

  • Web:Endnutzern wird eine E‑Mail-Option angezeigt. Wenn Sie darauf klicken, wird ein E‑Mail-Formular angezeigt. Weitere Informationen finden Sie unter Integriertes E-Mail-Formular für mobile SDKs und Web-SDKs.

  • Warten (nur Web): Der Endnutzer kann auf eine Option klicken, um weiter zu warten.

In den Dialogfeldern für die gemeinsame Browsersitzung kann ein Endnutzer einer ersten Anfrage für eine gemeinsame Browsersitzung sowie einer nachfolgenden Anfrage für die Fernsteuerung oder einer Anfrage für den vollständigen Gerätezugriff zustimmen. Wenn Sie das Web-SDK für die gemeinsame Browsersitzung konfigurieren, stellt das Web-SDK standardmäßige Einwilligungsdialogfelder und eine Schaltfläche zum Beenden der Sitzung bereit. Sie können dem cobrowseOptions-Objekt jedoch optionale Felder hinzufügen, mit denen Sie die Einwilligungsdialogfelder und die Schaltfläche zum Beenden der Sitzung anpassen können. So haben Sie nicht nur die Möglichkeit, das Erscheinungsbild dieser Elemente zu steuern, sondern auch die Einwilligungserklärungen in den Einwilligungsdialogfeldern an Ihre Anforderungen anzupassen.

Eine Einwilligungserklärung wird in einem Einwilligungsdialogfeld angezeigt. In der Einwilligungserklärung wird dem Endnutzer mitgeteilt, welches Verhalten er von der gemeinsamen Browsersitzung erwarten kann und wozu er seine Einwilligung gibt. Wenn Sie eine Co-Browsing-Sitzung aufzeichnen möchten, sollten Sie das in Ihrer Einwilligungserklärung angeben. Codebeispiel für benutzerdefinierte Einwilligungsdialogfelder

Prozedur

So konfigurieren Sie das Web-SDK für die gemeinsame Navigation und passen die Zustimmungsdialogfelder an:

  1. So rufen Sie die Co-Browse-Domain und den Lizenzschlüssel Ihrer CCAI Platform-Instanz ab:

    1. Melden Sie sich mit Administratoranmeldedaten im CCAI Platform-Portal an.

    2. Klicken Sie auf  Menü und dann auf Einstellungen > Entwicklereinstellungen.

    3. Rufen Sie den Bereich Gemeinsames Browsen auf und klicken Sie dann auf den Ein/Aus-Schalter.

    4. Speichern Sie die Werte in den Feldern Co-browse Domain (Domain für gemeinsame Browsersitzungen) und License Key (Lizenzschlüssel).

  2. Führen Sie den folgenden Code aus, um das Web-SDK zu initialisieren und die Felder für die gemeinsame Browsersitzung einzufügen:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

    Ersetzen Sie Folgendes:

Schaltflächenklassen

Die Einwilligungsdialogfelder enthalten Schaltflächen, über die der Nutzer die Co-Browsing-Anfrage zulassen oder ablehnen oder das Einwilligungsdialogfeld schließen kann. Damit diese Schaltflächen mit dem Web-SDK kommunizieren können, müssen Sie die folgenden Schaltflächenklassen den entsprechenden Schaltflächentypen zuordnen. Das Web-SDK durchsucht den Code nach diesen Klassen und fügt für jede von ihnen einen Event-Listener hinzu. Hier sind die Schaltflächenklassen:

  • cobrowse-allow: Eine Schaltfläche für den Endnutzer, um die Anfrage zu erlauben.

  • cobrowse-deny: Eine Schaltfläche, über die der Endnutzer die Anfrage ablehnen kann.

  • cobrowse-close: Eine Schaltfläche, mit der der Endnutzer das Einwilligungsdialogfeld schließen kann.

Das folgende Codebeispiel enthält benutzerdefinierte Einwilligungsdialogfelder, eine Schaltfläche zum Beenden der Sitzung und Stilinformationen für diese Elemente. Jedes Einwilligungsdialogfeld im Beispiel enthält eine Einwilligungserklärung. Hier sind die Eigenschaften für die Einwilligungsdialogfelder für jeden der drei Co-Browsing-Modi:

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Weitere Informationen finden Sie unter Gemeinsames Surfen einrichten.

Anpassung von Nachrichten in mehreren Sprachen und visuellen Nachrichten

Die neue Methode „CCAI Platform (option)“ hat zwei Felder, um mehrere Sprachen und die Anpassung visueller Nachrichten zu unterstützen:

  • lang: Dies gibt die Standardsprache an, wenn der Endnutzer keine bevorzugte Sprache ausgewählt hat. Dieser Code entspricht ISO 639-1. Wenn er weggelassen wird, ist „en“ die Standardsprache.

  • translation: Das Web-SDK unterstützt mehrere Sprachen für angezeigte Texte. Mit dem Übersetzungsobjekt können Sie Texte für vorhandene Sprachen anpassen oder sogar Texte für neue Sprachen hinzufügen. Beispiel: de, es, fr, ja.

Das folgende Beispiel zeigt ein Übersetzungsobjekt, mit dem englischer Text angepasst wird. Wie Sie sehen, sollten die Schlüssel der obersten Ebene des Übersetzungsobjekts der Sprachcode sein.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

Die Anpassungsnachrichten lauten:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Logo und Symbol anpassen

Die Methode new UJET(option) enthält Felder zur Anpassung des Logos und des Symbols.

  • logo:Die URL des Logobilds

  • Die Position des Widgets (gilt nur für Computer)

    • right:Legt die Position des rechten Rands in Pixeln fest (Standardwert ist 50).

    • bottom:Legt die Position des unteren Rands in Pixeln fest (Standardwert ist 50).

  • Position des Symbols (gilt nur für Computer)

    • right:Legt die Position des rechten Rands in Pixeln fest (Standardwert ist 50).

    • bottom:Legt die Position des unteren Rands in Pixeln fest (Standardwert ist 50).

Beispiel für die Anpassung von Logo und Symbol

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Logo und Symbol anpassen

Logo- und Symbolanpassung

Logo und Symbol anpassen

Logo- und Symbolanpassung

Design anpassen

Die Methode new UJET(option) hat ein Feld zur Unterstützung der Designanpassung.

  • style:Das Designobjekt unterstützt vier Werte für das Widget.

    • links:Eine Liste mit Stylesheet-Links für Webfonts

    • --primary-font: Ein Wert für den CSS-Stil „font-family“, der auf die gesamte Web-UI angewendet wird, z.B. „Merriweather“

    • --primary-color: Ein Hex-Code-Wert, der als Primärfarbe der Web-UI verwendet wird, z.B. #51C3C3

    • --link-color: Ein Hex-Code-Wert, der als Linkfarbe der Web-UI verwendet wird, z.B. #51C3C3

  • launcher:Das Launcher-Objekt unterstützt vier Werte für den Launcher.

    • cssText:Eine CSS-Syntax, die als CSS-Stil für den Launcher verwendet wird.

    • chatIcon:Eine SVG-Symbol-URL, die für das normale Chatsymbol verwendet wird.

    • closeIcon:Eine SVG-Symbol-URL für das Schließsymbol

    • style:Dieses separate Designobjekt unterstützt zwei Werte für den Launcher.

      • --background-color: Ein Hex-Code-Wert, der als Hintergrundfarbe des Launchers verwendet wird, z.B. #E85230 --icon-color: Ein Hex-Code-Wert, der als Symbolfarbe des Launcher-Symbols verwendet wird, z.B. #FFF
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Launcher-Stil

Auswahl des Tracking-Channels und E-Mail-Übermittlung

Damit die Auswahl des Kanals und die E-Mail-Übermittlung nachverfolgt werden können, verwendet das Web-SDK die Funktion „postMessage“, mit der eine Nachricht mit den folgenden Daten übergeben wird:

  • application:Der Gerätetyp.

  • sdk_version::Die Version des Web-SDK.

  • user_agent::Die Browserversion.

  • company:Der Name des Mandanten.

  • menu_name::Der Name der Warteschlange oder des Menüs, das der Endnutzer ausgewählt hat.

  • menu_path::Der Pfad zur Warteschlange oder zum Menü, das der Endnutzer ausgewählt hat.

  • menu_id::Die Menü-ID der Warteschlange oder des Menüs, die der Endnutzer ausgewählt hat.

  • url:Die URL der Webseite, auf der sich der Endnutzer befand, als er einen Kanal auswählte oder eine E‑Mail-Adresse eingab.

  • timestamp:Der Zeitpunkt, zu dem der Endnutzer seine Auswahl getroffen hat.

  • has_attachments::Gibt an, ob eine E‑Mail bei der Einreichung Anhänge hatte. Diese Option wird nur bei der Einreichung von E‑Mails angezeigt, nicht bei der Auswahl des Kanals.

Nachrichtendaten werden in einem ujet-Objekt mit zwei Attributen gespeichert: „action“ (ein String mit dem Namen der ausgeführten Aktion) und „data“ (mit den oben beschriebenen Daten).

Wenn Sie Daten aus der Nachricht abrufen möchten, können Sie einen Event-Listener erstellen, der auf „message“ wartet. Ein Beispiel, das die Aktion und die Daten in der Konsole ausgibt, wird im nächsten Abschnitt beschrieben. Ein funktionierendes Beispiel finden Sie im Ordner tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Rahmen des Agent-Logos ausblenden

Wenn Sie den Rahmen des Agent-Logos ausblenden möchten, fügen Sie im style-Attribut „--logo-shadow“: „none“ hinzu und legen Sie es in der neuen UJET-Option auf „true“ fest:

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Startsymbol ausblenden

Aus ästhetischen Gründen kann das Symbol zum Starten der Web-UI ausgeblendet werden. Stattdessen kann ein proaktiver Chat-Trigger verwendet oder der Chat programmatisch gestartet werden. Wenn Sie das Startsymbol entfernen möchten, fügen Sie das Launcher-Attribut hinzu und legen Sie es in der neuen UJET-Option auf „true“ fest:

new UJET({
  // ...
  launcher: false,
});

Informationen zum programmatischen Starten der Web-UI finden Sie unter Web-UI programmatisch starten. Informationen zum Starten der Web-UI mit einem proaktiven Chat-Trigger finden Sie unter Proaktiver Trigger.

Direkten Zugriffspunkt verwenden

Mit einem Direktzugriff können Sie einen Endnutzer direkt zu einer bestimmten Warteschlange weiterleiten.

So verwenden Sie einen direkten Zugriffspunkt:

  1. Melden Sie sich im CCAI Platform-Portal an.

  2. Gehe zu Einstellungen > Warteschlange.

  3. Achten Sie darauf, dass der Webchannel aktiviert ist, indem Sie Verwenden ein- oder ausschalten.

  4. Rufen Sie den Webchannel über Bearbeiten > Ansehen auf. Die Webstruktur wird angezeigt.

  5. Wählen Sie die Warteschlange aus, zu der der Endnutzer direkt weitergeleitet werden soll.

  6. Rufen Sie den Abschnitt Access Point (Zugangspunkt) auf und klicken Sie auf Create direct access point (Direkten Zugangspunkt erstellen).

  7. Geben Sie die folgenden Informationen an:

    1. Legen Sie den Zugangspunkttyp auf Allgemein fest.

    2. Geben Sie den Namen des Zugangspunkts an. Dieser Name wird in der Liste Zugangspunkt angezeigt.

    3. Geben Sie das Label für den allgemeinen Zugangspunkt an. Dieser Wert wird zum Konfigurieren des Web-SDK verwendet.

  8. Klicken Sie auf Erstellen.

Sie können den Namen eines direkten Zugriffspunkts mit der Methode ujet.start(options) übergeben. Sehen Sie sich folgendes Beispiel an:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Web-UI programmatisch schließen

Dieser Schritt ist optional. Ohne diesen Schritt wird die Web-UI automatisch geschlossen und minimiert.

In diesem Schritt können Sie die Callback-Funktion aufrufen, wenn der Nutzer das Web-SDK schließen möchte.

ujet.on('close', function() {
  // do something here
});

Web-UI programmatisch starten

Dieser Schritt ist optional. Ohne diesen Schritt kann der Endnutzer die Web-UI starten, indem er auf das Startsymbol für die Web-UI klickt.

Mit diesem Schritt können Sie die Web-UI programmatisch mit der Methode ujet.start(options) öffnen. Möglicherweise soll der Endnutzer auf eine zusätzliche Schaltfläche klicken, um die Web-UI zu öffnen, z. B. so:

<button id="launcher">Zum Öffnen klicken</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

Sie können das Widget auch mit der ujet.close()-Methode schließen und mit der ujet.destroy()-Methode entfernen.

Proaktiver Trigger

Mit proaktiven Triggern können Sie das Web-SDK so konfigurieren, dass es proaktiv eine Nachricht an den Endnutzer sendet.

So richten Sie einen proaktiven Trigger ein:

  1. Rufen Sie im CCAI Platform-Portal Einstellungen > Chat auf.

  2. Rufen Sie den Bereich Web Proactive Chat Triggers (Web-Chat-Trigger) auf und klicken Sie auf View triggers (Trigger ansehen). Der Bereich Trigger wird angezeigt.

  3. Klicken Sie auf Trigger hinzufügen. Der Bereich Name auswählen wird angezeigt.

  4. Geben Sie im Feld Triggername einen Namen ein und klicken Sie dann auf Weiter. Der Bereich Bedingungen festlegen wird angezeigt.

  5. So legen Sie Bedingungen fest:

    1. Wählen Sie neben Der Endnutzer eine Bedingung aus.

    2. Geben Sie im Feld Schlüsselwort eingeben ein Schlüsselwort ein, auf das sich die Bedingung beziehen soll, und drücken Sie die Eingabetaste.

    3. Wiederholen Sie den vorherigen Schritt für jedes Keyword, das Sie eingeben möchten.

    4. Wenn Sie eine weitere Bedingung hinzufügen möchten, klicken Sie auf Weitere Bedingung hinzufügen und dann auf den gewünschten Bedingungstyp.

    5. Legen Sie die Konfigurationsoption für die Bedingung fest.

    6. Wiederholen Sie die beiden vorherigen Schritte, um eine weitere Bedingung hinzuzufügen.

    7. Klicken Sie auf Weiter. Der Bereich Aktionen definieren wird angezeigt.

  6. So definieren Sie Aktionen:

    1. Geben Sie unter Warteschlangenzuweisung den Namen des Chat-Warteschlangenknotens ein, dem Sie den Endnutzer zuweisen möchten. Wenn eine Chat-Warteschlange mit diesem Namen vorhanden ist, wird der Name unter dem Feld fett angezeigt.

    2. Klicken Sie auf den fett gedruckten Namen der Chatwarteschlange. Ein Bestätigungsdialog wird geöffnet.

    3. Klicken Sie auf OK, um fortzufahren.

    4. Geben Sie unter Chatnachricht die Nachricht ein, die im ausgelösten Chat angezeigt werden soll.

    5. Klicken Sie auf Beenden.

    6. Klicken Sie auf Livestreaming starten, um den neuen Trigger zu aktivieren.

Vorhandene Ticket-IDs

Wenn Sie bereits ein Ticket für einen Endnutzer haben, können Sie die Ticket-ID aus Ihrem CRM abrufen und sie durch Aufrufen von ujet.start() an das Web-SDK übergeben.

Beispiel:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Sie können sich das Beispiel im Ordner „ticket-id“ ansehen.