Das Web-SDK ist für alle modernen Desktop- und mobilen Browser konzipiert. Wir unterstützen jedoch offiziell nur die aktuelle Version der folgenden Browser:
Computer:
Chrome
Safari
Edge
Android:
Chrome
Edge
iOS:
Chrome
Safari
Edge
Proaktive Trigger
Mit proaktiven Triggern kann das Web-SDK gestartet und eine Nachricht proaktiv an die Nutzer gesendet werden. Sie können proaktive Chat-Trigger in der Contact Center AI Platform einrichten. Rufen Sie dazu Einstellungen > Chat > Proaktive Web-Chat-Trigger auf.
Weitere Informationen finden Sie unter Proactive Web SDK Triggers.
Nutzer im Blick behalten
Wenn Sie wiederkehrende Nutzer in Ihrem CRM identifizieren oder vorgefertigte Antworten mit den Nutzerinformationen verwenden möchten, müssen Sie identifiers zu den Nutzern hinzufügen.
Für die Verwendung von vorgefertigten Antworten ist ein CRM erforderlich.
Die Authentifizierung (Aktualisierung der Kennung) kann am Anfang oder in der Mitte einer Sitzung erfolgen. Weitere Informationen zur Authentifizierung während der Sitzung finden Sie unter Authentifizierung während der Sitzung über die API.
ID
Wenn Sie einen Anruf oder Chat starten, verwendet unser System eine Kennung zur Nutzerauthentifizierung. Sie können bei der Konfiguration Ihren bevorzugten Wert für das Kennzeichnungsfeld angeben. Wenn Sie bereits eine GUID (Globally Unique Identifier) für Ihre Nutzer haben, können Sie diese zur Nutzeridentifizierung verwenden. Wenn die Kennung, die Sie für einen Nutzer haben, jedoch aufzählbar ist oder personenidentifizierbare Informationen enthält, müssen Sie sie aus Sicherheitsgründen hashen.
Die Bezeichner müssen an den folgenden Stellen hinzugefügt werden:
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: '18008675309' } }) }).then(function(resp) { return resp.json(); }); }Der 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(`Listening at http://localhost:${port}`); });Zusätzliche Optionen in
authentication()hinzufügennew 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 übergeben, indem Sie das Feld external_chat_transfer mit den benutzerdefinierten Daten füllen. Das greeting_override unterstützt die Markdown-Formatierung.
ccaas.config({
customData: {
"external_chat_transfer": {
"greeting_override": "YOUR GREETING MESSAGE."
}
}
"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": "text",
"text": "Check Order Status"
}
]
},
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:16Z",
"content": [
{
"type": "text",
"text": "I can help you with that, what's your order number?"
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:20Z",
"content": [
{
"type": "media",
"media": {
"type": "image",
"url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
}
Name des Unternehmens
Wählen Sie anstelle des Namens aus der Unternehmens-API eine benutzerdefinierte name aus.
ccaas.config({
name: 'ACME',
})
Chat-Ablenkung
Wenn Kundenservicemitarbeiter nicht verfügbar sind, können Sie Optionen für die automatische Bearbeitung der Situation mit Ablenkungen angeben.
Optionen für die Chat-Ablenkung finden Sie im Portal unter Einstellungen > Chat > Web- und mobile Ablenkungen.
Direkte Zugriffspunkte (Direct Access Points, DAPs)
Mit direkten Zugriffspunkten können Sie einen Nutzer direkt zu einer bestimmten Warteschlange in der Warteschlangenstruktur weiterleiten.
Wenn Sie einen direkten Zugriffspunkt verwenden möchten, müssen Sie ihn zuerst im Portal erstellen.
Klicken Sie im CCAI Platform-Portal auf Einstellungen > Warteschlange. Wenn Sie das Menü Einstellungen nicht sehen, klicken Sie auf Menü.
Aktivieren Sie Verwenden für das Webmenü und rufen Sie BEARBEITEN / ANSEHEN auf.
Wählen Sie eine beliebige Warteschlange aus der Warteschlangenstruktur aus.
Klicken Sie auf Direkten Zugriffspunkt erstellen.
Zugangspunkttyp = Allgemein.
Fügen Sie im Dialogfeld Eingabedaten für den direkten Zugriffspunkt hinzu. Das Feld
General Access Point Labelentspricht demMenuKey, das im nächsten Schritt erwähnt wird.Klicken Sie auf ERSTELLEN.
Nachdem Sie die Konfiguration über das Portal vorgenommen haben, können Sie einen Nutzer mit MenuKey: an eine bestimmte Warteschlange weiterleiten.
ccaas.config({
menuKey: 'vip'
})
Ticket-ID
Wenn Sie bereits ein Ticket für einen Verbraucher haben, können Sie die Ticket-ID aus Ihrem CRM abrufen und an das Web-SDK übergeben:
retrieveTicket().then(ticket => {
ccaas.config({ ticketId: ticket.id })
})
Automatische Kanalauswahl
Mit preferredChannel können Sie automatisch einen Channel auswählen, wenn ein Kunde eine bestimmte Warteschlange auswählt:
ccaas.config({
preferredChannel: 'chat'
})
Anhänge deaktivieren
Standardmäßig können Nutzer mit dem Web-SDK Fotos und Videos während einer Chatsitzung hochladen. Sie können sie mit dem folgenden Skript deaktivieren:
ccaas.config({
disableAttachment: false
})
Benutzerdefinierte Daten übergeben
Wenn ein Chat gestartet wird, können benutzerdefinierte Daten mit dem Chat-Objekt gesendet werden. Benutzerdefinierte Daten können alles sein, z. B. Betriebssystem, Version, Standort oder andere Daten, die für den jeweiligen Chat relevant sein können.
Mit der customData-Konfiguration können Sie nicht signierte benutzerdefinierte Daten hinzufügen.
Das benutzerdefinierte Datenformat ähnelt einem JSON-Objekt und besteht aus key, label und value.
ccaas.config({
customData: {
k1: {
label: 'Version',
value: '1.1.0'
},
k2: {
label: 'Platform',
value: navigator.platform
}
}
})
Key: Eine eindeutige Kennung für Daten. Im vorherigen Beispiel sind k1 und k2 Schlüssel.
Label: Der Anzeigename auf der CRM-Seite.
Value: der Wert des Labels
Sie können signierte benutzerdefinierte Daten mit der signedCustomData-Konfiguration hinzufügen:
ccaas.config({
signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})
Der signedCustomData ist ein JWT-String mit dem HS256-Algorithmus.
SIGN_JWT(
algorithm='HS256',
secret=YOUR_COMPANY_SECRET,
payload={
custom_data: {
version: {
label: 'Version',
value: '1.0.0'
},
...
},
iss: 'YOUR TENANT',
iat: NOW,
exp: NOW + 3600,
}
)
Unterstützung mehrerer Sprachen
Mit dem Feld lang kann die Standardsprache beim Start gesteuert und die Unterstützung mehrerer Sprachen ermöglicht werden. Wenn keine Angabe gemacht wird, ist die Standardsprache Englisch (en). Die Standardsprache kann für jede Seite Ihrer Website konfiguriert werden. Wenn in Ihrem Mandanten andere Sprachen verfügbar sind, hat der Nutzer die Möglichkeit, zu einer anderen Sprache zu wechseln.
client.getMenus(key?: string, lang?: string)
Die Methode .getMenus akzeptiert einen optionalen „lang“-Parameter. Wenn Sie den „lang“-Parameter nicht an .getMenus übergeben, wird die Standardoption für die Sprache verwendet.
Beispiel:
const client = new Client({
// ...
lang: 'ja',
})
Diese Option ist über die folgende Property verfügbar:
console.log(client.lang)
Die folgenden Sprachen werden unterstützt. Verwenden Sie die in der folgenden Tabelle angegebenen Abkürzungen:
| Sprache | Abkürzung |
| Englisch | de |
| Englisch (Kanada) | en-CA |
| Englisch (Vereinigtes Königreich) | en-GB |
| Englisch (Australien) | en-AU |
| Englisch (Indien) | en-IN |
| Spanisch (Spanien) | es |
| Spanisch (Mexiko) | es-MX |
| Französisch (Kanada) | fr-CA |
| Deutsch | de |
| Japanisch | ja |
| Koreanisch | ko |
| Italienisch | it |
| Chinesisch (vereinfacht) | zh |
| Chinesisch (traditionell) | zh-Hant |
| Schwedisch | sv |
| Portugiesisch | pt |
| Portugiesisch (Brasilien) | pt-BR |
| Finnisch | fi |
| Norwegisch | nb |
| Dänisch | da |
| Niederländisch | nl |
| Türkisch | tr |
| Vietnamesisch | vi |
| Thailändisch | th |
| Arabisch | ar |
| Tschechisch | cs |
| Polnisch | pl |
| Ungarisch | hu |
| Russisch | ru |
| Hindi | hi |
| Rumänisch | ro |
| Kroatisch | Std. |
| Ukrainisch | uk |
| Tagalog | tl |
Weitere Informationen zu Übersetzungen finden Sie im Abschnitt Nachrichten und Übersetzungen anpassen.
Web-UI programmatisch starten
Mit diesem Schritt können Sie die Web-UI programmatisch mit der Methode ccaas.start(options) öffnen.
In einigen Fällen möchten Sie möglicherweise, dass der Nutzer auf eine zusätzliche Schaltfläche klickt, um die Web-SDK-Benutzeroberfläche zu öffnen.
Beispiel:
<button id="launcher">Click to open</button>
var ccass = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "HOST_URL",
authenticate: getAuthToken,
});
ccass.config({disableLauncher: true})
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ccass.visible) {
ccaas.hide();
launcher.textContent = 'Click to open';
} else {
ccaas.show();
launcher.textContent = 'Click to close';
}
});
ccass.on('ready', function() {
launcher.textContent = 'ready to talk';
});
Sie können das Widget auch mit der Methode ccass.close() schließen und mit der Methode ccass.destroy() entfernen.
Web-UI programmatisch schließen
In diesem Schritt können Sie die Callback-Funktion aufrufen, wenn der Nutzer das Web-SDK schließen möchte.
ccass.on('visible', function(visible) {console.log(visible) })
Informationen zu aktiven Chatsitzungen abrufen
Sie können Informationen zu aktiven Chatsitzungen abrufen, einschließlich der Chat-ID.
Sehen Sie sich folgendes Beispiel an:
ccass.getOngoingChat()
Wenn eine aktive Chatsitzung vorhanden ist, werden die Chatmetadaten zurückgegeben. Wenn keine aktiven Chatsitzungen vorhanden sind, wird null zurückgegeben.
So können Sie verhindern, dass Verbraucher mehrere Chatsitzungen öffnen, indem Sie das SDK bedingt ausblenden, wenn ein aktiver Chat läuft.
Status „Geöffnet“ oder „Geschlossen“ zwischen mehreren Tabs oder Fenstern verfolgen
Sie können den Status „geöffnet“ oder „geschlossen“ des SDK zwischen mehreren Tabs oder Fenstern Ihrer Website synchronisieren. Verwenden Sie das Code-Snippet, um den Status des SDK im lokalen Speicher zu verfolgen:
ccass.on('visible', (isVisible) => {
localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
ccass.show()
} else {
ccass.hide()
}
Zustimmungsdialoge und End-Button für die Bildschirmfreigabe anpassen
Vorlage
Mit dieser Option können Sie die Vorlage für das Dialogfeld zur Bildschirmfreigabe anpassen. Der Standardwert für template ist:
<dialog open class="cobrowse-dialog">
<h1>$title</h1>
<div class="cobrowse-dialog_content">$content</div>
<div class="cobrowse-dialog_footer">
<button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
<button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
</div>
</dialog>
Diese template wird für Folgendes verwendet:
Dialogfeld „Termin bestätigen“
Dialogfeld zur Bestätigung der Fernbedienung
Dialogfeld für vollständige Gerätebestätigung
Die Parameter in der Vorlage werden durch den Inhalt der Option messages ersetzt.
confirmSessionTemplate
Mit dieser Option können Sie das Dialogfeld „Sitzung bestätigen“ anpassen.
confirmRemoteControlTemplate
Mit dieser Option können Sie das Dialogfeld „Fernbedienung bestätigen“ anpassen.
confirmFullDeviceTemplate
Mit dieser Option kann das Dialogfeld „Vollständiges Gerät bestätigen“ angepasst werden.
sessionControlsTemplate
Mit dieser Option wird die Schaltfläche für die Sitzungssteuerung angepasst. Die Standardvorlage ist:
<button class="cobrowse-end js-cobrowse-end">$end</button>
Nachrichten
Die oben genannten Vorlagen enthalten die folgenden Nachrichtenvariablen:
$title$content$allow$deny
Diese Variablen werden durch Folgendes ersetzt:
{
confirmSessionTitle: string; // $title
confirmSessionContent: string; // $content
confirmRemoteControlTitle: string; // $title
confirmRemoteControlContent: string; // $content
confirmFullDeviceTitle: string; // $title
confirmFullDeviceContent: string; // $content
allowText: string; // $allow
denyText: string; // $deny
endSessionText: string; // $end
}
Wir haben integrierte Nachrichten für die Bildschirmfreigabe, z. B. die Nachrichten für die Sprache en:
{
"confirmSessionTitle": "Screen Share Session Request",
"confirmSessionContent": "Do you want to share your current screen with the agent?",
"endSessionText": "End Screen Share Session",
"confirmRemoteControlTitle": "Remote Access Request",
"confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
"confirmFullDeviceTitle": "Screen Share Request",
"confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
"allowText": "Allow",
"denyText": "Deny"
}