Solución de vales para clientes en Kaizala

En este caso, vamos a explorar cómo obtener un sistema de administración de vales de soporte al cliente en Kaizala. En lugar de enviar varios mensajes de texto para proporcionar una actualización del estado del vale, podríamos tener una tarjeta enriquecida que proporcione el estado del vale. Y, cuando se produce un cambio en el estado, la tarjeta podría actualizarse para reflejar el estado más reciente.

Para ello, a continuación se indican los pasos que serían necesarios:
1. Crear una tarjeta con una tarjeta de chat personalizada basada en propiedades definidas
2. Llame a una API para enviar la tarjeta ( escenario donde se genera el vale )
3. Llame a una API para actualizar la tarjeta ( escenario en el que cambia el estado del vale )

Creación de tarjetas con vista de tarjeta de chat personalizada

[Kaizala permite ampliar la funcionalidad del lado cliente mediante acciones o tarjetas personalizadas. Puede encontrar documentación de Microsoft para desarrollar una acción personalizada aquí.]

Para crear una tarjeta con una tarjeta de chat personalizada, tendremos que definir la sourceLocation de la vista de tarjeta de lienzo de chat en package.json. A diferencia de la vista Respuesta, la vista de creación o los resultados o la vista de resumen, que se basan en html/JS, la tarjeta de chat toma un esquema declarativo [más información aquí].

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

La tarjeta de chat aquí tiene cuatro campos: uno codificado de forma rígida en "XYZ CUSTOMER CARE" y los otros 3 campos alimentados de propiedades: customername, ticketnumber y 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

Solo tiene que crear un appmodel con el título y la matriz de preguntas vacía.
{
"title": "Xyz Customer Support",
"preguntas": []
}

Envío de vales desde la API

Para enviar el vale a través de la API, usaremos el punto de conexión de acciones como se muestra a continuación. Observe la matriz de suscriptores, ya que es necesario enviar este destino al suscriptor determinado ( para obtener más información, puede consultar la publicación Mover notificaciones SMS a Kaizala).
La ejecución de esta API le proporcionaría los valores referenceId y actionId. Almacene en caché este actionId, ya que lo necesitaremos en el paso siguiente. En el ejemplo siguiente, hemos establecido las propiedades customername, ticketnumber y ticketstatus en "NAME: John Thomas", "TICKET#: 907050", "STATUS: ACTIVE" respectivamente.

Método	POST
URL	{{endpoint-url}}/v1/groups/{{test-group-id}}/actions
Cuerpo de la solicitud	{ id:"com.gls.xyz.care", subscribers:["{{subscriber-mobile-number}}"], sendToAllSubscribers:false, actionBody:{ properties:[ { name:"customername", value:"NAME: John Thomas", type:"Text" }, { name:"ticketnumber", value:"TICKET#: 907050", type:"Text" }, { name:"ticketstatus", value:"STATUS: ACTIVE", type:"Text" } ] } }

Actualización del estado del vale mediante la API

A medida que cambia el estado del vale, tendríamos que actualizar el estado de la tarjeta que se envió. Para ello, usaríamos el punto de conexión actions/<>/properties. En el ejemplo siguiente, estaríamos actualizando el estado del vale a RESOLVED. Observe que actionId es el identificador de la acción enviada en el paso anterior.

Método	PUT
URL	{{endpoint-url}}/v1/groups/{{test-group-id}}/actions/{{actionId}}
Cuerpo de la solicitud	{ { "version":-1, "updateProperties": [ { "name" : "ticketstatus", "type" : "Text", "value" : "STATUS: RESOLVED" } ] }

Capturas de pantalla de la demostración

Vale enviado desde la API

Vale después de actualizar el estado desde la API

Compartir el paquete aquí, en caso de que quiera darle una oportunidad. ( no olvide cambiar el identificador del paquete antes de cargarlo en Kaizala para evitar conflictos )