What’s the Easiest Way to Add a Barcode Scanner to Your Website?

In this section, we’ll answer exactly that. No matter what platform or engine your site is running on, the process is equally simple everywhere.

WordPress Example

Our own blog is powered by WordPress. Here’s how easy it is to add a barcode scanner to any post or page:

• Insert an HTML block anywhere on the page.
• Paste the following HTML code into the block:

<script async>
  onDataSymbolBarcode = function( decodingResult ) {
    for (var i = 0; i < decodingResult.length; ++i)
      alert( DSbin2String(decodingResult[i]) );
    };
</script>
<script async id="DataSymbolScript" src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script>

Save and update the page.

That’s it! Your barcode scanner is now live.

Barcode Scanner Settings

Our Hosted Barcode Scanner comes with many configuration options, which you can view here.

By default, it decodes the following symbologies: Code128, Code39, EAN13, UPCA, and QR Code.
You can also enable additional barcode types supported by our Barcode Web SDK.

WordPress Plugin Option

If you prefer, you can also use our Barcode Scanner Plugin for WordPress. In this case, the plugin is installed directly on your hosting environment. For some users, this may be more convenient—but functionally, there’s no significant difference.

Privacy and Security

The only distinction between using the Hosted Barcode Scanner and the Barcode Web SDK (or the WordPress Plugin) is where the WASM and JavaScript files are hosted.

• With the Hosted Barcode Scanner, these files are served from our secure servers.
• With the Barcode Web SDK or WordPress Plugin, they’re hosted directly on your website.

In both cases, barcode decoding happens locally on the user’s device. Barcodes never leave the device, and the camera video stream is processed locally as well, ensuring maximum privacy and security.

If a camera is connected to your device, pressing the ‘Start Hosted Barcode Scanner’ button should launch the Hosted Barcode Scanner, the code for which is provided above in this blog.

When scanning, the decoded barcode includes the ‘*’ symbol because the scanner is operating in demo mode.