A lightweight JavaScript library that enhances telephone links on desktop devices by displaying QR codes for easy mobile scanning. Perfect for bridging the gap between desktop and mobile phone functionality.
- Automatically detects desktop devices and intercepts
tel:links - Displays QR codes for phone numbers on desktop devices
- Fully customizable styling and configuration
- Bypasses QR functionality on mobile devices (preserves native calling)
- Lightweight with minimal dependencies
- Easy integration with existing websites
npm install @wefabric/telqr// Import the library
import TelQr from '@wefabric/telqr';
// Initialize with default settings
document.addEventListener('DOMContentLoaded', () => {
new TelQr();
});import TelQr from '@wefabric/telqr';
document.addEventListener('DOMContentLoaded', () => {
new TelQr({
showToCallText: 'Click to call',
scanToCallText: 'Scan with your phone to call',
buttonText: 'Call Now',
qrCode: {
width: 200,
height: 200,
correctLevel: 'H',
colorDark: '#000000',
colorLight: '#ffffff'
},
styling: {
modal: {
background: '#ffffff',
borderRadius: '16px',
padding: '32px',
maxWidth: '350px'
},
button: {
background: '#007cba',
color: 'white',
fontSize: '16px'
}
}
});
});<script src="path/to/telqr/src/TelQr.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
new TelQr({
scanToCallText: 'Scan to call',
buttonText: 'Call Now'
});
});
</script>| Option | Type | Default | Description |
|---|---|---|---|
showToCallText |
string | 'Show to call' |
Aria label for the modal |
scanToCallText |
string | 'Scan to call' |
Description text below QR code |
buttonText |
string | 'Call Now' |
Text for the call button |
| Option | Type | Default | Description |
|---|---|---|---|
qrCode.width |
number | 180 |
QR code width in pixels |
qrCode.height |
number | 180 |
QR code height in pixels |
qrCode.correctLevel |
string | 'M' |
Error correction level (L, M, Q, H) |
qrCode.colorDark |
string | '#000000' |
Dark color for QR code |
qrCode.colorLight |
string | '#ffffff' |
Light color for QR code |
styling: {
modal: {
background: '#fff',
border: '1px solid #e5e7eb',
borderRadius: '12px',
padding: '24px',
boxShadow: '0 20px 50px rgba(0,0,0,.2)',
maxWidth: '300px'
}
}styling: {
backdrop: {
background: 'rgba(0, 0, 0, 0.5)'
}
}styling: {
button: {
marginTop: '16px',
padding: '12px 20px',
background: '#007cba',
color: 'white',
border: 'none',
borderRadius: '6px',
cursor: 'pointer',
fontSize: '14px',
width: '100%'
}
}- Device Detection: The library automatically detects if the user is on a mobile device
- Mobile Bypass: On mobile devices, telephone links work normally (native calling)
- Desktop Enhancement: On desktop devices, clicking a
tel:link shows a QR code modal - QR Code Generation: Uses the QRCode.js library to generate scannable QR codes
- Fallback: Includes a "Call Now" button that still triggers the tel: link
- qrcodejs: Used for QR code generation (loaded automatically from CDN)
- Modern browsers that support ES6 classes
- Internet Explorer 11+ (with polyfills)
- All major mobile browsers
<!DOCTYPE html>
<html>
<head>
<title>TelQr Example</title>
</head>
<body>
<p>Call us: <a href="tel:+1234567890">+1 (234) 567-8900</a></p>
<p>Support: <a href="tel:+0987654321">+0 (987) 654-321</a></p>
<script src="path/to/telqr.js"></script>
<script>
new TelQRHandler({
scanToCallText: 'Scan with your phone to call',
buttonText: 'Call Now'
});
</script>
</body>
</html>MIT
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any issues or have questions, please file an issue on the GitHub repository.