How to Add QR Codes to Your App

 

QR codes are appearing everywhere in print and online.  These 2D barcodes are scanned by mobile phones and can direct users to specific URLs, add contacts to their address book, and even automatically dial a phone number.  Several websites allow you to dynamically generate a QR code containing various types of information.  This article shows how you can create QR codes based on your individual record information using the free QR generator API by SPARQCode.

Steps to Adding a QR Code to Your Caspio App

Below are some sample QR code implementations using JavaScript.  Don't be intimidated by the size of the JavaScripts included in this article, for the most part they just list the information from your record then reformat it so it is readable by the SPARQCode generator.

In order to function correctly, your data source table will need to include a unique ID field such as an AutoNumber.

Edit the Caspio Report DataPage where you would like to add the QR code.  Make sure advanced options and parameters are enabled. To include a QR code, you will need to add an HTML block to either your results page or record details page.

Insert the appropriate JavaScript example into your HTML block.  Replace the Unique_ID parameters with the parameter for your unique ID fieldname.

For each div tag line, insert a parameter from your record containing the appropriate data as indicated by the div tag’s id attribute.

For example, a div tag with an ID of the contact name should contain a parameter with the name data:

<div style='display:none' id='Name[@field:Unique_ID]'>[@field:Name]</div>

If your table does not have a field containing the indicated data, in most cases you can just skip that line without any problems.  The resulting QR code will still function, but will not contain data for that attribute.

 

URL-Based QR Code

The QR code can send your users to a specific URL. Your QR code can include query string parameters such as a record ID or other information that brings up a specific record from your database.

In this QR code, the URL of your details or results page can be inserted in the div tag line:

<div style='display:none' id='URL[@field:Unique_ID]'>http://yourdomain.com/details.htm?id=[@field:Unique_ID]</div>
<script>
var URL= document.getElementById('URL[@field: Unique_ID]').innerHTML;
URL = escape(URL);
document.write("<img src='http://www.sparqcode.com/qrgen?qt=url&data="+URL+"'>");
</script>

 

Event-Based QR Code

If you have an app that promotes specific dates, such as an event calendar or meeting scheduler, QR codes can be used to transfer appointment information directly to any calendar-capable phone.

For more information on using QR codes for event marketing check out this article from Mashable – How To Use QR Codes for Event Marketing.

Users can scan a QR code to add an appointment to their calendar

In this QR code, the following data can be inserted from your table:

  • Event Title
  • Description
  • Location
  • Organizer's Email
  • Start Year
  • Start Month
  • Start Day
  • Start Hour
  • Start Minute
  • Time zone offset of start
  • End Year
  • End Month
  • End Day
  • End Hour
  • End Minute
  • Time zone offset of end
  • Alarm minutes in advance
  • QR code width
  • Caption
  • Sub caption
  • Primary Color
  • Background Color

<div style="display:none" id="Title[@field:Unique_ID]"></div>
<div style="display:none" id="Description[@field:Unique_ID]"></div>
<div style="display:none" id="Location[@field:Unique_ID]"></div>
<div style="display:none" id="OrganizerEmail[@field:Unique_ID]"></div>
<div style="display:none" id="StartYear[@field:Unique_ID]"></div>
<div style="display:none" id="StartMonth[@field:Unique_ID]"></div>
<div style="display:none" id="StartDay[@field:Unique_ID]"></div>
<div style="display:none" id="StartHour[@field:Unique_ID]"></div>
<div style="display:none" id="StartMinute[@field:Unique_ID]"></div>
<div style="display:none" id="StartOffset[@field:Unique_ID]"></div>
<div style="display:none" id="EndYear[@field:Unique_ID]"></div>
<div style="display:none" id="EndMonth[@field:Unique_ID]"></div>
<div style="display:none" id="EndDay[@field:Unique_ID]"></div>
<div style="display:none" id="EndHour[@field:Unique_ID]"></div>
<div style="display:none" id="EndMinute[@field:Unique_ID]"></div>
<div style="display:none" id="EndOffset[@field:Unique_ID]"></div>
<div style="display:none" id="AlarmMinutes[@field:Unique_ID]"></div>
<div style="display:none" id="Width[@field:Unique_ID]">50</div>
<div style="display:none" id="Caption[@field:Unique_ID]"></div>
<div style="display:none" id="subcaption[@field:Unique_ID]"></div>
<div style="display:none" id="Color[@field:Unique_ID]"></div>
<div style="display:none" id="Bgcolor[@field:Unique_ID]"></div>
<script>
var Title= document.getElementById('Title[@field:Unique_ID]').innerHTML;
var Description= document.getElementById('Description[@field:Unique_ID]').innerHTML;
var Location= document.getElementById('Location[@field:Unique_ID]').innerHTML;
var OrganizerEmail= document.getElementById('OrganizerEmail[@field:Unique_ID]').innerHTML;
var StartYear= document.getElementById('StartYear[@field:Unique_ID]').innerHTML;
var StartMonth= document.getElementById('StartMonth[@field:Unique_ID]').innerHTML;
var StartDay= document.getElementById('StartDay[@field:Unique_ID]').innerHTML;
var StartHour= document.getElementById('StartHour[@field:Unique_ID]').innerHTML;
var StartMinute= document.getElementById('StartMinute[@field:Unique_ID]').innerHTML;
var StartOffset= document.getElementById('StartOffset[@field:Unique_ID]').innerHTML;
var EndYear= document.getElementById('EndYear[@field:Unique_ID]').innerHTML;
var EndMonth= document.getElementById('EndMonth[@field:Unique_ID]').innerHTML;
var EndDay= document.getElementById('EndDay[@field:Unique_ID]').innerHTML;
var EndHour= document.getElementById('EndHour[@field:Unique_ID]').innerHTML;
var EndMinute= document.getElementById('EndMinute[@field:Unique_ID]').innerHTML;
var EndOffset= document.getElementById('EndOffset[@field:Unique_ID]').innerHTML;
var AlarmMinutes= document.getElementById('AlarmMinutes[@field:Unique_ID]').innerHTML;
var Width= document.getElementById('Width[@field:Unique_ID]').innerHTML;
var Caption= document.getElementById('Caption[@field:Unique_ID]').innerHTML;
var SubCaption= document.getElementById('subcaption[@field:Unique_ID]').innerHTML;
var Color= document.getElementById('Color[@field:Unique_ID]').innerHTML;
var Bgcolor= document.getElementById('Bgcolor[@field:Unique_ID]').innerHTML;
Title = encodeURIComponent(Title);
Description = encodeURIComponent(Description);
Location = encodeURIComponent(Location);
OrganizerEmail = encodeURIComponent(OrganizerEmail);
StartYear = encodeURIComponent(StartYear);
StartMonth = encodeURIComponent(StartMonth);
StartDay = encodeURIComponent(StartDay);
StartHour = encodeURIComponent(StartHour);
StartMinute = encodeURIComponent(StartMinute);
StartOffset = encodeURIComponent(StartOffset);
EndYear = encodeURIComponent(EndYear);
EndMonth = encodeURIComponent(EndMonth);
EndDay = encodeURIComponent(EndDay);
EndHour = encodeURIComponent(EndHour);
EndMinute = encodeURIComponent(EndMinute);
EndOffset = encodeURIComponent(EndOffset);
AlarmMinutes = encodeURIComponent(AlarmMinutes);
Width = encodeURIComponent(Width);
Caption = encodeURIComponent(Caption);
SubCaption = encodeURIComponent(SubCaption);
Color = encodeURIComponent(Color);
Bgcolor = encodeURIComponent(Bgcolor);
document.write("<img src='http://www.sparqcode.com/qrgen?qt=vcal&title="+Title+"&desc="+Description+"&loc="+Location+"&email="+OrganizerEmail+"&sYear="+StartYear+"&sMonth="+StartMonth+"&sDay="+StartDay+"&sHour="+StartHour+"&sMin="+StartMinute+"&sOffset="+StartOffset+"&eYear="+EndYear+"&eMonth="+EndMonth+"&eDay="+EndDay+"&eHour="+EndHour+"&eMin="+EndMinute+"&eOffset="+EndOffset+"&alarm="+AlarmMinutes+"&width="+Width+"&cap="+Caption+"&subcap="+SubCaption+"&col="+Color+"&bgcol="+Bgcolor+"'>");
</script>

Contact Information QR Codes

For people-centric apps such as membership databases and networking apps, QR codes can be used as an easy way to transfer contact cards from your website to your user’s mobile device of choice.

vCard – the current standard for electronic business cards

Scan a QR code to automatically add a contact to your address book

In this QR code, the following data can be inserted from your table:

  • First Name
  • Last Name
  • Company
  • Position
  • Telephone Number
  • Mobile Phone Number
  • Address
  • City
  • State
  • Zip
  • Country
  • Email
  • Website
  • QR code width
  • Caption
  • Sub Caption
  • Primary Color
  • Background Color

<div style='display:none' id='First[@field:Unique_ID]'></div>
<div style='display:none' id='Last[@field:Unique_ID]'></div>
<div style='display:none' id='Company[@field:Unique_ID]'></div>
<div style='display:none' id='Job[@field:Unique_ID]'></div>
<div style='display:none' id='Telephone[@field:Unique_ID]'></div>
<div style='display:none' id='Mobile[@field:Unique_ID]'></div>
<div style='display:none' id='Address[@field:Unique_ID]'></div>
<div style='display:none' id='City[@field:Unique_ID]'></div>
<div style='display:none' id='State[@field:Unique_ID]'></div>
<div style='display:none' id='Zip[@field:Unique_ID]'></div>
<div style='display:none' id='Country[@field:Unique_ID]'></div>
<div style='display:none' id='Email[@field:Unique_ID]'></div>
<div style='display:none' id='Url[@field:Unique_ID]'></div>
<div style='display:none' id='width[@field:Unique_ID]'></div>
<div style='display:none' id='cap[@field:Unique_ID]'></div>
<div style='display:none' id='subcap[@field:Unique_ID]'></div>
<div style='display:none' id='color[@field:Unique_ID]'></div>
<div style='display:none' id='bgcol[@field:Unique_ID]'></div>
<script>
var First= document.getElementById('First[@field:Unique_ID]').innerHTML;
var Last= document.getElementById('Last[@field:Unique_ID]').innerHTML;
var Company= document.getElementById('Company[@field:Unique_ID]').innerHTML;
var Job= document.getElementById('Job[@field:Unique_ID]').innerHTML;
var Telephone= document.getElementById('Telephone[@field:Unique_ID]').innerHTML;
var Mobile= document.getElementById('Mobile[@field:Unique_ID]').innerHTML;
var Address= document.getElementById('Address[@field:Unique_ID]').innerHTML;
var City= document.getElementById('City[@field:Unique_ID]').innerHTML;
var State= document.getElementById('State[@field:Unique_ID]').innerHTML;
var Zip= document.getElementById('Zip[@field:Unique_ID]').innerHTML;
var Country= document.getElementById('Country[@field:Unique_ID]').innerHTML;
var Email= document.getElementById('Email[@field:Unique_ID]').innerHTML;
var Url= document.getElementById('Url[@field:Unique_ID]').innerHTML;
var width= document.getElementById('width[@field:Unique_ID]').innerHTML;
var cap= document.getElementById('cap[@field:Unique_ID]').innerHTML;
var subcap= document.getElementById('subcap[@field:Unique_ID]').innerHTML;
var color= document.getElementById('color[@field:Unique_ID]').innerHTML;
var bgcol= document.getElementById('bgcol[@field:Unique_ID]').innerHTML;
First = encodeURIComponent(First);
Last = encodeURIComponent(Last);
Company = encodeURIComponent(Company);
Job = encodeURIComponent(Job);
Telephone = encodeURIComponent(Telephone);
Mobile = encodeURIComponent(Mobile);
Address = encodeURIComponent(Address);
City = encodeURIComponent(City);
State = encodeURIComponent(State);
Zip = encodeURIComponent(Zip);
Country = encodeURIComponent(Country);
Email = encodeURIComponent(Email);
Url = encodeURIComponent(Url);
width = encodeURIComponent(width);
cap = encodeURIComponent(cap);
subcap = encodeURIComponent(subcap);
color = encodeURIComponent(color);
bgcol = encodeURIComponent(bgcol);
document.write("<img src='http://www.sparqcode.com/qrgen?qt=vcard&fName="+First+"&lName="+Last+"&company="+Company+"&title="+Job+"&tel="+Telephone+"&mobile="+Mobile+"&address="+Address+"&city="+City+"&state="+State+"&zip="+Zip+"&country="+Country+"&email="+Email+"&url="+Url+"&width="+width+"&cap="+cap+"&subcap="+subcap+"&color="+color+"&bgcol="+bgcol+"'>");
</script>

Phone Number QR Code

A common use of the QR code is to provide a quick way to dial & save phone numbers.  Many smart phones will immediately dial a phone number that is scanned.

Users can call a number by scanning a QR code with their phone

In this QR code, the following data can be inserted from your table:

  • Telephone number
<div style='display:none' id='Tel[@field:Unique_ID]'></div>
<script>
var Tel = document.getElementById('Tel[@field:UniqueID]').innerHTML;
Tel = Tel.replace(/\D+/g,");
Tel = encodeURIComponent(Tel);
document.write("<img src='http://www.sparqcode.com/qrgen?qt=ph&tel="+Tel+"&col=000000&width=100'>");
</script>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.