First you need to include the jQuery library, since uQr is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Secondly, you need to include the jQuery uQr javascript file into your page. You can do it by adding the code below to your page.
<script type="text/javascript" src="js/jquery.uqr.js"></script>
Now, you have two possibilities of embedding a QR code.
1. Create the image tag that will be replaced with the QR code image.
<img src="#" id="qr1" alt="" />
For the last part you activate the uQr function on the element you just created, so, we trigger the function on the image with the id qr1.
<script type="text/javascript">
$(document).ready(function() {
$('#qr1').uQr({
type : 'text',
text : 'This is the text to embed'
});
});
</script>
2. Add a div with a specific id to your page, for example :
<div id="qr2"></div>
We trigger the function on the div with the id qr2 AND we add the create: true option, which signals the library to create the image tag inside the container div.
<script type="text/javascript">
$(document).ready(function(){
$('#qr2').uQr({
create : true,
type : 'text',
text : 'This is the text to embed'
});
});
</script>
Options
size - size of the QR code. Can be omitted, default is 230.
encoding - encoding of the QR. Can be omitted, could be one of: UTF-8/Shift_JIS/ISO-8859-1, default is UTF-8
type - QR type. Can be: text/url/sms/email/call/location/wifi/contact, default is text
create - if the plugin will create an image tag inside the container or just replace the src of an already existing image tag. Can be true or false, default is false.
text - the text to encode in the QR. Only needed for text, email or sms QR codes.
number - the phone number if you want to create a sms or call QR code.
email - the email address in case you want to create an email QR code.
subject - the subject in case you want to create an email QR code.
latitude - the geographical latitude for the geolocation QR code.
longitude - the geographical longitude for the geolocation QR code.
address - the home address in case you want to create a contact QR code.
name - the name of the person in case you want to create a contact QR code.
url - the URL address in case you want to create an url or contact QR code.
alt - the alt code for the created/replaced image. Can be omitted.
note - a note in case you want to create a contact QR code.