ClassyQR
QR codes, the easy way!

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.

ClassyQR is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that will allow you to embed QR codes into your web pages.

Download it

First you need to include the jQuery library, since ClassyQR is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyQR javascript file into your page. You can do it by adding the code below to your page.

Now, you have two possibilities of embedding a QR code.

1. Create the image tag that will be replaced with the QR code image.

For the last part you activate the ClassyQR() function on the element you just created, so, we trigger the function on the image with the id qr1.

$("#qr1").ClassyQR({
    type: 'text',
    text: 'This is the text to embed'
});

2. Add a div with a specific id to your page, for example :

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.

$("#qr2").ClassyQR({
    create: true,
    type: 'text',
    text: 'This is the text to embed'
});

• Parameters

  ---

• 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 orISO-8859-1, default is UTF-8
• type - QR type. Can be: text, url, sms, email, call, location, wifi or contact, default is text
• create - whether 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

$('.qr').ClassyQR({
    create: true,
    type: 'location',
    latitude: '44.437711',
    longitude: '26.097367'
});

$('.qr').ClassyQR({
    create: true,
    type: 'call',
    number: '+447455357'
});