There have been asks around how signatures could be captured in Kaizala using custom actions. This could be achieved by using a HTML5 canvas to capture the signature, storing the base64 data into an image and submitting the response with the file path. The rest of the post will delve into the details to achieve this.
Capturing the signature
To capture the signature, we have used a JS library Signature Pad by Szymon Nowak which is a HTML5 canvas that allows smooth signature capture. In the creation view, we capture the signature using Signature Pad and then use a KASClient method to save the signature image’s base64 data into a file using the method saveDataInTmpDirAsync. Below screenshot shows how this has been done.
Note: the package.json takes 2 answers, the first one is the base64 image data (questionToAnswerMap) and the second one is the image file path ( questionToAnswerMap ).
The chat canvas view displays the image response. Below is the snippet of the chat canvas JSON.
The summary view displays the signature captured in the response.
Below are the screenshots of the card in action.
Hope that was helpful. If you want to get notified of new posts, you could subscribe.
The code for this demo has been shared here.