Scan a MeCard QR code in Kaizala card

With the latest KASClient SDK update, scanning barcodes and QR codes from Kaizala custom actions has been made possible. In this post, I have picked the MeCard QR code as an example to be scanned in Kaizala.

Scenario

Below are the steps involved for this scenario:

  1. Generate a MeCard QR code
  2. Build a Kaizala card to scan the QR code
  3. Try out the scenario

Generate MeCard QR code

For this post, I will be using the below QR code that has my contact details.

Fig 1 – MeCard with Gladson’s contact details

You could create your own MeCard QR from https://barcode.tec-it.com/en/QRCode_Business_meCard.

Build a Kaizala card to scan QR code

In this example, we would be scanning a MeCard. Post scanning, validate if the QR code contains the MeCard data and then submit a card that has the details present in the QR code. In order to scan the QR code, we will need to use the below KASClient API:

Fig 2 – KASClient API to scan QR code

Calling this method, launches the QR code scanner from Kaizala card and once the QR code is scanned, returns the QR code information in the callback. If and error is encountered, the error parameter has the error message. Below is the code snippet in my example to where scanQrCode method is invoked in onPageLoad.

Fig 3 – Invoke scanQrCode in onPageLoad method

The scanQrCode method launches the QR code scanner in Kaizala, checks if the scanned data has MeCard information. If valid MeCard data is found, it submits a form with the information parsed. Else, shows an error message on the screen. Below is the code snippet:

Fig 4 – Invoke showQRCodeScannerAsync method from KASClient SDK

The snippet marked with 1 invokes the showQRCodeScannerAsync API and the snippet marked with 2 is executed only if the QR code is a MeCard data and submits the form with properties for name, email, phone number, URL and address information (which in turn is displayed on the chat canvas).

Trying out the scenario

I have added the card to the palette of group “Scanner test group” (in case you are interested to try out, you can join using the group code: 17203 36227). Launching the card opens the QR code scanner and on scanning a MeCard, a card is submitted that looks like this:

Fig 5 – Kaizala card chat canvas after scanning MeCard data

Below is a clipping of the scenario in action:

Fig 6 – QR code scanner in action

Closing thoughts

This way, you could easily incorporate QR code scanning into your Kaizala scenarios. The code for the package used in this example has been shared here. There is also a method showBarcodeScannerAsync that allows you to scan bar codes. Hope that was helpful, give me your comments / feedback through the contact page. Thank you for reading!

Note: To download the latest KASClient SDK, go to https://manage.kaiza.la/MiniApps/downloadsdk and click on the link (shown in the orange box below).

Fig 7 – Download the latest KASClient SDK by clicking the Kaizala Action SDK link

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