Kundenkarten Lösung auf KaizalaCustomer ticketing solution on Kaizala



Lassen Sie uns hier untersuchen, wie Sie ein Ticket Verwaltungssystem für Kundensupport auf Kaizala erhalten.In this, let us explore on how to get a customer support ticket management system on Kaizala. 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.Instead of sending multiple text messages to give an update on the ticket status, we could just have a rich card that provides the ticket status. Wenn sich der Status geändert hat, kann die Karte aktualisiert werden, um den aktuellen Status anzuzeigen.And, when there is a change in status, the card could be updated to reflect the latest status.

Um dies zu erreichen, sind die folgenden Schritte erforderlich:To achieve this, below are the steps that would be required:
1. Erstellen einer Karte mit benutzerdefinierten Chat Karten basierend auf definierten Eigenschaften1. Build a card with custom chat card based on defined properties
2. Rufen Sie eine API auf, um die Karte zu senden (Szenario, in dem das Ticket ausgelöst wird).2. Call into an API to send the card ( scenario where ticket is raised )
3. Aufrufen einer API zum Aktualisieren der Karte (Szenario, in dem sich der Ticket Status ändert)3. Call into an API to update the card ( scenario where ticket status changes )

Erstellen einer Karte mit benutzerdefinierter Chat KartenansichtBuilding card with custom chat card view

[Kaizala ermöglicht das Erweitern der clientseitigen Funktionalität mithilfe benutzerdefinierter Aktionen/Karten.[Kaizala allows to extend client side functionality using custom actions / cards. Die Microsoft-Dokumentation zum Entwickeln einer benutzerdefinierten Aktion finden Sie hier.]Microsoft documentation for developing a custom action can be found here.]

Für das Erstellen einer Karte mit benutzerdefinierter chatkarte müssen wir die SourceLocation der Chat Ansichtskarten Ansicht in Paket. JSON definieren.For building a card with custom chat card, we will need to define the sourceLocation of the chat canvas card view in package.json. 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.Unlike the Response view, creation view or results / summary view – which are html / JS based, the chat card takes a declarative schema [more about it here].

Package. JSONpackage.json

{
"ID": "com. GLS. xyz. Care", "id": "com.gls.xyz.care",
"Schemaversion": 1, "schemaVersion": 1,
"DisplayName": "Kunden Support", "displayName": "Customer Support",
"ProviderName": "GLS-Test", "providerName": "GLS-Test",
"Icon": "AppIcon. png", "icon": "AppIcon.png",
"Version": "1", "version": "1",
"MinorVersion": "1", "minorVersion": "1",
"appModel": "appModel. JSON", "appModel": "AppModel.json",
"Description": "Paket zum Senden des Kunden Tickets [Test]", "description": "Package for sending customer ticket [test]",
"Dials": { "dials": {
"islocaled": false, "isLocalised": false,
"isangeheftet": false "isPinned": false
},
"Views": { "views": {
"ChatCanvasCardView": { "ChatCanvasCardView": {
"SourceLocation": "ChatCardView. JSON", "sourceLocation": "ChatCardView.json",
"showReceipts": true, "showReceipts": true,
"showLikes": false, "showLikes": false,
"showComments": false, "showComments": false,
"showExpiry": false, "showExpiry": false,
"showFooter": true, "showFooter": true,
"Zeilenbereich": false, "showHeader": false,
"showFooter": false, "showFooter": false,
"isResponseEditable": false "isResponseEditable": false
}
}
}

ChatCardView. JSONChatCardView.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.The chat card here has four fields: one hard-coded to “XYZ CUSTOMER CARE” and the other 3 fields fed from properties: customername, ticketnumber and ticketstatus.
{
"Schemaversion": 2, "schemaVersion":2,
"Schema": {"schema":{
"Typ": "Container","type":"container",
"initialHeight": 300,"initialHeight":300,
"Layout": "vertikal","layout":"vertical",
"Children": ["children":[
{
"Typ": "Text", "type":"text",
"PaddingLeft": 10, "paddingLeft":10,
"PaddingRight": 10,"paddingRight":10,
"PaddingTop": 10,"paddingTop":10,
"PaddingBottom": 10,"paddingBottom":10,
"String": "XYZ-Kundenbetreuung","string":"XYZ CUSTOMER CARE",
"FontSize": 18,"fontSize":18,
"FontStyle": "Fett","fontStyle":"bold",
"TextColor": "#FFFFFF","textColor":"#ffffff",
"Background Color": "#fcb72d","backgroundColor":"#fcb72d",
"TextAlignment": "Center","textAlignment":"center",
"maxNumberOfLines": 1,"maxNumberOfLines":1,
"MarginBottom": 10"marginBottom":10
},
{
"Typ": "Text","type":"text",
"PaddingLeft": 10,"paddingLeft":10,
"PaddingRight": 10,"paddingRight":10,
"String": "$ {Form. Properties [Kundenname]. Value}","string":"${Form.properties[customername].value}",
"FontSize": 18,"fontSize":18,
"FontStyle": "Regular","fontStyle":"regular",
"TextColor": "#000000","textColor":"#000000",
"Background Color": "#FFFFFF","backgroundColor":"#ffffff",
"TextAlignment": "Left","textAlignment":"left",
"maxNumberOfLines": 5,"maxNumberOfLines":5,
"MarginBottom": 10"marginBottom":10
},
{
"Typ": "Text","type":"text",
"PaddingLeft": 10,"paddingLeft":10,
"PaddingRight": 10,"paddingRight":10,
"String": "$ {Form. Properties [ticketnumber]. Value}","string":"${Form.properties[ticketnumber].value}",
"FontSize": 18,"fontSize":18,
"FontStyle": "Regular","fontStyle":"regular",
"TextColor": "#000000","textColor":"#000000",
"Background Color": "#FFFFFF","backgroundColor":"#ffffff",
"TextAlignment": "Left","textAlignment":"left",
"maxNumberOfLines": 2,"maxNumberOfLines":2,
"MarginBottom": 10"marginBottom":10
},
{
"Typ": "Text","type":"text",
"PaddingLeft": 10,"paddingLeft":10,
"PaddingRight": 10,"paddingRight":10,
"String": "$ {Form. Properties [Ticketstatus]. Value}","string":"${Form.properties[ticketstatus].value}",
"FontSize": 18,"fontSize":18,
"FontStyle": "Regular","fontStyle":"regular",
"TextColor": "#000000","textColor":"#000000",
"Background Color": "#FFFFFF","backgroundColor":"#ffffff",
"TextAlignment": "Left","textAlignment":"left",
"maxNumberOfLines": 2,"maxNumberOfLines":2,
"MarginBottom": 10"marginBottom":10
}
]
}
}

AppModel. JSONAppModel.json

Erstellen Sie einfach ein AppModel mit dem Titel und dem leeren Questions-Array.Just create an AppModel with the title and empty questions array.
{
"Title": "XYZ-Kunden Support","title": "XYZ Customer Support",
"Questions": []"questions": []
}

Senden von Tickets von APISending ticket from API

Um das Ticket über API zu senden, verwenden wir den Actions-Endpunkt wie unten dargestellt.To send the ticket via API, we would be using the actions endpoint as shown below. 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).Notice the subscribers array – since we need to send this targeted to the particular subscriber ( for more information, you can refer the post Move SMS notifications to Kaizala).
Durch die Ausführung dieser API erhalten Sie die Referenz-und die Aktions-Nr.Executing this API would give you the referenceId and actionId. Diese Aktions-Nr Zwischenspeichern, wie wir Sie im nächsten Schritt benötigen werden.Cache this actionId as we will need it in the next step. Im folgenden Beispiel haben wir die Eigenschaften CustomerName, ticketnumber und Ticketstatus auf "Name: John Thomas", "Ticket #: 907050", "Status: Active", festgelegt.In the below example, we have set the customername, ticketnumber and ticketstatus properties to “NAME: John Thomas”, “TICKET#: 907050”, “STATUS: ACTIVE” respectively.

MethodeMethod POSTPOST
URLURL {{Endpunkt-URL}}/v1/Groups/{{Test-Group-ID}}/Actions{{endpoint-url}}/v1/groups/{{test-group-id}}/actions
AnforderungstextRequest Body {
ID: "com. GLS. xyz. Care",id:”com.gls.xyz.care”,
Abonnenten: ["{{subscribe-Mobile-Number}}"],subscribers:[“{{subscriber-mobile-number}}”],
sendToAllSubscribers: false,sendToAllSubscribers:false,
actionBody:{actionBody:{
Properties: [properties:[
{
Name: "CustomerName",name:”customername”,
Wert: "Name: John Thomas",value:”NAME: John Thomas”,
Typ: "Text"type:”Text”
},
{
Name: "ticketnumber",name:”ticketnumber”,
Wert: "Ticket #: 907050",value:”TICKET#: 907050″,
Typ: "Text"type:”Text”
},
{
Name: "Ticketstatus",name:”ticketstatus”,
Wert: "Status: aktiv",value:”STATUS: ACTIVE”,
Typ: "Text"type:”Text”
}
]
}
}

Aktualisieren des Ticket Status mithilfe der APIUpdating the ticket status using API

Wenn sich der Ticket Status ändert, müssen wir den Status auf der Karte aktualisieren, die gesendet wurde.As the ticket status changes, we would need to update the status on the card that was sent. Dafür verwenden wir die Aktionen/<>/Properties-Endpunkt.For that we would be using the actions/<>/properties endpoint. Im folgenden Beispiel wird der Ticket Status auf aufgelöst aktualisiert.In the below example, we would be updating the ticket status to RESOLVED. Beachten Sie, dass die Aktions-ID die ID der Aktion ist, die im vorherigen Schritt gesendet wurde.Notice that the actionId is the ID of the action sent in the earlier step.

MethodeMethod PUTPUT
URLURL {{Endpunkt-URL}}/v1/Groups/{{Test-Group-ID}}/Actions/{{actionId}}{{endpoint-url}}/v1/groups/{{test-group-id}}/actions/{{actionId}}
AnforderungstextRequest Body {
{
"Version":-1,“version”:-1,
"updateProperties":“updateProperties”:
[
{
"Name": "Ticketstatus",“name” : “ticketstatus”,
"Typ": "Text",“type” : “Text”,
"Wert": "Status: aufgelöst"“value” : “STATUS: RESOLVED”
}
]
}

Screenshots der DemoScreenshots of the demo

Von API gesendetes TicketTicket sent from API

Ticket nach Aktualisierung des Status von APITicket after updating the status from API


Das Paket wird hierfreigegeben, falls Sie es versuchen möchten.Sharing the package at here, in case you want to give it a shot. (vergessen Sie nicht, die Paket-ID vor dem Hochladen in Kaizala zu ändern, um Konflikte zu vermeiden)( don’t forget to change the package id before uploading to Kaizala to prevent conflicts )