We've tried to make adding barcode scanning to your website as easy as possible. At a high level, these are the steps you'll need to follow:
On this page, we'll cover everything you need to know.
All you need is an email address and a password to create an account. We will send you a welcome email with a link to verify your account. Once you've done that, you're ready to go.
These are things we won't do:
Once you're logged in, you'll see a menu option called "My Scanners" under the "My Account" heading. On this page you can create new barcode scanners or edit the scanners you've already made. Click on the "Create New Scanner" button to begin creating a new scanner.
At the top of the scanner editor, you'll notice an option to "Toggle Help". This will display captions below each field with further information to help you.
When your scanner is set up the way you want it, click "Save" to return to your list of scanners.
Now let's call attention to the options you'll see next to each scanner in your list.
Opens the scanner editor and allow you to make changes.
Shows you the scanner ID as well as the code that you need to deploy the scanner.
Launches the scanner so you can see what it looks like. This load will not count against your quota.
Shows you a graph with recent load and scan statistics for this scanner.
Deletes the scanner after asking you to confirm.
At the moment, there are two scanner libaries to choose from when creating a scanner, ZXing and the Barcode Detection API. The first, ZXing, is an open source library that allows you to scan many different types of barcodes and should work on most devices. The second, Barcode Detection API, is actually a built-in feature in some browsers.
<script id="BarcodeScannerIOScript" src="https://barcodescanner.io/js/BarcodeScannerIO.min.js" data-api-key="[API_KEY]"></script>
<input type="text" id="serialNumber"> <button type="button" onclick="BarcodeScannerIO.openScanner('[SCANNER_ID]', '#serialNumber')"> Scan </button>
When a scanner is launched and attemps to access the camera, the browser will validate that the user has already been given camera permission or will prompt the user to grant it.
There are two types of scanner available in the library. The first is opened by calling the openScanner method. This scanner opens in an iframe on an overlay. It provides a smooth experience in that it becomes part of the current page. However, this also means that the hosting site (your site) must use a secure connection (https). Permission to access the camera must also be granted to your site.
The second type of scanner is opened by calling the openWindowScanner method and opens in a popup window. It provides a similar experience but through an external window. A potential drawback to this method is that popup may be blocked by the browser. The potential benefits are that the scanner can be used on non-secure sites (http) and that permission to access the camera must be granted to barcodescanner.io.
BarcodeScannerIO uses the following user properties. These properties are not meant to be addressable or read directly. Instead, they are set through the init method or through options when the scanner is opened.