Skip to main content
Speed up Smart Label Capture integration with Agent Skills

Install the Scandit plugin and use the /label-capture-web skill so that your AI coding agent can integrate, debug, and customize Smart Label Capture 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/skills

Prefer to set it up yourself? Manual installation steps for each agent →

Advanced Configurations

Customize the Overlay Appearance​

To customize the appearance of the overlay, you can implement a LabelCaptureBasicOverlayListener.

The method brushForLabel() is called every time a label captured and brushForField() is called for each of its fields to determine the brush for the label or field.

import { Brush, Color } from "@scandit/web-datacapture-core";

overlay.listener = {
  brushForField: (overlay, field, label) => {
    switch (field.name) {
      case "<your-barcode-field-name>":
        return new Brush(
          Color.fromRGBA(0, 255, 255, 0.5),
          Color.fromRGBA(0, 255, 255, 0.5),
          0
        );
      case "<your-expiry-date-field-name>":
        return new Brush(
          Color.fromRGBA(255, 165, 0, 0.5),
          Color.fromRGBA(255, 165, 0, 0.5),
          0
        );
      default:
        return Brush.transparent;
    }
  },
  brushForLabel: (overlay, label) => Brush.transparent,
  onLabelTapped: (overlay, label) => {
    // Handle user tap gestures on the label.
  },
};
tip

Use brush colors with transparency (alpha < 100%) to not occlude the captured barcodes or texts.