Getting Started with the QRCode
This guide demonstrates how to get up and running with the Kendo UI for jQuery QRCode.
After the completion of this guide, you will be able to achieve the following end result:
<div id="qrcode"></div>
<script>
$("#qrcode").kendoQRCode({
value:"12345ABCD",
errorCorrection: "H",
color: '#6F21A5',
background: '#F1E2FC'
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the QRCode component.
<div id="qrcode"></div>
2. Initialize the QRCode
In this step, you will initialize the QRCode from the <div> element. All settings of the QRCode will be provided in the script statement and you have to describe its configuration in JavaScript.
<div id="qrcode"></div>
<script>
$("#qrcode").kendoQRCode();
</script>
3. Set the Value of the QRCode
You can configure the initial value of the component by using the value option.
<div id="qrcode"></div>
<script>
$("#qrcode").kendoQRCode({
value:"12345ABCD"
});
</script>
4. Set the Error Correction
The QRCode provides you with an option to set error correction level used to encode the value.
<div id="qrcode"></div>
<script>
$("#qrcode").kendoQRCode({
value:"12345ABCD",
errorCorrection: "H"
});
</script>
5. Change the QRCode Colors
You can customize the QRCode appearance by setting the color and background color option.
<div id="qrcode"></div>
<script>
$("#qrcode").kendoQRCode({
value:"12345ABCD",
errorCorrection: "H",
color: '#6F21A5',
background: '#F1E2FC'
});
</script>