Barcode Scanner Integration with Wix

Wix © ( provides a convenient platform for creating sites.

In this tutorial, we will show you two ways to embed a barcode into a site created using

This is a very simple method. You can find everything you need to know about this here.

You need to copy the code given here into the "body" your HTML pages. Below, we will show you step by step how to do it.

Go to the dashboard of your Wix site and select "Settings". Then tabs "Advanced" and "Custom code".

Select Setting, Custom Code of your site

In the section "Body - Start" click "Add Code".

Copy the scanner code into the field "Paste the code snippet here".

Wix add barcode scanner custom code

Here you can select which pages of your Wix site the barcode scanner shows.
Scanner codes will be embedded at the beginning of the "body" tag. But do not be embarrassed by this; you can place the scanner window anywhere in the page, for example, by setting the alignment.
const xAlign = 'right';				//none, left, right, float
const yAlign = 'top';				//none, top, bottom, float

Complete Code in "Paste the code snippet here" field

<script id='DataSymbolScript'>
	const viewWidth = 320;
	const viewHeight = 240;
	var leftPos = 0;
	var topPos = 0;
	const xAlign = 'right';				//none, left, right, float
	const yAlign = 'top';				//none, top, bottom, float
	const alignGap = 10;
	const opacity = 1;
	const addFrameStyle = '';			//additional settings, for example: 'border: solid 2px #fff;'
	const sWebSDKKey = '';

	var scannerSettings = {
		camera: {
			resx: 640,
			resy: 480,
		barcode: {
			barcodeTypes: ['Code128', 'Code39', 'EAN13', 'UPCA', 'QRCode'],
			frameTime: 1000,

	var myFrame = document.createElement("iframe");
	var bStatic = (xAlign == 'none') && (yAlign == 'none')
	var myJSON = JSON.stringify(scannerSettings); 
	var srcURL = '' + encodeURIComponent(myJSON) + '&tid=' + sWebSDKKey;
	var myFrame = document.createElement("iframe");
	myFrame.setAttribute('id', 'DataSymbolFrame');
	myFrame.setAttribute('src', srcURL);
	myFrame.setAttribute('allow', 'camera');
	myFrame.setAttribute('style', 'opacity:' + opacity + ';position:' + (bStatic?'static':'fixed') + ';z-index:10001;left:' + leftPos + 'px;top:' + topPos + 'px;overflow:hidden; display:block; margin:0; padding:0; width:' + viewWidth + 'px; height:' + viewHeight + 'px;' + addFrameStyle);
	myFrame.setAttribute('scrolling', 'no');
	myFrame.setAttribute('frameborder', '0');
	var currScript = document.getElementById("DataSymbolScript");
	currScript.parentNode.insertBefore(myFrame, currScript.nextSibling);
	window.addEventListener("resize", function(e)
	} );
	document.body.onload = function(e)
	function setWinPos()
		if( xAlign != 'none' )
			if( xAlign == 'left' ) leftPos = alignGap;
			if( xAlign == 'right' ) leftPos = document.documentElement.clientWidth - viewWidth - alignGap;
		if( yAlign != 'none' )
			if( yAlign == 'top' ) topPos = alignGap;
			if( yAlign == 'bottom' ) topPos = document.documentElement.clientHeight - viewHeight - alignGap;
		} = leftPos + 'px'; = topPos + 'px';

	function bin2String (barcodeResult, dataEncoding) {
		return String.fromCharCode.apply(null,;

	window.onmessage = function (e){
		if (!e || ! || != 'DataSymbolBarcode')
		var barcodeResult =;
		for (var i = 0; i < barcodeResult.length; ++i) {
			var sBarcode = bin2String(barcodeResult[i]);

			document.getElementById("input_comp-l4pn5fag").value = sBarcode; //replace "input_comp-l4pn5fag" with your own

It is almost everything. Now you need to press "Publish" and the scanner will start working.

Wix barcode scanner works

All that remains is to get the decoded barcode. Measures you want the barcode to appear in the "#input1".

Wix add barcode in input field

Here lies the slight inconvenience of this method of embedding the scanner barcodes.
The fact is that you cannot use "id" HTML of the element, which you see in the editor Wix (in this case "#input1"). When published, Wix converts this "id" to a completely different "id".
How to determine the actual HTML element "id” on your Wix site? Open your site in a browser and click Ctrl+Shift+I, Find the desired HTML element and its "id".

Wix. find barcode input field id

You can now use this "id".
document.getElementById("input_comp-l4pn5fag").value = sBarcode; //replace "input_comp-l4pn5fag" with your own

Now the barcode scanner is fully operational and sends the barcode to the required HTML page field.

Wix. now barcode scanner completely works

This method of adding a barcode scanner uses only documented capabilities Wix Custom Element. You don’t need to resort to all sorts of tricks, for example, to find the element "id" it was in the previous way.

And so let’s start. First, enable "Developer Mode". This will be needed a little later when you need to add barcode event handler.

Wix. enable developer mode for barcode decoder emebedding

Click the icon "+", then "Embed Code" and "Custom Element".
Wix. add barcode scanner custom element

Will be added to the page default Wix custom element. Place it anywhere on the page.

Wix. custom element has been added

Now you need to set it up. Click "Choose Source". You will have a window in which you need to specify the URL of the element and its "Tag Name".

Wix. choose barcode scanner custom element source URL and tag name

Server URL:
Tag Name:

Press "Publish", and the scanner will start working. Barcodes will be decoded. By default, the scanner starts with the following settings description of all Web barcode settings can be found here:
	"scanner": {
		"key": ""
	"viewport": {
		"width": 320
	"camera": {
		"resx": 640,
		"resy": 480
	"barcode": {
		"barcodeTypes": ["Code128", "Code39", "UPCA", "EAN13", "QRCode"],
		"frameTime": 1000
For settings the format JSON is used.

To change the default settings, you can click "Set Attributes"

Wix. change Wix barcode reader default settings

For example, to decode only the QRCode you can set the following attribute "ss" (Scanner Settings):

Attribute Name:
	"barcode": {
		"barcodeTypes": ["QRCode"]
Wix. change Wix barcode reader default settings to decode only QRCode (for example)

All that remains is to add a barcode event handler, to get the barcode.

To do this, select the page where the barcode scanner is located from the Developer panel. And in the method "onReady" write following code:
$w.onReady(function () {
	// Write your JavaScript here
	// To select an element by ID use: $w('#elementID')
	// Click 'Preview' to run your code
	function bin2String (decodingResult, dataEncoding) {
		return String.fromCharCode.apply(null,;

	$w('#customElement1').on('DataSymbolBarcode', (event) => {
 		if (!event.detail)
		var decodingResult = event.detail;
		for (var i = 0; i < decodingResult.length; ++i) {
			var sBarcode = bin2String(decodingResult[i]);
			$w("#input1").value = sBarcode;

Wix. Catch Wix barcode decoder event handler

customElement1 - name of your Barcode Scanner custom element
input1 - name of input field for Barcode

Don’t forget to click "Publish", to see all the changes on your site.

Now the scanner works, barcode appears in the "Barcode" field.
Wix. now Wix Barcode Scanner custom element works

And later you can dynamically change the settings of the scanner barcode after it has already started.

For example, in the Wix editor you can add a "Button" and in the next "Event Handler" for it.
export function button1_click(event) {
	// This function was added from the Properties & Events panel. To learn more, visit
	// Add your code for this event here: 
		$w('#customElement1').setAttribute('ss', '{"barcode": {"barcodeTypes": ["QRCode"]}}');