{"id":447,"date":"2025-09-17T08:15:52","date_gmt":"2025-09-17T08:15:52","guid":{"rendered":"https:\/\/datasymbol.com\/blog\/?p=447"},"modified":"2025-11-05T07:42:39","modified_gmt":"2025-11-05T07:42:39","slug":"integrating-a-barcode-scanner-with-wix-using-datasymbols-web-sdk","status":"publish","type":"post","link":"https:\/\/datasymbol.com\/blog\/2025\/09\/17\/integrating-a-barcode-scanner-with-wix-using-datasymbols-web-sdk\/","title":{"rendered":"Integrating a Barcode Scanner with Wix Using DataSymbol\u2019s Web SDK"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"637\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/09\/wix-site-scans-barcode.jpg\" alt=\"\" class=\"wp-image-453\" style=\"width:600px\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/09\/wix-site-scans-barcode.jpg 800w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/09\/wix-site-scans-barcode-300x239.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/09\/wix-site-scans-barcode-768x612.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>If you\u2019re building your website using Wix and want barcode scanning, <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">DataSymbol\u2019s Web SDK<\/a><\/strong> provides two simple options for embedding a barcode scanner. With this guide, you can learn from both methods by either getting into a simple embed or more custom elements and event handling control.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Why Add Barcode Scanning?<\/strong><\/p>\n\n\n\n<p>Bar code scanning on your Wix site integrating into your system is capable of powering functionality like:<br>\u2022 Cameras scanning your forms quickly populating a form with user input form fields.<br>\u2022 Storing control or checking stocks from the front\u2010end.<br>\u2022 Customers able to scan product codes, coupons or QR code just from your web page.<br>With <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">DataSymbol\u2019s Web SDK<\/a><\/strong>, this is a complete solution and the user doesn\u2019t need to download a separate application\u2014it all flows in the browser (iframe as well as a custom element) using the device camera.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Two Integration Methods.<\/strong><\/p>\n\n\n\n<p>There are two main strategies, the handbook says:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Hosted Web Barcode Scanner \u2013 embedded based on HTML\/iframe.<\/li>\n\n\n\n<li>Custom Element (Developer Mode) \u2013 event centric, more of an integrated element.<\/li>\n<\/ol>\n\n\n\n<p><strong>Method 1: Hosted Web Barcode Scanner via Custom Code<\/strong><\/p>\n\n\n\n<p>This method uses a script + iframe embed. Steps:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>In your Wix site dashboard go to <strong>Settings \u2192 Advanced \u2192 Custom Code<\/strong>.<\/li>\n\n\n\n<li>Choose to add code in the <strong>\u201cBody \u2013 Start\u201d<\/strong> section.<\/li>\n\n\n\n<li>Paste a JavaScript snippet that sets up an iframe which points to DataSymbol\u2019s hosted scanner service. The snippet includes settings for:\n<ul class=\"wp-block-list\">\n<li>camera resolution (resx, resy)<\/li>\n\n\n\n<li>allowed barcode types (e.g. Code128, Code39, EAN13, UPCA, QRCode)<\/li>\n\n\n\n<li>frame time (frequency of scanning)<\/li>\n\n\n\n<li>alignment (left, right, top, bottom, or none)<\/li>\n\n\n\n<li>opacity, extra styling, etc.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Also in the script is a <strong>message listener<\/strong> (window.onmessage) that listens for scanned barcode data, decodes it, and places the result into a form input on your page. You\u2019ll need the correct HTML id of that input element.<br><br>One caveat: in Wix, the IDs you see in the editor often change when published. To find the correct ID:<br>Open the live site in a browser \u2192 open DevTools (Ctrl+Shift+I) \u2192 locate the input element \u2192 note its actual HTML id. then use that in the script.<\/li>\n<\/ol>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Publish your site. Once live, users should see the scanner and scanning results will populate the target input field.<\/li>\n<\/ol>\n\n\n\n<p><strong>Method 2: Using a Wix Custom Element (Developer Mode)<\/strong><\/p>\n\n\n\n<p>This method gives more structure and uses Wix\u2019s built-in custom elements + JavaScript event handlers.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Enable <strong>Developer Mode<\/strong> in your site editor. This unlocks features like custom elements and allows you to write your own page-code.<\/li>\n\n\n\n<li>Add a <strong>Custom Element<\/strong> via <strong>Embed Code \u2192 Custom Element<\/strong>. Place it wherever you want on the page.<\/li>\n\n\n\n<li>Configure the Custom Element:\n<ul class=\"wp-block-list\">\n<li>Source URL: https:\/\/websdk.datasymbol.com\/srvhost\/wix\/wixDataSymbolScannerElement.min.js<\/li>\n\n\n\n<li>Tag Name: datasymbol-scanner<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Adjust settings via attributes (e.g. scanner settings). The settings are provided in JSON format, similar to the hosted option. <br>For example\n<pre class=\"wp-block-code\" style=\"line-height:1.1\"><code>{\n  \"scanner\": { \"key\": \"\" },\n  \"viewport\": { \"width\": 320 },\n  \"camera\": { \"resx\": 640, \"resy\": 480 },\n  \"barcode\": {\n    \"barcodeTypes\": [\"Code128\", \"Code39\", \"UPCA\", \"EAN13\", \"QRCode\"],\n    \"frameTime\": 1000\n  }\n}<\/code><\/pre>\nIf you want to limit to only QR codes, you can set &#8220;barcodeTypes&#8221;: [&#8220;QRCode&#8221;].<br><\/li>\n\n\n\n<li>\nTo handle the scanned result, use Wix\u2019s page code\n\n\n<ul class=\"wp-block-list\">\n<li>In your page\u2019s onReady function, select the custom element by its ID<\/li>\n\n\n\n<li>Attach an event listener on(&#8216;DataSymbolBarcode&#8217;, (event) =&gt; { \u2026 })<\/li>\n\n\n\n<li>From event.detail, get decoding results, convert from raw data (if needed) to string, then put into a target input field.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Finally, you can dynamically change settings (for example barcode types) after startup, via code such as: \n<pre class=\"wp-block-code\" style=\"line-height:0.1\"><code>$w('#customElement1').setAttribute('ss', '{\"barcode\": {\"barcodeTypes\": &#91;\"QRCode\"]}}');<\/code><\/pre>\n<\/li>\n<\/ol>\n\n\n<p>\n\n\n<p>This allows you to switch modes without reloading the page. <\/p>\n\n\n\n<p><strong>Pros and Cons of Each Method<\/strong><\/p>\n\n\n<\/p>\n<p>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Method<\/strong><\/td><td><strong>Pros<\/strong><\/td><td><strong>Drawbacks<\/strong><\/td><\/tr><\/thead><tbody><tr><td>Hosted iframe &amp; script<\/td><td>Quick to set up; minimal Wix dev skills needed; works broadly<\/td><td>Might require messing around with HTML IDs; less control over layout; styling may be more inflexible<\/td><\/tr><tr><td>Custom Element<\/td><td>Cleaner integration; better event-based control; more flexible; IDs are more stable via wix code<\/td><td>Slightly more setup; requires enabling Developer Mode and writing page-code; possibly a steeper learning curve if unfamiliar with Wix\u2019s APIs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/p>\n<p>\n\n\n<p><strong>Tips &amp; Best Practices<\/strong><\/p>\n\n\n<\/p>\n<p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Test on real devices<\/strong> (mobile\/tablet) as camera permissions &amp; capabilities may differ.<\/li>\n\n\n\n<li><strong>Consider privacy &amp; permissions<\/strong>: ensure users are aware and consent to camera access.<\/li>\n\n\n\n<li><strong>Optimize performance<\/strong>: smaller viewport resolution can improve speed; you may reduce barcode types for faster detection.<\/li>\n\n\n\n<li><strong>Graceful fallback<\/strong>: in case camera is unavailable, handle errors gracefully (e.g. allow manual input).<\/li>\n\n\n\n<li><strong>Styling<\/strong>: make sure the scanner UI (iframe or custom element) matches your site\u2019s design (alignment, size, opacity, border).<\/li>\n<\/ul>\n\n\n<\/p>\n<p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<\/p>\n<p>\n\n\n<p>DataSymbol\u2019s Web SDK gives Wix site builders a flexible, browser-based way to integrate barcode scanning. Whether you choose the quick embed or a more integrated custom element approach, you can enable scanning features that interact with form inputs and page logic. With some attention to IDs, settings, and layout, this adds powerful functionality to sites built with Wix without needing native mobile apps.<\/p>\n\n\n<\/p>\n<p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<\/p>\n<p>\n\n\n<br \/>\n<!-- READY TO GET STARTED START --><\/p>\n<div class='blue_rect blue_rect1' style='margin-top:3em; padding:2em;'>\n<h1 class='h15class'>Ready to get started?<\/h1>\n<div class='v18' style='width:60%'>\n\t\tIntegrate the DataSymbol Web SDK into your Web application 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<p>\t<a class=\"anybutton anybutton3\" href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-integration-with-wix.html\">Barcode Scanner Web SDK<\/a>\n<\/div>\n<p><!-- READY TO GET STARTED STOP --><br \/>\n\n\n<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re building your website using Wix and want barcode scanning, DataSymbol\u2019s Web SDK provides two simple options for embedding a barcode scanner. With this guide, you can learn from both methods by either getting into a simple embed or more custom elements and event handling control. Why Add Barcode Scanning? Bar code scanning on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":453,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[]"},"categories":[11],"tags":[],"class_list":["post-447","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\/447","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=447"}],"version-history":[{"count":18,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/447\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/447\/revisions\/502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media\/453"}],"wp:attachment":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media?parent=447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/categories?post=447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/tags?post=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}