{"id":225,"date":"2025-08-18T11:36:24","date_gmt":"2025-08-18T11:36:24","guid":{"rendered":"https:\/\/datasymbol.com\/blog\/?p=225"},"modified":"2025-08-17T12:19:20","modified_gmt":"2025-08-17T12:19:20","slug":"hosted-web-barcode-scanner-effortless-barcode-integration-for-web-sites","status":"publish","type":"post","link":"https:\/\/datasymbol.com\/blog\/2025\/08\/18\/hosted-web-barcode-scanner-effortless-barcode-integration-for-web-sites\/","title":{"rendered":"Hosted Web Barcode Scanner \u2013 Effortless Barcode Integration for Web sites"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"688\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/hosted-barcode-scanner.jpg\" alt=\"\" class=\"wp-image-241\" style=\"width:600px\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/hosted-barcode-scanner.jpg 800w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/hosted-barcode-scanner-300x258.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/hosted-barcode-scanner-768x660.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The <a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test.html\"><strong>Hosted Web Barcode Scanner by DataSymbol<\/strong><\/a> is a streamlined solution designed to simplify the integration of barcode scanning functionality into websites.<\/p>\n\n\n\n<p>In contrast with traditional Web SDK implementations, there is no need to host any extra files on your server. Everything is served up by DataSymbol\u2019s secure infrastructure.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>How it Works<\/strong><\/p>\n\n\n\n<p>At its core, the scanner functions entirely within the user\u2019s browser, using WebAssembly technology to manage the decoding process at their end. The only distinction from a self-hosted SDK is that critical resources\u2014namely &#8220;datasymbol-sdk-hlp.min.js&#8221; and &#8220;datasymbol-sdk.wasm\u2014come not from your own servers but are requested from DataSymbol\u2019s instead.<\/p>\n\n\n\n<p>The scanner appears on your web page as an &lt;iframe&gt;, so it is encapsulated in terms of code by the &lt;iframe&gt; element. This isolation helps to ensure that the scanner cannot interfere with how your website looks, its layout, or even its code base.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Easy Embedding<\/strong><\/p>\n\n\n\n<p>Embedding the Hosted Web Barcode Scanner requires minimal effort. You simply add a few lines of JavaScript to the body of your page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script async&gt;\n    onDataSymbolBarcode = function(decodingResult) {\n        for (var i = 0; i &lt; decodingResult.length; ++i)\n            alert(DSbin2String(decodingResult&#91;i]));\n    };\n&lt;\/script&gt;\n&lt;script async id=\"DataSymbolScript\" src=\"https:\/\/websdk.datasymbol.com\/srvhost\/v2\/scanner.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>The browser must serve your page via HTTPS to comply with camera access requirements, which the scanner enforces.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Customization &amp; Settings<\/strong><\/p>\n\n\n\n<p>The scanner offers adjustable settings to suit varying integration needs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DSHostSettings<\/strong> \u2013 controls aspects like positioning (leftPos, topPos), size (viewWidth, viewHeight), alignment (xAlign, yAlign), opacity, additional CSS (addFrameStyle), and license key (sWebSDKKey). Without a valid key, the scanner operates in demo mode (appending an asterisk to decoded barcodes).<\/li>\n\n\n\n<li><strong>DSScannerSettings<\/strong> \u2013 handles camera resolution (camera.resx, camera.resy), barcode types (barcodeTypes), and frame scanning interval (frameTime).<\/li>\n<\/ul>\n\n\n\n<p>Example of overriding defaults:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script async&gt;\n    var DSHostSettings = {\n        viewWidth: 640,\n        viewHeight: 480,\n    };\n    var DSScannerSettings = {\n        barcode: {\n            barcodeTypes: &#91;'QRCode'], \/\/ Only decode QR codes\n        },\n    };\n    onDataSymbolBarcode = function(decodingResult) {\n        for (var i = 0; i &lt; decodingResult.length; ++i)\n            alert(DSbin2String(decodingResult&#91;i]));\n    };\n&lt;\/script&gt;\n&lt;script async id=\"DataSymbolScript\" src=\"https:\/\/websdk.datasymbol.com\/srvhost\/v2\/scanner.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This flexibility enables developers to tailor the scanner\u2019s behavior and appearance according to the specific use case.<\/p>\n\n\n\n<p>The <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test.html\">Hosted Web Barcode Scanner<\/a><\/strong> offers a hassle-free, secure, and highly customizable way to add barcode scanning capabilities to your web application. Its seamless integration, sandboxed approach via an iframe, and client-side WebAssembly decoding make it a compelling choice for developers seeking rapid deployment without compromising control or performance.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!-- READY TO GET STARTED START -->\n<div class='blue_rect blue_rect1' style='margin-top:3em; padding:2em;'>\n\n\t<h1 class='h15class'>Ready to get started?<\/h1>\n\n\t<div class='v18' style='width:60%'>\n\t\tIntegrate the Hosted Barcode Scanner into your Web site in under an hour. Check out our tutorials, documentation, source code, or download the demo app to get started right away.\n\t<\/div>\n\n\t<br><br>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner.html\">Hosted Barcode Scanner<\/a>\n\t<br>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test.html\">OnLine Test 1<\/a>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test-2.html\">OnLine Test 2<\/a>\n\t<br><br>\n<div class='v18'>When you open the online test, the barcode scanner will start automatically. Your device (desktop or mobile) must have a camera.<\/span>\n<\/div>\n<!-- READY TO GET STARTED STOP -->\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Hosted Web Barcode Scanner by DataSymbol is a streamlined solution designed to simplify the integration of barcode scanning functionality into websites. In contrast with traditional Web SDK implementations, there is no need to host any extra files on your server. Everything is served up by DataSymbol\u2019s secure infrastructure. How it Works At its core, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":241,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-barcode-scanner-web-sdk"],"_links":{"self":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":11,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions\/242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media\/241"}],"wp:attachment":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}