QR Scanner
The QR Scanner module gives your website the ability to trigger the device camera and scan QR codes from inside the app. Your website starts the scan via a JavaScript message, and the app sends the result back — all without leaving the app or opening a separate native screen.
For full implementation details and advanced usage, see the QR Scanner JavaScript Bridge article.
How It Works
- Your website sends a message to the app using
appilix.postMessage. - The app opens the camera in a QR scanning view.
- When a code is scanned, the result is sent back to your website via
appilix.onmessage. - Your website handles the result — redirecting the user, filling in a form, or processing the scanned data.
Appearance
Page Title
The title displayed at the top of the QR scanner screen.
- Default:
QR Scan - Maximum length: 50 characters
Scanning Frame Color
The color of the rectangular frame that guides the user to align the QR code.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Animated Scan Line Color
The moving horizontal line inside the scanning frame.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Scan Line Shadow Color
A soft glow behind the scan line that makes it more visible against bright or dark backgrounds. Supports 8-digit HEX for opacity.
- Light Mode default:
#186E62B3(70% opacity) - Dark Mode default:
#186E62B3
Result Dialog
When a QR code is successfully scanned, a dialog appears showing the decoded text. If enable_confirmation_popup was set to true in the JS trigger, the user must tap OK to send the result to your website.
Dialog Background Color
- Light Mode default:
#ffffff - Dark Mode default:
#1C1C1E
Dialog Title
The heading shown at the top of the result dialog.
- Default:
QR Result - Maximum length: 70 characters
Dialog Title Color
- Light Mode default:
#000000 - Dark Mode default:
#ffffff
Content Background Color
The background of the box that displays the scanned text.
- Light Mode default:
#f9f9f9 - Dark Mode default:
#323232
Content Text Color
The color of the scanned result text.
- Light Mode default:
#0d0d0d - Dark Mode default:
#ebebeb
Copy Icon Color
The color of the clipboard icon that lets users copy the scanned result.
- Light Mode default:
#5d5d5d - Dark Mode default:
#c8c8c8
Dialog Icons
Three action icons appear in the result dialog — each with independent color and background color settings for Light and Dark themes.
| Icon | Purpose | Default Color |
|---|---|---|
| Success icon | Indicates a successful scan | Green (#4caf50) |
| Re-scan icon | Scan another code without closing the dialog | Gray |
| Cancel icon | Close the dialog | Red (#F44336) |