Using the QR Scanner

Last updated: May 22, 2026

The QR scanner bridge lets your website open the device camera and receive scanned QR code data — all without leaving the app. Your website triggers the scan, the user points the camera at a QR code, and the result is sent back to your JavaScript for processing.

Triggering the Scanner

javascript
appilix.postMessage(JSON.stringify({
    type: "qr_scanner_init",
    props: {
        enable_confirmation_popup: true
    }
}));

Parameters

ParameterTypeDescription
enable_confirmation_popupbooleanIf true, shows the scanned result in a dialog and waits for the user to tap OK before sending it to your website. If false, sends the result immediately.

Receiving the Result

Set up the listener before opening the scanner:

javascript
appilix.onmessage = function(event) {
    const data = JSON.parse(event.data);

    if (data.response.status === 'success') {
        console.log('Scanned:', data.response.result);
        // Use the scanned value — fill a form field, redirect, validate a code, etc.

    } else if (data.response.status === 'camera_permission_missing') {
        alert('Please grant camera permission to use the QR scanner.');

    } else if (data.response.status === 'cancel') {
        // User closed the scanner without scanning
        console.log('Scan cancelled');

    } else {
        console.error('Scan error:', data.response.status);
    }

    appilix.onmessage = null;
};

Response Format

FieldDescription
typeAlways "qr_scanner_init"
response.status"success", "error", "camera_permission_missing", or "cancel"
response.resultThe scanned QR code value — only present when status is "success"

Example: Fill a Form Field with a Scanned Code

javascript
document.querySelector('#scan-btn').addEventListener('click', function () {
    if (typeof appilix === 'undefined') return;

    appilix.onmessage = function(event) {
        const data = JSON.parse(event.data);
        if (data.response.status === 'success') {
            document.querySelector('#code-input').value = data.response.result;
        }
        appilix.onmessage = null;
    };

    appilix.postMessage(JSON.stringify({
        type: "qr_scanner_init",
        props: { enable_confirmation_popup: false }
    }));
});

For scanner appearance settings — frame color, scan line color, and result dialog colors — see the QR Scanner configuration article.