Web-SDK-API-Referenz

Auf dieser Seite finden Sie 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: '',
      // ...
    })

Hinweis :Sie können pro Webseite nur eine Instanz des Web-SDK initialisieren.

Optionen

In diesem Abschnitt finden Sie die Optionen, die Sie beim Initialisieren des Web-SDK übergeben können.

companyId

Erforderlich

So rufen Sie companyId über das CCAI Platform-Portal ab:

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

2. Rufen Sie die Einstellungen > Entwicklereinstellungen auf.

3. Unternehmensschlüssel kopieren

   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 Promise 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 created-Ereignis 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. Hier finden Sie die folgenden launcher-Optionen:

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 festlegen. 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',
    }
  },
})

logo

Empfohlen

Die URL des Logos Ihres Unternehmens. Sehen Sie sich folgendes Beispiel an:

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

style

Optional

Verwenden Sie die Option style, um das Web-SDK-Widget anzupassen. 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 festgelegt ist, können Endnutzer im Web-SDK keine Fotos, Videos oder anderen Anhänge in Chats hochladen. Sehen Sie sich folgendes Beispiel an:

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

right

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

Die Positionierung erfolgt 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

Übersetzungsfunktion des Web-SDK verwenden 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 UJET-Objekts:

.on(event, callback)

Führe callback aus, wenn event empfangen wird:

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

Alle Ereignisse finden Sie in der Ereignisdokumentation.

.off(event, callback)

Entfernen Sie die angegebene callback aus den Event-Listenern.

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

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

.authenticate(authData)

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

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

.authenticate(authFunction)

Sie können auch eine Funktion an die .authenticate-Methode übergeben. Diese Funktion sollte eine 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 das Launcher-Symbol 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 angegeben wird, wird das Widget direkt in diese Warteschlange eingefügt.

.open()

.open ist ähnlich wie .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, sie wird von der aktuellen Webseite entfernt.

.registerHook(event, fn)

Die event in .registerHook unterscheidet sich von der 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 finden Sie eine Liste der verfügbaren Schlüssel zum Anpassen der Übersetzung:

• ujet_start_title

• ujet_greeting