Solution de ticket de client sur KaizalaCustomer ticketing solution on Kaizala



Nous allons nous pencher sur la façon d’obtenir un système de gestion des tickets de support client sur Kaizala.In this, let us explore on how to get a customer support ticket management system on Kaizala. Au lieu d’envoyer plusieurs messages texte pour donner une mise à jour à l’état du ticket, nous aurions pu simplement disposer d’une carte enrichie qui fournit l’état du ticket.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. En cas de modification de l’État, la carte peut être mise à jour pour refléter le dernier statut.And, when there is a change in status, the card could be updated to reflect the latest status.

Pour ce faire, vous trouverez ci-dessous les étapes nécessaires:To achieve this, below are the steps that would be required:
1. créer une carte avec une carte de conversation personnalisée basée sur les propriétés définies1. Build a card with custom chat card based on defined properties
2. appeler une API pour envoyer la carte (scénario où le ticket est généré)2. Call into an API to send the card ( scenario where ticket is raised )
3. appeler une API pour mettre à jour la carte (scénario dans lequel l’état du ticket change)3. Call into an API to update the card ( scenario where ticket status changes )

Carte de construction avec affichage de carte de conversation personnaliséeBuilding card with custom chat card view

[Kaizala permet d’étendre les fonctionnalités côté client à l’aide d’actions/cartes personnalisées.[Kaizala allows to extend client side functionality using custom actions / cards. La documentation Microsoft pour le développement d’une action personnalisée peut être trouvée ici.]Microsoft documentation for developing a custom action can be found here.]

Pour créer une carte avec une carte de conversation personnalisée, nous devons définir le sourceLocation de la vue de la carte de canevas de conversation dans package. JSON.For building a card with custom chat card, we will need to define the sourceLocation of the chat canvas card view in package.json. Contrairement à la vue de réponse, la vue de création ou la vue de résultats/résumés, qui sont basées sur html/JS, la carte de conversation prend un schéma déclaratif [en savoir plus ici].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": "support technique", "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": "package pour l’envoi de ticket client [test]", "description": "Package for sending customer ticket [test]",
«numérotation»: { "dials": {
«isLocalised»: false, "isLocalised": false,
«isPinned»: false "isPinned": false
},
«Vues»: { "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,
«showHeader»: false, "showHeader": false,
«showFooter»: false, "showFooter": false,
«isResponseEditable»: false "isResponseEditable": false
}
}
}

ChatCardView. JSONChatCardView.json

La carte de conversation comporte quatre champs: un codé en dur pour «service clientèle XYZ» et les 3 autres champs provenant de propriétés: CustomerName, ticketnumber et 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,
«schéma»: {"schema":{
«type»: «conteneur»,"type":"container",
«initialHeight»: 300,"initialHeight":300,
"mise en page": "vertical","layout":"vertical",
«enfants»: ["children":[
{
"type": "Text", "type":"text",
«paddingLeft»: 10, "paddingLeft":10,
«paddingRight»: 10,"paddingRight":10,
«paddingTop»: 10,"paddingTop":10,
«paddingBottom»: 10,"paddingBottom":10,
"chaîne": "service clientèle XYZ","string":"XYZ CUSTOMER CARE",
"FontSize": 18,"fontSize":18,
"fontStyle": "BOLD","fontStyle":"bold",
«textColor»: «#ffffff»,"textColor":"#ffffff",
"backgroundColor": "#fcb72d","backgroundColor":"#fcb72d",
"textAlignment": "Center","textAlignment":"center",
«maxNumberOfLines»: 1,"maxNumberOfLines":1,
«marginBottom»: 10"marginBottom":10
},
{
"type": "Text","type":"text",
«paddingLeft»: 10,"paddingLeft":10,
«paddingRight»: 10,"paddingRight":10,
"chaîne": "$ {Form. Properties [CustomerName]. Value}","string":"${Form.properties[customername].value}",
"FontSize": 18,"fontSize":18,
«fontStyle»: «Regular»,"fontStyle":"regular",
«textColor»: «#000000»,"textColor":"#000000",
"backgroundColor": "#ffffff","backgroundColor":"#ffffff",
"textAlignment": "left","textAlignment":"left",
«maxNumberOfLines»: 5,"maxNumberOfLines":5,
«marginBottom»: 10"marginBottom":10
},
{
"type": "Text","type":"text",
«paddingLeft»: 10,"paddingLeft":10,
«paddingRight»: 10,"paddingRight":10,
"chaîne": "$ {Form. Properties [ticketnumber]. Value}","string":"${Form.properties[ticketnumber].value}",
"FontSize": 18,"fontSize":18,
«fontStyle»: «Regular»,"fontStyle":"regular",
«textColor»: «#000000»,"textColor":"#000000",
"backgroundColor": "#ffffff","backgroundColor":"#ffffff",
"textAlignment": "left","textAlignment":"left",
«maxNumberOfLines»: 2,"maxNumberOfLines":2,
«marginBottom»: 10"marginBottom":10
},
{
"type": "Text","type":"text",
«paddingLeft»: 10,"paddingLeft":10,
«paddingRight»: 10,"paddingRight":10,
"chaîne": "$ {Form. Properties [ticketstatus]. Value}","string":"${Form.properties[ticketstatus].value}",
"FontSize": 18,"fontSize":18,
«fontStyle»: «Regular»,"fontStyle":"regular",
«textColor»: «#000000»,"textColor":"#000000",
"backgroundColor": "#ffffff","backgroundColor":"#ffffff",
"textAlignment": "left","textAlignment":"left",
«maxNumberOfLines»: 2,"maxNumberOfLines":2,
«marginBottom»: 10"marginBottom":10
}
]
}
}

AppModel. JSONAppModel.json

Créez simplement un AppModel avec le titre et le tableau des questions vides.Just create an AppModel with the title and empty questions array.
{
"title": "support client XYZ","title": "XYZ Customer Support",
«questions»: []"questions": []
}

Envoi d’un ticket à partir de l’APISending ticket from API

Pour envoyer le ticket via l’API, nous utiliserons le point de terminaison actions comme indiqué ci-dessous.To send the ticket via API, we would be using the actions endpoint as shown below. Notez le tableau des abonnés, étant donné que nous devons envoyer cet abonnement à un abonné particulier (pour plus d’informations, vous pouvez consulter la rubrique post Move SMS notifications to 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).
L’exécution de cette API vous donnera le ID et l’actionId.Executing this API would give you the referenceId and actionId. Mettez en cache cet actionId, comme nous l’aurez besoin à l’étape suivante.Cache this actionId as we will need it in the next step. Dans l’exemple ci-dessous, nous avons défini les propriétés CustomerName, ticketnumber et ticketstatus sur «NAME: John Thomas», «TICKET #: 907050», «État: actif», respectivement.In the below example, we have set the customername, ticketnumber and ticketstatus properties to “NAME: John Thomas”, “TICKET#: 907050”, “STATUS: ACTIVE” respectively.

MéthodeMethod POSTPOST
URLURL {{Endpoint-URL}}/v1/Groups/{{test-Group-ID}}/actions{{endpoint-url}}/v1/groups/{{test-group-id}}/actions
Corps de la demandeRequest Body {
ID: "com. GLS. xyz. Care",id:”com.gls.xyz.care”,
abonnés: ["{{Subscriber-mobile-Number}}"],subscribers:[“{{subscriber-mobile-number}}”],
sendToAllSubscribers: false,sendToAllSubscribers:false,
actionBody:{actionBody:{
Propriétés: [properties:[
{
nom: «CustomerName»,name:”customername”,
valeur: "NAME: John Thomas",value:”NAME: John Thomas”,
type: "texte"type:”Text”
},
{
nom: «ticketnumber»,name:”ticketnumber”,
valeur: "TICKET #: 907050",value:”TICKET#: 907050″,
type: "texte"type:”Text”
},
{
nom: «ticketstatus»,name:”ticketstatus”,
valeur: "État: actif",value:”STATUS: ACTIVE”,
type: "texte"type:”Text”
}
]
}
}

Mise à jour de l’état du ticket à l’aide de l’APIUpdating the ticket status using API

Lorsque l’état du ticket change, nous aurions besoin de mettre à jour l’état de la carte qui a été envoyée.As the ticket status changes, we would need to update the status on the card that was sent. Pour cela, nous utiliserons le point de terminaison>>/Properties actions/<<.For that we would be using the actions/<>/properties endpoint. Dans l’exemple ci-dessous, nous allons mettre à jour l’état du ticket sur résolu.In the below example, we would be updating the ticket status to RESOLVED. Notez que l’actionId est l’ID de l’action envoyée à l’étape précédente.Notice that the actionId is the ID of the action sent in the earlier step.

MéthodeMethod PUTPUT
URLURL {{Endpoint-URL}}/v1/groups/{{test-group-id}}/actions/{{actionId}}{{endpoint-url}}/v1/groups/{{test-group-id}}/actions/{{actionId}}
Corps de la demandeRequest Body {
{
"version":-1,“version”:-1,
"updateProperties":“updateProperties”:
[
{
"nom": "ticketstatus",“name” : “ticketstatus”,
"type": "Text",“type” : “Text”,
«valeur»: «État: résolu»“value” : “STATUS: RESOLVED”
}
]
}

Captures d’écran de la démonstrationScreenshots of the demo

Ticket envoyé par l’APITicket sent from API

Ticket après la mise à jour de l’État à partir de l’APITicket after updating the status from API


Partage du package ici, au cas où vous souhaiteriez lui donner une photo.Sharing the package at here, in case you want to give it a shot. (n’oubliez pas de modifier l’ID de package avant de le télécharger vers Kaizala pour éviter les conflits)( don’t forget to change the package id before uploading to Kaizala to prevent conflicts )