<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="qr-wrapper">
<div class="demo-section">
<h3>E-mail</h3>
<div id="qrMail"></div>
</div>
<div class="demo-section">
<h3>URL</h3>
<div id="qrUrl"></div>
</div>
<div class="demo-section">
<h3>Telephone</h3>
<div id="qrTelephone"></div>
</div>
<div class="demo-section">
<h3>Geo Location</h3>
<div id="qrGeoLocation"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#qrMail").kendoQRCode({
value: "mailto:clientservice@telerik.com",
size: 120,
color: "#e15613",
background: "transparent"
});
$("#qrUrl").kendoQRCode({
value: "https://demos.telerik.com/kendo-ui/qrcode/index",
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
$("#qrTelephone").kendoQRCode({
value: "tel:+1-888-365-2779",
errorCorrection: "Q",
size: 120,
color: "#67a814",
border: {
color: "#67a814",
width: 5
}
});
$("#qrGeoLocation").kendoQRCode({
value: "geo:42.65049,23.37925,100",
errorCorrection: "H",
size: 120,
color: "#166a83"
});
});
</script>
<style>
.demo-section {
display: inline-block;
margin: 15px 30px 15px 0;
}
.k-qrcode {
display: inline-block;
margin: 10px 0 0;
border: none;
}
</style>
</div>
</body>
</html>