Kundenticketlösung auf Kaizala

In diesem Artikel erfahren Sie, wie Sie ein Ticketverwaltungssystem für den Kundensupport auf Kaizala erhalten. Anstatt mehrere SMS zu senden, um eine Aktualisierung des Tickets status zu senden, könnten wir einfach eine umfangreiche Karte haben, die das Ticket status bereitstellt. Und wenn es eine Änderung in status gibt, könnte die Karte aktualisiert werden, um die neuesten status widerzuspiegeln.

Um dies zu erreichen, sind die folgenden Schritte aufgeführt, die erforderlich wären:
1. Erstellen eines Karte mit benutzerdefinierten Chat-Karte basierend auf definierten Eigenschaften
2. Aufrufen einer API zum Senden der Karte (Szenario, in dem das Ticket ausgelöst wird)
3. Aufrufen einer API zum Aktualisieren der Karte (Szenario, in dem sich Ticket status ändert)

Erstellen von Karte mit benutzerdefinierter Chat-Karte-Ansicht

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

Zum Erstellen eines Karte mit benutzerdefinierten Chat-Karte müssen wir den sourceLocation-Wert des Chatbereichs Karte Ansicht in package.json definieren. Im Gegensatz zur Antwortansicht, der Erstellungsansicht oder der Ergebnis-/Zusammenfassungsansicht – die html/JS-basiert sind, verwendet der Chat-Karte ein deklaratives Schema [mehr dazu hier].

package.json

{
"id": "com.gls.xyz.care",
"schemaVersion": 1,
"displayName": "Customer Support",
"providerName": "GLS-Test",
"icon": "AppIcon.png",
"version": "1",
"minorVersion": "1",
"appModel": "AppModel.json",
"description": "Package for sending customer ticket [test]",
"dials": {
"isLocalised": false,
"isPinned": false
},
"views": {
"ChatCanvasCardView": {
"sourceLocation": "ChatCardView.json",
"showReceipts": true,
"showLikes": false,
"showComments": false,
"showExpiry": false,
"showFooter": true,
"showHeader": false,
"showFooter": false,
"isResponseEditable": false
}
}
}

ChatCardView.json

Der Chat Karte hier verfügt über vier Felder: eines hartcodiert zu "XYZ CUSTOMER CARE" und die anderen 3 Felder, die aus Eigenschaften gespeist werden: customername, ticketnumber und ticketstatus.
{
"schemaVersion":2,
"schema":{
"type":"container",
"initialHeight":300,
"layout":"vertical",
"children":[
{
"type":"text",
"paddingLeft":10,
"paddingRight":10,
"paddingTop":10,
"paddingBottom":10,
"string":"XYZ CUSTOMER CARE",
"fontSize":18,
"fontStyle":"bold",
"textColor":"#ffffff",
"backgroundColor":"#fcb72d",
"textAlignment":"center",
"maxNumberOfLines":1,
"marginBottom":10
},
{
"type":"text",
"paddingLeft":10,
"paddingRight":10,
"string":"${Form.properties[customername].value}",
"fontSize":18,
"fontStyle":"regular",
"textColor":"#000000",
"backgroundColor":"#ffffff",
"textAlignment":"left",
"maxNumberOfLines":5,
"marginBottom":10
},
{
"type":"text",
"paddingLeft":10,
"paddingRight":10,
"string":"${Form.properties[ticketnumber].value}",
"fontSize":18,
"fontStyle":"regular",
"textColor":"#000000",
"backgroundColor":"#ffffff",
"textAlignment":"left",
"maxNumberOfLines":2,
"marginBottom":10
},
{
"type":"text",
"paddingLeft":10,
"paddingRight":10,
"string":"${Form.properties[ticketstatus].value}",
"fontSize":18,
"fontStyle":"regular",
"textColor":"#000000",
"backgroundColor":"#ffffff",
"textAlignment":"left",
"maxNumberOfLines":2,
"marginBottom":10
}
]
}
}

AppModel.json

Erstellen Sie einfach ein AppModel mit dem Titel und dem leeren Fragenarray.
{
"title": "XYZ Customer Support",
"questions": []
}

Senden eines Tickets über die API

Um das Ticket über die API zu senden, verwenden wir den Aktionsendpunkt wie unten gezeigt. Beachten Sie das Abonnentenarray – da wir dieses an den jeweiligen Abonnenten senden müssen ( weitere Informationen finden Sie im Beitrag Verschieben von SMS-Benachrichtigungen nach Kaizala).
Wenn Sie diese API ausführen, erhalten Sie die referenceId und actionId. Speichern Sie diese actionId zwischen, da sie im nächsten Schritt benötigt wird. Im folgenden Beispiel haben wir die Eigenschaften customername, ticketnumber und ticketstatus auf "NAME: John Thomas", "TICKET#: 907050", "STATUS: ACTIVE" festgelegt.

Methode	POST
URL	{{endpoint-url}}/v1/groups/{{test-group-id}}/actions
Anforderungstext	{ id:"com.gls.xyz.care", Abonnenten:["{{subscriber-mobile-number}}"], sendToAllSubscribers:false, actionBody:{ eigenschaften:[ { name:"Customername", value:"NAME: John Thomas", type:"Text" }, { name:"ticketnumber", value:"TICKET#: 907050", type:"Text" }, { name:"ticketstatus", value:"STATUS: ACTIVE", type:"Text" } ] } }

Aktualisieren des Ticket-status mithilfe der API

Wenn sich das Ticket status ändert, müssen wir die status auf dem gesendeten Karte aktualisieren. Hierfür verwenden wir den Endpunkt actions/<>/properties. Im folgenden Beispiel würden wir das Ticket status auf RESOLVED aktualisieren. Beachten Sie, dass die actionId die ID der Aktion ist, die im vorherigen Schritt gesendet wurde.

Methode	PUT
URL	{{endpoint-url}}/v1/groups/{{test-group-id}}/actions/{{actionId}}
Anforderungstext	{ { "version":-1, "updateProperties": [ { "name" : "ticketstatus", "type" : "Text", "value" : "STATUS: RESOLVED" } ] }

Screenshots der Demo

Von der API gesendetes Ticket

Ticket nach dem Aktualisieren des status über die API

Teilen Sie das Paket hier, falls Sie ihm einen Schuss geben möchten. ( Vergessen Sie nicht, die Paket-ID vor dem Hochladen in Kaizala zu ändern, um Konflikte zu vermeiden. )