New to Kendo UI for jQuery? Start a free 30-day trial

Overlay

configuration

The overlay configuration which alows you to choose from predefined layouts or insert a custom image.

Note: Always test if the code reads correctly with the overlay. Depending on the length of the value and the size of the overlay, you might need to raise the errorCorrection to "M" or "H".

overlay

Object

<div id="qrCode"></div>
<script>
$("#qrCode").kendoQRCode({
   value: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
   overlay:{
       url: 'https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg',
       width: 40
   },
   errorCorrection: "M"
 });
</script>

overlay.height

Number

The height of the overlay in pixels.

<div id="qrCode"></div>
<script>
$("#qrCode").kendoQRCode({
   value: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
   overlay:{
       url: 'https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg',
       height: 40
   },
   errorCorrection: "M"
 });
</script>

overlay.imageUrl

String

The URL of the displayed overlay image.

<div id="qrCode"></div>
<script>
$("#qrCode").kendoQRCode({
   value: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
   overlay:{
       url: 'https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg',
       height: 40
   },
   errorCorrection: "M"
 });
</script>

overlay.type

String

Available options are image and swiss. When set to image you have to specify the url source of the image. If set to swiss a Swiss QR Code is created.

Default: "custom"

<div id="qrCode"></div>
<script>
$("#qrCode").kendoQRCode({
   value: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
   overlay:{
      type: "swiss"
   },
   errorCorrection: "M"
 });
</script>

overlay.width

Number

The width of the overlay in pixels.

<div id="qrCode"></div>
<script>
$("#qrCode").kendoQRCode({
   value: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
   overlay:{
       url: 'https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg',
       width: 40
   },
   errorCorrection: "M"
 });
</script>