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

Kendo UI QRCode supports different types of overlay.

Swiss QR Type

The QRCode component supports the Swiss QR Code format. Enabling the swiss type of the overlay will add a swiss cross in the QRCode.

The following implementation demonstrates the code needed for the Swiss Type:

<div id="example" class="demo-section k-content center">
    <div class="qr-wrapper">
            <h3>Swiss</h3>
            <div id="qrSwiss"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#qrSwiss").kendoQRCode({
                value: "SPC  0200  1  CH4431999123000889012  S  Robert Schneider AG  Rue du Lac  1268  2501  Biel  CH  1949.75  CHF  S  Pia-Maria Rutschmann-Schnyder  Grosse Marktgasse  28  9400  Rorschach  CH  QRR  210000000003139471430009017 Order of 15 June 2020  EPD  //S1/10/10201409/11/200701/20/140.000-53/30/102673831/31/200615/32/7.7/33/7.7:139.40/40/0:30  Name AV1: UV;UltraPay005;12345  Name AV2: XY;XYService;54321",
                size: 173,
                overlay: {
                    type: "swiss",
                    height: 26,
                    width: 26
                }
            });
        });

    </script>

    <style>
        .k-qrcode {
            display: inline-block;
            margin: 10px 0 0;
            border: none;
        }
    </style>
</div>

Overview of the Swiss Type:

Kendo UI for jQuery QRCode Swiss Type

QRCode Image Type

The image type of the overlay is adding an image in the QRCode.

The following implementation demonstrates the code needed for the Image Type:

<div id="example" class="demo-section k-content center">
    <div class="qr-wrapper">
        <h3>Image</h3>
        <div id="qrImage"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#qrImage").kendoQRCode({
                value: "https://docs.telerik.com/kendo-ui/controls/qrcode/types",
                size: 173,
                overlay: {
                    imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
                    width: 40,
                    height: 40
                }
            });
        });

    </script>

    <style>
        .k-qrcode {
            display: inline-block;
            margin: 10px 0 0;
            border: none;
        }
    </style>
</div>

Overview of the Image Type:

Kendo UI for jQuery QRCode Image Type

See Also

In this article