⚡ ZapQR
LIVE DEMO

Try ZapQR Login

Test credentials: demo / demo

Sign In

or

This demo shows how ZapQR integrates with your login form.

Scan the QR with the ZapQR app or use credentials demo/demo

INTEGRATION

Add ZapQR to Your Site

Just 2 lines of code to enable passwordless login

1

Add the container div

<!-- Place this where you want the QR code to appear -->
<div id="zap-login"></div>
2

Include the embed script

<!-- Add before closing </body> tag -->
<script src="https://zapqr.ai/embed.js"
        data-callback="onZapLogin"
        data-theme="dark"
        data-accent="#8b5cf6"></script>
3

Handle the login callback

function onZapLogin(username, password) {
    // Fill your form fields
    document.getElementById('username').value = username;
    document.getElementById('password').value = password;
    
    // Auto-submit or validate
    document.getElementById('login-form').submit();
}

// Or use the event listener
document.addEventListener('zap:login', (e) => {
    const { username, password } = e.detail;
    // Handle login...
});

Configuration Options

Attribute Default Description
data-callback — Function name to call with (username, password)
data-container "zap-login" ID of the container element
data-theme "dark" "dark" or "light"
data-accent "#8b5cf6" Accent color (hex)
HOW IT WORKS

Under the Hood

📱

1. QR Generated

A unique session is created and encoded into a QR code. Contains: session ID, domain, and relay server URL.

🔐

2. Secure Relay

When scanned, ZapQR app connects to the relay via WebSocket. Credentials are sent encrypted, end-to-end.

✨

3. Instant Fill

The website receives credentials via the callback function and fills the login form automatically.

SOURCE CODE

embed.js

The complete ZapQR embed script (~150 lines)