Documentation

Logo

Overview


QR codes are a popular type of two-dimensional barcode. They are also known as hardlinks or physical world hyperlinks.

QR codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example URL, contact information, a telephone number, even a poem! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones.

For more information check out Google's QR codes documentation.

The jQuery uQR is a jQuery plugin written by Marius Stanciu - Sergiu for Userdot, a plugin that will allow you to embed QR codes into your web pages. You might be looking for the QR code generator.

Download


You can download the last version of the plugin, or browse the archive for older versions.

Usage

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.

Demo

Creates a simple text QR code with the default options.

Creates a call QR code, that your visitors can use to call your phone number.

Creates a geolocation QR code.

Creates a email QR code, that your visitors can scan and send you an email to the specified address.

Creates a sms QR code, that your visitors can scan and send you an SMS.

Creates a url QR code, that your visitors can scan and go to a specified address.

To Top