Kundenkarten Lösung auf Kaizala



Lassen Sie uns hier untersuchen, wie Sie ein Ticket Verwaltungssystem für Kundensupport auf Kaizala erhalten. Anstatt mehrere Textnachrichten zu senden, um eine Aktualisierung des Ticket Status zu erhalten, hätten wir nur eine umfangreiche Karte, die den Ticket Status bereitstellt. Wenn sich der Status geändert hat, kann die Karte aktualisiert werden, um den aktuellen Status anzuzeigen.

Um dies zu erreichen, sind die folgenden Schritte erforderlich:
1. Erstellen einer Karte mit benutzerdefinierten Chat Karten basierend auf definierten Eigenschaften
2. Rufen Sie eine API auf, um die Karte zu senden (Szenario, in dem das Ticket ausgelöst wird).
3. Aufrufen einer API zum Aktualisieren der Karte (Szenario, in dem sich der Ticket Status ändert)

Erstellen einer Karte mit benutzerdefinierter Chat Kartenansicht

[Kaizala ermöglicht das Erweitern der clientseitigen Funktionalität mithilfe benutzerdefinierter Aktionen/Karten. Die Microsoft-Dokumentation zum Entwickeln einer benutzerdefinierten Aktion finden Sie hier.]

Für das Erstellen einer Karte mit benutzerdefinierter chatkarte müssen wir die SourceLocation der Chat Ansichtskarten Ansicht in Paket. JSON definieren. Im Gegensatz zur Antwort Ansicht, zur Erstellungsansicht oder zur Ergebnis-/Zusammenfassungsansicht, die auf HTML/js basiert, nimmt die Chat Karte ein deklaratives Schema [mehr dazu hier] an.

Package. JSON

{
"ID": "com. GLS. xyz. Care",
"Schemaversion": 1,
"DisplayName": "Kunden Support",
"ProviderName": "GLS-Test",
"Icon": "AppIcon. png",
"Version": "1",
"MinorVersion": "1",
"appModel": "appModel. JSON",
"Description": "Paket zum Senden des Kunden Tickets [Test]",
"Dials": {
"islocaled": false,
"isangeheftet": false
},
"Views": {
"ChatCanvasCardView": {
"SourceLocation": "ChatCardView. JSON",
"showReceipts": true,
"showLikes": false,
"showComments": false,
"showExpiry": false,
"showFooter": true,
"Zeilenbereich": false,
"showFooter": false,
"isResponseEditable": false
}
}
}

ChatCardView. JSON

Die chatkarte verfügt hier über vier Felder: eine hart codierte "XYZ-Kundenbetreuung" und die anderen 3 Felder, die von den Eigenschaften gefüttert werden: Kundennamen, ticketnumber und Ticketstatus.
{
"Schemaversion": 2,
"Schema": {
"Typ": "Container",
"initialHeight": 300,
"Layout": "vertikal",
"Children": [
{
"Typ": "Text",
"PaddingLeft": 10,
"PaddingRight": 10,
"PaddingTop": 10,
"PaddingBottom": 10,
"String": "XYZ-Kundenbetreuung",
"FontSize": 18,
"FontStyle": "Fett",
"TextColor": "#FFFFFF",
"Background Color": "#fcb72d",
"TextAlignment": "Center",
"maxNumberOfLines": 1,
"MarginBottom": 10
},
{
"Typ": "Text",
"PaddingLeft": 10,
"PaddingRight": 10,
"String": "$ {Form. Properties [Kundenname]. Value}",
"FontSize": 18,
"FontStyle": "Regular",
"TextColor": "#000000",
"Background Color": "#FFFFFF",
"TextAlignment": "Left",
"maxNumberOfLines": 5,
"MarginBottom": 10
},
{
"Typ": "Text",
"PaddingLeft": 10,
"PaddingRight": 10,
"String": "$ {Form. Properties [ticketnumber]. Value}",
"FontSize": 18,
"FontStyle": "Regular",
"TextColor": "#000000",
"Background Color": "#FFFFFF",
"TextAlignment": "Left",
"maxNumberOfLines": 2,
"MarginBottom": 10
},
{
"Typ": "Text",
"PaddingLeft": 10,
"PaddingRight": 10,
"String": "$ {Form. Properties [Ticketstatus]. Value}",
"FontSize": 18,
"FontStyle": "Regular",
"TextColor": "#000000",
"Background Color": "#FFFFFF",
"TextAlignment": "Left",
"maxNumberOfLines": 2,
"MarginBottom": 10
}
]
}
}

AppModel. JSON

Erstellen Sie einfach ein AppModel mit dem Titel und dem leeren Questions-Array.
{
"Title": "XYZ-Kunden Support",
"Questions": []
}

Senden von Tickets von API

Um das Ticket über API zu senden, verwenden wir den Actions-Endpunkt wie unten dargestellt. Beachten Sie das Abonnenten-Array – da wir dieses Ziel an den jeweiligen Abonnenten senden müssen (Weitere Informationen finden Sie unter Post- SMS-Benachrichtigungen an Kaizala).
Durch die Ausführung dieser API erhalten Sie die Referenz-und die Aktions-Nr. Diese Aktions-Nr Zwischenspeichern, wie wir Sie im nächsten Schritt benötigen werden. Im folgenden Beispiel haben wir die Eigenschaften CustomerName, ticketnumber und Ticketstatus auf "Name: John Thomas", "Ticket #: 907050", "Status: Active", festgelegt.

Methode POST
URL {{Endpunkt-URL}}/v1/Groups/{{Test-Group-ID}}/Actions
Anforderungstext {
ID: "com. GLS. xyz. Care",
Abonnenten: ["{{subscribe-Mobile-Number}}"],
sendToAllSubscribers: false,
actionBody:{
Properties: [
{
Name: "CustomerName",
Wert: "Name: John Thomas",
Typ: "Text"
},
{
Name: "ticketnumber",
Wert: "Ticket #: 907050",
Typ: "Text"
},
{
Name: "Ticketstatus",
Wert: "Status: aktiv",
Typ: "Text"
}
]
}
}

Aktualisieren des Ticket Status mithilfe der API

Wenn sich der Ticket Status ändert, müssen wir den Status auf der Karte aktualisieren, die gesendet wurde. Dafür verwenden wir die Aktionen/<>/Properties-Endpunkt. Im folgenden Beispiel wird der Ticket Status auf aufgelöst aktualisiert. Beachten Sie, dass die Aktions-ID die ID der Aktion ist, die im vorherigen Schritt gesendet wurde.

Methode PUT
URL {{Endpunkt-URL}}/v1/Groups/{{Test-Group-ID}}/Actions/{{actionId}}
Anforderungstext {
{
"Version":-1,
"updateProperties":
[
{
"Name": "Ticketstatus",
"Typ": "Text",
"Wert": "Status: aufgelöst"
}
]
}

Screenshots der Demo

Von API gesendetes Ticket

Ticket nach Aktualisierung des Status von API


Das Paket wird hierfreigegeben, falls Sie es versuchen möchten. (vergessen Sie nicht, die Paket-ID vor dem Hochladen in Kaizala zu ändern, um Konflikte zu vermeiden)