Skip to main content

Web Document Scanner SDK - Quick Start

In this section, you'll learn how to set up the Scanbot Document Scanner SDK for the Web, all in under 10 minutes – thanks to our Ready-to-Use UI!

Add the Dependency​

First, simply add the script tag of the SDK to your HTML file. Make sure it's 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

We strongly recommend AGAINST using jsdelivr for your production environment. Please download the SDK and host it on your server. We only use it for the quickest proof-of-concept implementation.

Initialize Scanbot SDK​

Since most environments still 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 initialization.

// Configure the scanner as needed
const config = new ScanbotSDK.UI.Config.DocumentScanningFlow();
// Create the scanner with the config object
const result = await ScanbotSDK.UI.createDocumentScanner(config);
// Result can be null if the user cancels the scanning process
console.log(result.document);

🚀 That's it! 🚀 You have successfully integrated a full-featured document 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 your free Trial License

On this page