QR onsite Decoder powered by 
-labs
The on-site QR Decoder Script is a js library which acts as an interface to connect to a webservice in order to decode images containing QR codes. It wraps a few divs around your QR code image and if you click on it, it makes a request to a server to get the decoded text.
Add a single script tag to your website, a CSS class to your QR-Code images and your website visitors won't need a smartphone to scan QR codes anymore.
In order to decode a QR-code a single click on the image returns the content.
Add a single script tag to your website, a CSS class to your QR-Code images and your website visitors won't need a smartphone to scan QR codes anymore.
In order to decode a QR-code a single click on the image returns the content.
Give it a try, test now!
This is a sample section, hover over the QR codes and feel free to decode them ;)
Why is it useful?
Nowadays there are still lots of people without a smartphone. It's hard to target people with QR codes if they can't read the content of it. This makes the QR Decoder Script really useful.
It has gzipped and minified less than 1.5kB but generates big value for your website.
Summing up:
It has gzipped and minified less than 1.5kB but generates big value for your website.
Summing up:
- user can decode QR codes with only one click on the code image
- footprint of less than 1.5kB
- it's very easy to integrate and use
How to use
Simply embed the qr-decoder.js script right before the end of the body tag and call QRdecoder.init when the page is done with loading. In order to mark your images as QR-codes you need to add a css classname "qr-code" to them. The QR Decoder script will then identify all the codes and add the decoding functionality. Here's a snippet how it could look like:
Configuration Parameters
The QR decoder script is also highly customizable. Simply pass an object with the following (all optional) properties in order to customize it:- infoStyle: The css style of the info message (displayed on hover)
- infoMessage: The message you want to display in the info area
- infoPosition: Either "top" or "bottom"
- messageStyle: The css style of the message where the decoded text will be displayed
- messagePrefixHTML: The message you want to display before the actual decoded content
- callback: provide a function that will get called after decoding a code: gets content & HTML image element as parameters
Contact
If you have any problems or questions regarding the script,
please don't hesitate to contact us: products@w-labs.at
please don't hesitate to contact us: products@w-labs.at
