In order to use our SDK for the Web on your site created with the Bubble.io low code platform, you will need to create a custom JavaScript plugin. It can be done at https://bubble.io/my_plugins.
Since this platform doesn't support ES modules, please reach out to support@scandit.com to get a UMD build that can be used on Bubble.io.
Once you receive one, follow the below steps:
Importing static library files:
- Add static files of the UMD build under
Plugin > Shared > Shared assets and resources:
2. You can then copy the scandit.js path and add a <script> tag under HTML Header (above on the same page):
Now, our API can be accessed via the Scandit.Core and Scandit.Barcode namespaces now.
Note: Since Bubble.io doesn't support the await operator and operations are asynchronous, you need to await then using .then(), as shown below.
3. Paste the below code snippet under Plugin > Actions > Action code:
function(properties, context) {
// Configure and load the library using your license key. The passed parameter represents the location of the wasm
// file, which will be fetched asynchronously. You must `await` the returned promise to be able to continue.
Scandit.Core.configure({
licenseKey: "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE",
libraryLocation: "https://cdn.jsdelivr.net/npm/@scandit/web-datacapture-barcode@7.0.2/sdc-lib/",
moduleLoaders: [Scandit.Barcode.barcodeCaptureLoader({ highEndBlurryRecognition: false })],
}).then(() => {
// Create the data capture context
return Scandit.Core.DataCaptureContext.create();
}).then((createdContext) => {
context = createdContext;
camera = Scandit.Core.Camera.default;
const cameraSettings = Scandit.Barcode.BarcodeCapture.recommendedCameraSettings;
if (camera) {
return camera.applySettings(cameraSettings);
}
return Promise.resolve();
}).then(() => {
return context.setFrameSource(camera);
}).then(() => {
const settings = new Scandit.Barcode.BarcodeCaptureSettings();
// The settings instance initially has all types of barcodes (symbologies) disabled. For the purpose of this
// sample we enable a very generous set of symbologies. In your own app ensure that you only enable the
// symbologies that your app requires as every additional enabled symbology has an impact on processing times.
settings.enableSymbologies([
Scandit.Barcode.Symbology.Code128,
Scandit.Barcode.Symbology.Code39,
Scandit.Barcode.Symbology.QR,
Scandit.Barcode.Symbology.EAN8,
Scandit.Barcode.Symbology.UPCE,
Scandit.Barcode.Symbology.EAN13UPCA,
]);
// Some linear/1D barcode symbologies allow you to encode variable-length data. By default, the Scandit
// Data Capture SDK only scans barcodes in a certain length range. If your application requires scanning of one
// of these symbologies, and the length is falling outside the default range, you may need to adjust the "active
// symbol counts" for this symbology. This is shown in the following few lines of code for one of the
// variable-length symbologies.
const symbologySettingsCode128 = settings.settingsForSymbology(Scandit.Barcode.Symbology.Code128);
symbologySettingsCode128.activeSymbolCounts = [6, 7, 8];
symbologySettingsCode128.isColorInvertedEnabled = true;
return Scandit.Barcode.BarcodeCapture.forContext(context, settings);
}).then((createdBarcodeCapture) => {
barcodeCapture = createdBarcodeCapture;
return barcodeCapture.setEnabled(false);
}).then(() => {
barcodeCapture.addListener({
didScan: (barcodeCapture, session) => {
barcodeCaptureOverlay.setViewfinder(null)
.then(() => barcodeCapture.setEnabled(false))
.then(() => {
const barcode = session.newlyRecognizedBarcode;
const symbology = new Scandit.Barcode.SymbologyDescription(barcode.symbology);
alert(`Scanned: ${barcode.data ?? ""} (${symbology.readableName})`);
});
}
});
return Scandit.Core.DataCaptureView.forContext(context);
}).then((createdView) => {
view = createdView;
view.connectToElement(document.querySelector("#data-capture-view"));
view.addControl(new Scandit.Core.CameraSwitchControl());
return Scandit.Barcode.BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
barcodeCapture,
view,
Scandit.Barcode.BarcodeCaptureOverlayStyle.Frame
);
}).then((createdOverlay) => {
barcodeCaptureOverlay = createdOverlay;
const viewfinder = new Scandit.Core.RectangularViewfinder(
Scandit.Core.RectangularViewfinderStyle.Square,
Scandit.Core.RectangularViewfinderLineStyle.Light
);
return barcodeCaptureOverlay.setViewfinder(viewfinder);
}).then(() => {
return camera.switchToDesiredState(Scandit.Core.FrameSourceState.On);
}).then(() => {
return barcodeCapture.setEnabled(true);
}).catch(error => {
console.error('Error in scanner setup:', error);
});
}4. Now you can add a simple button and a div container to your app:
At this point, we should make sure to link the DataCaptureView with the created html container and run the relevant JS code on a button click.
5. In case a different id for the html element is used, make sure to update it in the following line in your code:
view.connectToElement(document.querySelector("#data-capture-view")); 6. To execute this JS code on a button click, go to App > Workflow:
- Add a new event:
- Select the relevant button.
- Run the plugin action when the button is clicked.
7. Now you can copy the id of your app.
For instance, it will be scandit for the following URL: https://bubble.io/page?id=scandit&tab=Workflow&name=index.
8. Go to your plugin and paste the copied id under Actions > App to test the plugin:
9. Then click on the Go to test app button and preview your app. At this point you should see a working scanner after clicking on the button.
WebSDK 5.X (Legacy)
Creating a custom plugin:
- Click on "New plugin" and provide a name of your plugin.
- Once it's created, select the "Shared" tab and provide a script tag to include our main library:
3. Now go to the "Actions" tab and create a new action with the name of your choice:
This will allow you to execute your custom JavaScript code when this action is called and this is where we want to integrate our web scanner.
4. Provide a JS code related to our scanner depending on your needs. You can use the below snippet as a starting base:
function(properties, context) {
const key = "YOUR_LICENSE_KEY_IS_NEEDED_HERE";
ScanditSDK.configure(key, {
engineLocation: "https://cdn.jsdelivr.net/npm/scandit-sdk@5.x/build",
})
.then(function () {
return ScanditSDK.BarcodePicker.create(document.getElementById("your_html_container"), {
playSoundOnScan: true,
vibrateOnScan: true,
}).then(function (barcodePicker) {
scanditBarcodePicker = barcodePicker;
const scanSettings = new ScanditSDK.ScanSettings({
enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39", "itf", "qr", "data-matrix"],
searchArea: { x: 0, y: 0.333, width: 1, height: 0.333 },
});
barcodePicker.applyScanSettings(scanSettings);
barcodePicker.on("scan", function (scanResult) {
alert(scanResult.barcodes[0].data);
});
barcodePicker.on("scanError", function (error) {
console.error(error);
});
});
})
.catch(function (error) {
alert(error);
});
}
Please make sure to provide your license key containing a domain name of your published site as well as the corresponding CSS selector of the HTML container element which will be used to present the scanner (by replacing the "your_html_container").
Using the created plugin in your Bubble.io app:
1. In case you want to pass the scan result into some specific element, e.g. an input field, go to your app and check its CSS selector in the dev tools as shown below:
Now replace this line:
alert(scanResult.barcodes[0].data);
with the following line:
document.getElementById("barcode-result").value = scanResult.barcodes[0].data;
where "css_selector_of_your_input_field" is the copied CSS selector of your input field.
2. Go back to your custom plugin, select the "Actions" tab, provide the name of your app and click "Go to test app" button:
3. Open the "Workflow" tab and add appropriate action to start the scanner. In our case the "Start Scanner" action was added on a "Scan a button" button click:
4. Now you can preview your page and scanner should already work:
Note: You can test our live sample at https://scanditapp.bubbleapps.io/version-test?debug_mode=true.