Capturing signature in Kaizala

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.

Fig 1 – save base64 image data from HTML5 canvas into a file sign.png and submit response

Note: the package.json takes 2 answers, the first one is the base64 image data (questionToAnswerMap[0]) and the second one is the image file path ( questionToAnswerMap[1] ).

The chat canvas view displays the image response. Below is the snippet of the chat canvas JSON.

Fig 2 – ChatCardView json where signature is show in the chat canvas

The summary view displays the signature captured in the response.

Demo

Below are the screenshots of the card in action.

Fig 3 – Signature capture in creation view
Capture signature in Kaizala custom action.
Fig 4 – Captured signature in chat card view

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.

2 thoughts on “Capturing signature in Kaizala

  1. Hi, could you make a post on how to use the location?
    I tried to use KASClient.App.getCurrentDeviceLocationAsync but it gives me an error.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s