Web-SDK-API-Referenz

Diese Seite enthält die API-Methoden des Web-SDK.

Web-SDK initialisieren

Verwenden Sie den folgenden Code, um das Web-SDK zu initialisieren:

    const ujet = new UJET({
      companyId: '',
      // ...
    })

Optionen

Dieser Abschnitt enthält die Optionen, die Sie beim Initialisieren des Web-SDK übergeben können.

companyId

Erforderlich

So rufen Sie companyId aus dem CCAI Platform-Portal ab:

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

  2. Gehen Sie zu Einstellungen > Entwicklereinstellungen.

  3. Kopieren Sie den Unternehmensschlüssel.

    new UJET({
  companyId: '{​ COMPANY KEY }​',
})

tenant

Empfohlen

Der Mandant ist die Subdomain Ihrer Contact Center AI Platform-Instanz (CCAI Platform), auch als Umgebung bezeichnet. Wenn das CCAI Platform-Portal beispielsweise https://acme.ccaiplatform.com/ ist, ist acme der Mandant. Sehen Sie sich folgendes Beispiel an:

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

host

Optional

host ist der API-Endpunkt, der vom Web-SDK verwendet wird. Wenn Sie tenant festgelegt haben, müssen Sie host nicht festlegen.

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

Wenn Sie tenant, aber nicht host festgelegt haben, konfiguriert das Web-SDK den Wert host entsprechend tenant. Sehen Sie sich folgendes Beispiel an:

https://{tenant}.api.ccaiplatform.com

authenticate

Optional

authenticate ist eine Funktion, die ein JWT-Token mit einem Versprechen zurückgibt. Sehen Sie sich folgendes Beispiel an:

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

Die Authentifizierung ist im Web-SDK erforderlich, die Option authenticate ist jedoch optional. Sie können ujet.authenticate im Ereignis created aufrufen:

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

lang

Optional

Die Standardsprache für den Endnutzer. Sehen Sie sich folgendes Beispiel an:

new UJET({
  // ...
  lang: 'ja',
})

user

Optional

Sehen Sie sich folgendes Beispiel an:

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

launcher

Optional

Die Option launcher kann false oder ein Objekt sein. Sehen Sie sich die folgenden launcher-Optionen an:

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

Wenn Sie den Standard-Launcher der CCAI Platform deaktivieren möchten, können Sie diese Option auf false setzen. Sehen Sie sich folgendes Beispiel an:

const ujet = new UJET({
  companyId: '...',
  launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
  ujet.open()
})

Alternativ können Sie unseren integrierten Launcher anpassen. Sehen Sie sich folgendes Beispiel an:

new UJET({
  companyId: '...',
  launcher: {
    // cssText: 'body{color:red}',
    // chatIcon: 'https://example.com/logo.svg',
    // closeIcon: 'https://example.com/static/close.svg',
    // right: '50px',
    // bottom: '50px',
    style: {
      '--icon-color': '#FFF',
      '--background-color': '#F1684A',
    }
  },
})

Empfohlen

Die Logo-URL Ihres Unternehmens. Sehen Sie sich folgendes Beispiel an:

new UJET({
  logo: 'https://example.com/logo.svg',
})

style

Optional

Mit der Option style können Sie das Web-SDK-Widget anpassen. Sehen Sie sich folgendes Beispiel an:

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

customData

Optional

Benutzerdefinierte Daten können mit einem Chat gesendet werden, wenn der Chat gestartet wird. Sehen Sie sich folgendes Beispiel an:

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

disableAttachment

Optional

Wenn disableAttachment auf true gesetzt ist, kann der Endnutzer in Chats keine Fotos, Videos oder andere Anhänge hochladen. Sehen Sie sich folgendes Beispiel an:

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

Optional

Position rechts vom Widget, nicht vom Launcher. Passen Sie diesen Wert entsprechend launcher.right an. Sehen Sie sich folgendes Beispiel an:

new UJET({
  right: '50px',
})

bottom

Optional

Position unter dem Widget, nicht unter dem Launcher. Passen Sie diesen Wert entsprechend launcher.bottom an. Sehen Sie sich folgendes Beispiel an:

new UJET({
  bottom: '150px',
})

translation

Optional

Verwenden Sie die Übersetzungsfunktion des Web-SDK. Sehen Sie sich folgendes Beispiel an:

new UJET({
  translation: {
    "en": {
      "ujet_start_title": "English!",
      "ujet_greeting": "Hi there!"
    },
    "es": {
      "ujet_start_title": "¡Español!",
      "ujet_greeting": "¡Hola!"
    },
    "fr": {
      "ujet_start_title": "Français!",
      "ujet_greeting": "Salut!"
    },
    "de": {
      "ujet_start_title": "Deutsche!",
      "ujet_greeting": "Hallo!"
    },
    "ja": {
      "ujet_start_title": "日本語！",
      "ujet_greeting": "こんにちは！"
    }
  }
})

Methoden

Dieser Abschnitt enthält die Methoden des Objekts UJET:

.on(event, callback)

Führen Sie callback aus, wenn `UJET` das angegebene event empfängt:

ujet.on('ready', function() {
  console.log('widget is ready')
})

Alle Ereignisse finden Sie in der Ereignisdokumentation.

.off(event, callback)

Entfernen Sie den angegebenen callback aus den Ereignis-Listenern.

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

.authenticate(authData)

Senden Sie den Wert token an das Widget. Diese Methode wird normalerweise im Ereignis created aufgerufen:

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

.authenticate(authFunction)

Sie können auch eine Funktion an die Methode .authenticate übergeben. Diese Funktion sollte ein promise des token zurückgeben:

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

.start({ menuKey, ticketId })

Das Widget wird gestartet, wenn der Endnutzer auf den Launcher klickt. Es kann aber auch mit dem folgenden Code gestartet werden:

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

Wenn .start mit einem menuKey aufgerufen wird, wird das Widget direkt in diese Warteschlange verschoben.

.open()

.open ähnelt .start, akzeptiert aber keine Parameter.

setTimeout(function() {
  ujet.open()
}, 10000)

.close()

Widget programmatisch minimieren:

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

.destroy()

Web-SDK zerstören. Das heißt, es wird von der aktuellen Webseite entfernt.

.registerHook(event, fn)

Das event in .registerHook unterscheidet sich von dem in .on. Diese Funktion wird normalerweise verwendet, wenn Sie einen eigenen Launcher verwenden möchten:

// <button id="launcher">Click to open</button>

const ujet = new UJET({
  // ...
  launcher: false,
})

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

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

Übersetzung

Hier ist eine Liste der verfügbaren Schlüssel zum Anpassen der Übersetzung:

  • ujet_start_title

  • ujet_greeting