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.


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.

13 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.


  2. Hi,

    What you have done here is really interesting ! Great work !

    I could replicate almost all the custom actions that are posted on this blog but not this one.
    I am quite new to kaizala and to development.

    Is it possible that you send a more detailed tutorial ?
    Or even better that you send the full action package ready to use ?

    I would love to integrate this functionality to our systems.

    Thank you in advance 🙂


      1. Got it !

        Could not see it before. It is present in all the posts but I have done them all by myself when it was possible to save time 🙂

        Thank you very much !


  3. I am making an app that uses getCurrentDeviceLocationAsync, I would like that when I open the action card it would show a message indicating if gps is enabled, if it is correct then open the action card otherwise it will only show that popup message without opening the action card.
    for example:


  4. Hi, I am quite new to kaizala and to development. And I tried to import the file but it gives me an error.

    “Action Validation failed. Following errors occurred: New version of Action with id: com.gls.signature.t1 can only be uploaded by Creator of the base Action! “. kindly guide me how to resolve this issue

    Thank you in advance


  5. hey
    for some reason it dosent work for me
    it seems to be saved but it dosent show the chatCardView .. just a loading gif
    i debugged the issue and saw that the saveDataInTmpDirAsync returns with an error
    what can i do in this instance? can i use another function ? or there is another solution ?


Leave a Reply

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

You are commenting using your 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