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.
Below are the steps involved for this scenario:
- Generate a MeCard QR code
- Build a Kaizala card to scan the QR code
- Try out the scenario
Generate MeCard QR code
For this post, I will be using the below QR code that has my 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:
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.
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:
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:
Below is a clipping of the scenario in action:
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).