Speed up SparkScan integration with Agent Skills
Install the Scandit plugin and use the /sparkscan-web skill so that your AI coding agent can integrate, debug, and customize SparkScan on Web following Scandit's recommended patterns. More info →
Run the following command in your project directory. It detects the supported coding agents you have installed and adds the Scandit plugin to each. Re-run it to update.
npx plugins add scandit/skillsPrefer to set it up yourself? Manual installation steps for each agent →
Advanced Configurations
SparkScan is optimized by default for efficiency, accuracy, and responsiveness. However, there are some cases where you might want to customize the behavior of SparkScan. This guide will show you how to add additional capabilities and further customize SparkScan to best fit your needs.
Advanced Capabilities
Trigger Error State
You may want to introduce logic in your app to show an error message when scanning specific barcodes (for example, barcodes already added to the list, barcodes from the wrong lot etc.). SparkScan offers a built-in error state you can easily set to trigger an error feedback prompt to the user. You will be able to customize:
-
The text message
-
The timeout of the error message: the scanner will be paused for the specified amount of time, but the user can quickly restart the scanning process by tapping the trigger button
tipA high timeout (>10s) typically requires the users to interact with the UI to start scanning again. This is a good choice when you want to interrupt the scanning workflow (for example, because a wrong barcode is scanned and some actions need to be performed). A small timeout (<2s) could allow the user to scan again without having to interact with the app, just momentarily pausing the workflow to acknowledge that a “special” barcode has been scanned.
-
The color of the flashing screen upon scan. You can enable or disable the visual feedback via SparkScanViewSettings.visualFeedbackEnabled and you can control the color via SparkScanBarcodeFeedback.
An error example is here reported:
To emit an error, you have to implement a SparkScanFeedbackDelegate and set it to the SparkScanView:
sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate;
In the SparkScanFeedbackDelegate.getFeedbackForBarcode() you can then return an error or a success feedback:
const sparkScanFeedbackDelegate = {
getFeedbackForBarcode: (barcode: Barcode) => {
if (isValidBarcode(barcode)) {
return new SparkScanBarcodeSuccessFeedback();
} else {
return new SparkScanBarcodeErrorFeedback(
'This code should not have been scanned',
60 * 1000,
Color.fromHex('#FF0000'),
new Brush(Color.fromHex('#FF0000'), Color.fromHex('#FF0000'), 1),
);
}
},
};
You can have different error states triggered by different logic conditions. These errors can show different colors and have different timeouts. For example:

This error state for a code that should not have been scanned.

This error state for a code that has been scanned more than once.