Adding QR Codes
To add a dynamic QR code into your page, you can utilize the Google API to generate a code as an image and add it to your page.
QR Codes must be formatted with the following minimum options:
- https://chart.googleapis.com/chart?
- cht=qr (This is telling the API to use the QR code chart type)
- &chs=150x150 (This will determine the chart size)
- &chl=value (Here is where you set the value for the QR code)
For example, the following QR code will have the value of "Hello-world" with dimension of 150X150 pixels.
https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=Hello-World
When using a QR code from within the app, you can use field values inside the QR code as well. Add an image inside the HTML component and replace the end of the QR code URL with the field name to be used as the value.
https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={Email}
To learn more about HTML and app variables, please click here.
Using QR codes can be even more useful when working with PDFs or Emails and creating a link to route users to a specific record details.
For instance, if you have an order details page, only the last section of the URL, which is the ID of a page, changes based on which order is being viewed. Therefore, you can copy the full URL of the order and dynamically update the ID of the order in order to route the user to the correct page via a QR code.
Say your details page URL looks like this: https://demo.tadabase.io/qrcodes#!/candidates/candidate-details/DVWQWRNZ49
As illustrated in red, the last section of the URL is a unique ID. Since each record has its own ID, you can include this ID in the URL based on the record.
You would do this by adding a QR code and replacing the ID field with {!!id!!}
https://demo.tadabase.io/qrcodes#!/candidates/candidate-details/{!!id!!}
However, this will likely not work in most cases since the URL contains a "#" (hash/pound) symbol. Therefore, instead of using the URL with the hash we can convert the # to an encoded value which would be %23
https://demo.tadabase.io/qrcodes%23!/candidates/candidate-details/{!!id!!}
Tip: Use the link below to learn how you can structure different QR codes:
We'd love to hear your feedback.