How to use WebSDK with Bubble.io platform?

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.

 

Creating a custom plugin: 

1. Click on "New plugin" and provide a name of your plugin.
2. 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.