Docs
Guides
Customize the scanner toolbar
Every scanner mounted through the embed loader — fullpage or inline — renders a small, configurable taskbar at the bottom: up to 4 icons for flashlight, camera switch, settings and image upload. You can reorder them, hide the ones you don't want, and set your own highlight color, either straight from the HTML snippet or from JavaScript.
The 4 icons
Every icon is wired to a real, public SDK action — there's no fake/decorative control here.
| id | Icon | Action |
|---|---|---|
torch | Flashlight | Toggles the device torch. Highlighted with your accent color while on. Shows a "not available" notice on devices/browsers without torch support (e.g. most laptops). |
camera | Switch camera | Flips between front and back camera in one tap (not the multi-device picker). |
settings | Settings | Opens the scanner's built-in settings panel (formats, beep tone, AR overlay, multiple scanning). |
upload | Upload image | Opens a file picker and decodes the chosen image, same enhancement pipeline as the live camera. Also the trigger point for scan data capture. |
Quick customization — HTML attributes
The fastest way: add data-toolbar* attributes directly on your
<button data-jsscanner-trigger> (or on the
<div data-jsscanner> if you're using the inline embed). No JavaScript
required — these are read once, when the scanner opens.
Reorder or hide icons
data-toolbar-icons takes a comma-separated list. Only the ids you list are shown, in that order.
<!-- camera and upload only, camera first -->
<button type="button" data-jsscanner-trigger
data-toolbar-icons="camera,upload">
Open Scanner
</button>
<script src="https://your-app.test/embed/YOUR_TOKEN.js"></script>Highlight color
data-toolbar-accent sets the color used for active/highlighted state (currently: torch while on).
<button type="button" data-jsscanner-trigger
data-toolbar-accent="#00c2a8">
Open Scanner
</button>Turn the whole toolbar off
Falls back to the scanner's own default controls (torch bottom-center, upload bottom-right).
<button type="button" data-jsscanner-trigger data-toolbar="off">
Open Scanner
</button>Advanced — JavaScript options
If you're calling mount() or openFullscreen()
yourself instead of using the auto-wired attributes, pass the same options as a toolbar object:
document.addEventListener("jsscanner:ready", () => {
document.getElementById("my-button").addEventListener("click", () => {
JSScannerEmbed.openFullscreen({
toolbar: {
enabled: true,
accentColor: "#00c2a8",
icons: ["torch", "camera", "settings", "upload"],
},
});
});
});The same toolbar option works on JSScannerEmbed.mount(target, { toolbar: {...} }) for inline embeds.
Branding
The "Powered by Scanify" badge sits just below the "Move the finder over a barcode" hint text on every mounted scanner. Its position is fixed and not currently configurable.