Kaizala の顧客チケット作成ソリューション

ここでは、Kaizala でカスタマー サポート チケット管理システムを取得する方法について説明します。 チケットの状態を更新するために複数のテキスト メッセージを送信する代わりに、チケットの状態を提供するリッチ カードを用意するだけで済みます。 また、状態に変更がある場合は、最新の状態を反映するようにカードを更新できます。

これを実現するには、次の手順を実行する必要があります。
1. 定義されたプロパティに基づいてカスタム チャット カードを使用してカードを構築する
2. API を呼び出してカードを送信します (チケットが発生するシナリオ)
3. API を呼び出してカードを更新します (チケットの状態が変更されるシナリオ)

カスタム チャット カード ビューを使用したカードの構築

[Kaizala では、カスタム アクション/カードを使用してクライアント側の機能を拡張できます。 カスタム アクションを開発するための Microsoft ドキュメントについては、 こちらを参照してください。

カスタム チャット カードを使用してカードを構築するには、package.json でチャット キャンバス カード ビューの sourceLocation を定義する必要があります。 応答ビュー、作成ビュー、結果/概要ビューとは異なり、html/JS ベースのチャット カードは宣言型スキーマを受け取ります [詳細はこちら]。

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": "顧客チケットを送信するためのパッケージ [test]",
"dials": {
"isLocalized": 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

ここでカードチャットには、4 つのフィールドがあります。1 つは "XYZ CUSTOMER CARE" にハードコーディングされ、他の 3 つのフィールドは customername、ticketnumber、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

タイトルと空の質問配列を使用して AppModel を作成するだけです。
{
"title": "XYZ カスタマー サポート",
"questions": []
}

API からのチケットの送信

API 経由でチケットを送信するには、次に示すようにアクション エンドポイントを使用します。 サブスクライバー配列に注目してください。これは特定のサブスクライバーを対象として送信する必要があるため (詳細については、「 SMS 通知を Kaizala に移動する」を参照してください)。
この API を実行すると、referenceId と actionId が提供されます。 次の手順で必要なように、この actionId をキャッシュします。 次の例では、customername、ticketnumber、ticketstatus プロパティをそれぞれ "NAME: John Thomas"、"TICKET#: 907050"、"STATUS: ACTIVE" に設定しています。

メソッド	POST
URL	{{endpoint-url}}/v1/groups/{{test-group-id}}/actions
要求本文	{ id:"com.gls.xyz.care", subscriber:["{{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" } ] } }

API を使用したチケットの状態の更新

チケットの状態が変わると、送信されたカードの状態を更新する必要があります。 そのため、actions/<>/properties エンドポイントを使用します。 次の例では、チケットの状態を RESOLVED に更新します。 actionId は、前の手順で送信したアクションの ID であることに注意してください。

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

デモのスクリーンショット

API から送信されたチケット

API から状態を更新した後のチケット

ここでパッケージを共有します。これを行う場合に備えて、 ( 競合を防ぐために Kaizala にアップロードする前にパッケージ ID を変更することを忘れないでください)