Skip to main content

Quick start for the Web Barcode Scanner SDK

In this section, you'll learn how to set up the Scanbot Web Barcode Scanner SDK in just a few minutes – thanks to its Ready-to-Use UI!

Add the dependency​

First, simply add the script tag of the SDK to your HTML file. Make sure to put it before your main script.

<html>
    <head>
        <title>ScanbotSDK Quickstart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="document-scanner-container" style="width: 100%; height: 100%;"></div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/scanbot-web-sdk@latest/bundle/ScanbotSDK.ui2.min.js"></script>
    <script src="./main.js"></script>
</html>
warning

CDNs like jsDelivr should only be used for quick prototyping.

For your production environment, please download the SDK and host it on your server.

Initialize the Scanbot SDK​

Since most environments do not allow top-level await, you need to wrap your code in an async function.

(async function() {
    const sdk = await ScanbotSDK.initialize({
        licenseKey: "",
        enginePath: "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@latest/bundle/bin/complete/"
    });
})();

Start the scanner and process the results​

Remember to wrap the scanner creation into the same async block as the initialization.

// Configure the scanner as needed
const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();
// Create the scanner with the config object
const result = await ScanbotSDK.UI.createBarcodeScanner(config);
// Result can be null if the user cancels the scanning process
console.log(result.items?.length + " barcodes found");

🚀 That's it! 🚀 You have successfully integrated a full-featured barcode scanner as an RTU UI controller into your app.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

On this page