Mit dem Headless Web SDK können Sie den Support für Ihr Unternehmen flexibel erweitern und anpassen. Es enthält alle bekannten Web SDK-Funktionen und bietet die Möglichkeit, die UI und UX zu entwickeln, um diese zu unterstützen.
Für die Installation und Verwendung des Headless Web SDK ist die Unterstützung des Webentwicklungsteams Ihres Unternehmens erforderlich. Für eine erfolgreiche Integration und optimale Leistung empfiehlt Google, qualifiziertes Personal einzusetzen.
Im Kontext der Softwareentwicklung bezieht sich „Headless“ auf eine entkoppelte Architektur, bei der die Frontend-Präsentationsebene („Head“) von der Backend-Logik und den Backend-Funktionen getrennt ist. In einer Headless-Architektur bietet das Backend, auch als „Headless“-Teil bezeichnet, APIs, mit denen Sie seine Funktionen und Dienste nutzen können.
Ein Beispiel ist die benutzerdefinierte Workflow-Automatisierung. Wenn ein Endnutzer einen Chat startet, wird das
on("chat.message") Ereignis ausgelöst. Sie können benutzerdefinierte Automatisierungsauslöser basierend auf bestimmten Chatnachrichten definieren, die Sie erhalten haben. Wenn ein Endnutzer beispielsweise „Escalate“ in den Chat eingibt, kann der Event-Handler die Chatsitzung automatisch an ein Supportteam der höheren Ebene weiterleiten, um kritische Probleme schnell zu beheben.
In dieser Anleitung werden die Installation, die Integrationsfunktionen und die Verwendung des SDK beschrieben. Weitere Informationen zur Verwendung der API finden Sie in der API-Dokumentation zum Headless Web SDK. Eine Liste der verfügbaren Ereignisse finden Sie auf der Seite Ereignisse.
Headless Web SDK installieren
Verwenden Sie das folgende Code-Snippet in Ihrem Projekt, um das Headless Web SDK zu installieren:
npm install @ujet/websdk-headless --save
Headless Web SDK verwenden
Wenn Sie das Headless Web SDK verwenden möchten, können Sie dem Beispielcode folgen:
import { Client } from "@ujet/websdk-headless"
const client = new Client({ ... })
async function authenticate() {
const resp = await fetch("/your-auth-endpoint")
const data = await resp.json()
return { token: data.token }
}
const client = new Client({
companyId: "YOUR-COMPANY-ID",
tenant: "YOUR-TENANT-NAME",
authenticate: authenticate,
})
// const company = await client.getCompany()
// const menus = await client.getMenus()
Die Klasse „Client“ akzeptiert mehrere Optionen, die Sie an Ihre Anforderungen anpassen können:
interface ClientOption {
companyId: string;
authenticate: () => Promise<TokenResponse>;
tenant?: string;
host?: string;
lang?: string;
bridge?: string;
cobrowse?: {
enabled: boolean;
messages?: CobrowseMessages;
api?: string;
license?: string;
trustedOrigins?: string[];
capabilities?: string[];
registration?: boolean;
redactedViews?: string[];
unredactedViews?: string[];
};
}
Logging aktivieren
Bei der Implementierung und beim Testen kann es erforderlich sein, zusätzliche Informationen im Konsolenlog zu erfassen. Wenn Sie das Logging für das Headless SDK aktivieren möchten, importieren Sie
Logger und consoleLoggerHandler, indem Sie Ihrer Webanwendung den folgenden Code hinzufügen:
import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)
Bildschirmfreigabe konfigurieren
Sie können die Bildschirmfreigabe mit dem Headless Web SDK aktivieren und konfigurieren.
Das folgende Codebeispiel zeigt, wie Sie die Bildschirmfreigabe aktivieren:
new Client({
// ...
cobrowse: {
enabled: true,
license: 'YOUR_SCREEN_SHARE_LICENSE'
}
})
Das folgende Codebeispiel zeigt die Optionen für die Bildschirmfreigabe:
interface CobrowseOption {
enabled: boolean
template?: string
confirmSessionTemplate?: string
confirmRemoteControlTemplate?: string
confirmFullDeviceTemplate?: string
sessionControlsTemplate?: string
root?: Element
messages?: {
confirmSessionTitle: string;
confirmSessionContent: string;
confirmRemoteControlTitle: string;
confirmRemoteControlContent: string;
confirmFullDeviceTitle: string;
confirmFullDeviceContent: string;
allowText: string;
denyText: string;
endSessionText: string;
}
api?: string
license?: string
trustedOrigins?: string[]
capabilities?: string[]
registration?: boolean
redactedViews?: string[]
unredactedViews?: string[]
}
Benutzerdefinierte Vorlage
Sie können die Vorlage für das Dialogfeld „Bildschirmfreigabe“ mit der Option template aus dem vorherigen Codebeispiel anpassen.
Das folgende Beispiel zeigt die Standardvorlage:
<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>
Mit dieser Vorlage können Sie ein Dialogfeld konfigurieren, in dem der Endnutzer um die Genehmigung für Folgendes gebeten wird:
Bildschirmfreigabesitzung starten
Bildschirmfreigabesitzung mit Fernsteuerung starten
Bildschirmfreigabesitzung für das gesamte Gerät starten
Folgende Vorlagenoptionen sind verfügbar:
confirmSessionTemplate: Zum Bestätigen einer Bildschirmfreigabesitzung.confirmRemoteControlTemplate: Zum Bestätigen einer Bildschirmfreigabesitzung mit Fernsteuerung.confirmFullDeviceTemplate: Zum Bestätigen einer Bildschirmfreigabesitzung für das gesamte Gerät.sessionControlsTemplate: Für die Schaltfläche „Sitzungssteuerung“. So sieht die Standardvorlage aus:<button class="cobrowse-end js-cobrowse-end">$end</button>
Nachrichten
Die folgenden Nachrichtvariablen werden in benutzerdefinierten Vorlagen verwendet:
$title$content$allow$deny
Das folgende Beispiel zeigt, wie diese Variablen angewendet werden:
{
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
}
Das folgende Beispiel zeigt die Standardwerte der Variablen auf Englisch:
{
"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"
}
Benutzerdefinierte Datenkonfiguration
Mit der Option „custom_data“ können Sie beliebige Schlüssel/Wert-Paare an das Web SDK übergeben.
Nutzung
Sie können beim Erstellen eines Chats benutzerdefinierte Daten entweder als Objekt (unsigniert) oder als String (signiert) angeben:
interface ChatRequest {
lang?: string;
trigger_id?: string;
ticket_id?: string;
email?: string;
greeting?: string;
cobrowsable?: boolean;
custom_data?: {
signed?: string;
unsigned?: Record<string, any>;
};
}
Sehen Sie sich folgendes Beispiel an:
const custom_data = {
unsigned: {
version: {
label: 'Version',
value: '1.0.0'
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
Weiterleitung an externen Chatbot
In einigen Fällen möchten Sie möglicherweise den Verlauf und die Interaktionen von anderen Chatanbietern beibehalten. Dazu können Sie das custom_data object-Objekt verwenden.
Sehen Sie sich folgendes Beispiel an:
const custom_data = {
unsigned: {
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: "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"
}
}
]
}
]
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
Referenzimplementierung
Eine Referenzimplementierung des Web SDK finden Sie unter ccaas-web-headless-sdk-sample auf GitHub.
Dieses Repository enthält eine Demo einer Chatanwendung, die mit einem CCAI Platform Web Headless SDK erstellt wurde. Es zeigt eine einfache Client-Server-Architektur, bei der das Node.js-Backend die sichere Authentifizierung und die Konfigurationsbereitstellung übernimmt, während das reine JavaScript-Frontend die Chat-Benutzeroberfläche bereitstellt.