WhatsApp Modal (Generate QR Code)
A fixed-position modal that auto-generates a QR code from a WhatsApp URL using the kjua library. On desktop the trigger button opens the modal overlay; on touch devices the same button acts as a direct link to WhatsApp, bypassing the modal entirely. Supports Escape key dismiss and multiple toggle buttons.
whatsappqr codemodalkjuatouch detection
Setup — External Scripts
CDN — kjua QR Code generator (add before </body>)
html
<script src="https://cdn.jsdelivr.net/npm/kjua@0.10.0/dist/kjua.min.js"></script>Code
HTML
html
<div data-whatsapp-modal-status="not-active" data-whatsapp-modal="https://faq.whatsapp.com/5913398998672934/" class="whatsapp-modal">
<div data-whatsapp-modal-toggle="" class="whatsapp-modal__dark"></div>
<div class="whatsapp-modal__card">
<div data-whatsapp-modal-qr-canvas="" class="whatsapp-modal__qr-canvas"></div>
<div class="whatsapp-modal__text">
<h2 class="whatsapp-modal__h2">WhatsApp us</h2>
<p class="whatsapp-modal__p">Scan the QR Code to chat with our staff via your smartphone.</p>
</div>
<a data-whatsapp-modal-link="" href="#" class="whatsapp-modal__btn">
<span class="whatsapp-modal__btn-span">or chat via desktop</span>
</a>
<div data-hover="" data-whatsapp-modal-toggle="" class="whatsapp-modal__close">
<div class="whatsapp-modal__close-bar"></div>
<div class="whatsapp-modal__close-bar is--duplicate"></div>
</div>
</div>
</div>
<div data-whatsapp-modal-trigger="" class="whatsapp-modal__btn is--large">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="whatsapp-modal__icon-svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.049 4.90701C17.3493 3.20721 15.0898 2.18312 12.6912 2.02547C10.2926 1.86782 7.91847 2.58735 6.01096 4.05007C4.10345 5.51278 2.7926 7.61896 2.32257 9.97633C1.85254 12.3337 2.25535 14.7816 3.456 16.864L2.049 22L7.3 20.621C8.75245 21.4124 10.3799 21.8277 12.034 21.829C13.9949 21.8301 15.912 21.2495 17.5429 20.1607C19.1737 19.072 20.445 17.5239 21.1958 15.7125C21.9467 13.9011 22.1434 11.9077 21.7611 9.98441C21.3788 8.06116 20.4346 6.29453 19.048 4.90801L19.049 4.90701ZM12.041 20.157C10.5648 20.1573 9.11572 19.76 7.846 19.007L7.546 18.827L4.428 19.644L5.261 16.605L5.066 16.293C4.38658 15.2118 3.96778 13.9875 3.84265 12.7167C3.71752 11.4459 3.88948 10.1634 4.34497 8.97049C4.80045 7.77755 5.52699 6.70681 6.46722 5.84279C7.40746 4.97877 8.53566 4.34513 9.76277 3.99188C10.9899 3.63863 12.2823 3.57544 13.538 3.8073C14.7937 4.03916 15.9783 4.55973 16.9984 5.3279C18.0184 6.09608 18.8459 7.09084 19.4156 8.23366C19.9853 9.37647 20.2816 10.6361 20.281 11.913C20.2778 14.0977 19.4088 16.192 17.8642 17.7371C16.3197 19.2822 14.2257 20.153 12.041 20.157ZM16.557 13.985C16.311 13.86 15.092 13.263 14.865 13.185C14.638 13.107 14.474 13.06 14.306 13.31C14.138 13.56 13.666 14.11 13.521 14.283C13.376 14.456 13.233 14.47 12.986 14.345C12.2559 14.0533 11.5819 13.6371 10.994 13.115C10.4534 12.6137 9.98909 12.0359 9.616 11.4C9.471 11.154 9.6 11.018 9.726 10.9C9.852 10.782 9.972 10.611 10.097 10.466C10.1992 10.3409 10.2824 10.2014 10.344 10.052C10.3769 9.98367 10.3922 9.90823 10.3887 9.83248C10.3852 9.75674 10.363 9.68304 10.324 9.61801C10.261 9.49301 9.765 8.27401 9.562 7.77801C9.359 7.28201 9.156 7.35201 9 7.34401C8.844 7.33601 8.69 7.33601 8.527 7.33601C8.40171 7.33967 8.2785 7.36898 8.16498 7.42213C8.05147 7.47527 7.95005 7.55113 7.867 7.64501C7.58693 7.9105 7.36521 8.23139 7.21594 8.58725C7.06667 8.94312 6.99313 9.32616 7 9.71201C7.08057 10.6462 7.43193 11.5365 8.011 12.274C9.07331 13.8657 10.5309 15.1541 12.241 16.013C12.831 16.267 13.292 16.419 13.651 16.537C14.156 16.6901 14.6896 16.7244 15.21 16.637C15.5548 16.567 15.8813 16.4264 16.1691 16.224C16.4569 16.0216 16.6996 15.7618 16.882 15.461C17.0444 15.0917 17.0948 14.6827 17.027 14.285C16.969 14.174 16.805 14.114 16.555 13.985H16.557Z" fill="currentColor"></path></svg>
<span class="whatsapp-modal__btn-span">WhatsApp us</span>
<a data-whatsapp-modal-link="" href="#" class="whatsapp-modal__overlay-link w-inline-block"></a>
<div data-hover="" data-whatsapp-modal-toggle="" class="whatsapp-modal__overlay-toggle"></div>
</div>CSS
css
.whatsapp-modal {
z-index: 100;
pointer-events: none;
flex-flow: column;
justify-content: center;
align-items: center;
display: flex;
position: fixed;
inset: 0;
}
.whatsapp-modal__card {
transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
pointer-events: auto;
background-color: #f8f6f3;
border-radius: 1.5em;
flex-flow: column;
align-items: center;
width: 20em;
padding: 4.5em 2em 3.26em;
display: flex;
position: relative;
transform: translateY(25%) rotate(0.001deg);
opacity: 0;
visibility: hidden;
}
[data-whatsapp-modal-status="active"] .whatsapp-modal__card {
transform: translateY(0%) rotate(0.001deg);
opacity: 1;
visibility: visible;
}
.whatsapp-modal__qr-canvas {
background-color: #0000001a;
width: 8.75em;
height: 8.75em;
}
[data-whatsapp-modal-qr-canvas]:has(svg) {
background-color: transparent;
}
[data-whatsapp-modal-qr-canvas] svg rect {
fill: transparent;
}
.whatsapp-modal__text {
grid-column-gap: .75em;
grid-row-gap: .75em;
flex-flow: column;
align-items: center;
padding-top: 1em;
display: flex;
}
.whatsapp-modal__h2 {
text-align: center;
margin-top: 0;
margin-bottom: 0;
font-size: 1.75em;
font-weight: 500;
line-height: 1;
}
.whatsapp-modal__p {
color: #0009;
text-align: center;
font-size: 1em;
}
.whatsapp-modal__btn {
grid-column-gap: .5em;
grid-row-gap: .5em;
color: #fff;
cursor: pointer;
background-color: #612c08;
border-radius: 30em;
padding: 1em 1.5em;
text-decoration: none;
display: flex;
position: relative;
overflow: hidden;
}
.whatsapp-modal__btn-span {
color: #f8f6f3;
font-size: 1em;
font-weight: 500;
line-height: 1;
}
.whatsapp-modal__overlay-link,
.whatsapp-modal__overlay-toggle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.whatsapp-modal__close {
cursor: pointer;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
display: flex;
position: absolute;
top: 1.5em;
right: 1.5em;
}
.whatsapp-modal__close-bar {
background-color: #000;
width: 1.5em;
height: .09375em;
position: absolute;
transform: rotate(-45deg);
}
.whatsapp-modal__close-bar.is--duplicate {
transform: rotate(45deg);
}
.whatsapp-modal__dark {
transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
pointer-events: auto;
background-color: #0003;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
}
[data-whatsapp-modal-status="active"] .whatsapp-modal__dark {
opacity: 1;
visibility: visible;
}
.whatsapp-modal__btn.is--large {
font-size: 1.25em;
}
.whatsapp-modal__icon-svg {
width: 1.25em;
margin-top: -.125em;
margin-left: -.25em;
display: block;
position: relative;
}
/* Hide link on non-touch devices */
[data-whatsapp-modal-btn] [data-whatsapp-modal-link] {
display: none;
}
/* Hide modal on touch devices, and open link directly */
@media (hover: none) and (pointer: coarse) {
[data-whatsapp-modal] {
display: none;
}
/* Hide toggle button on touch devices */
[data-whatsapp-modal-trigger] [data-whatsapp-modal-toggle] {
display: none;
}
/* Show link on touch devices */
[data-whatsapp-modal-trigger] [data-whatsapp-modal-link] {
display: block;
}
}JavaScript
javascript
function initWhatsAppModal() {
const modal = document.querySelector('[data-whatsapp-modal]');
// QR-code generation
const url = (modal.getAttribute('data-whatsapp-modal') || '').trim();
if (!url) return;
// Generate an SVG QR via kjua
const svg = kjua({
text: url,
render: 'svg',
crisp: true,
minVersion: 1,
ecLevel: 'M',
size: 540,
fill: '#000000',
back: '#FFFFFF',
rounded: 0
});
// Let CSS control sizing
svg.removeAttribute('width');
svg.removeAttribute('height');
svg.removeAttribute('style');
// Insert into canvas (or multiple if needed)
modal.querySelectorAll('[data-whatsapp-modal-qr-canvas]').forEach((placeholder, i) => {
const node = i === 0 ? svg : svg.cloneNode(true);
placeholder.appendChild(node);
});
// Add the link to all elements with [data-whatsapp-modal-link] attribute
document.querySelectorAll('[data-whatsapp-modal-link]').forEach(linkEl => {
linkEl.setAttribute('href', url);
linkEl.setAttribute('target', '_blank');
});
// Toggle open/close the modal
document.querySelectorAll('[data-whatsapp-modal-toggle]').forEach(btn => {
btn.addEventListener('click', () => {
if (!modal) return;
const isActive = modal.getAttribute('data-whatsapp-modal-status') === 'active';
modal.setAttribute('data-whatsapp-modal-status', isActive ? 'not-active' : 'active');
});
});
// Close on ESC key
document.addEventListener('keydown', event => {
if (event.key === 'Escape' || event.keyCode === 27) {
if (modal) {
modal.setAttribute('data-whatsapp-modal-status', 'not-active');
}
}
});
}
// Initialize WhatsApp Modal (Generate QR Code)
document.addEventListener('DOMContentLoaded', function() {
initWhatsAppModal();
});Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| data-whatsapp-modal | attribute (URL) | — | Place on the modal container. Its value must be the full WhatsApp URL (e.g. https://wa.me/31612345678). The script reads this value to generate the QR code and set all link hrefs. |
| data-whatsapp-modal-status | attribute ("active" | "not-active") | — | State attribute on the modal container, toggled by the script. CSS uses this value to show/hide the card and backdrop via opacity/visibility/transform transitions. |
| data-whatsapp-modal-qr-canvas | attribute | — | Placeholder element where the kjua SVG QR code is injected. Add multiple placeholders if needed — the first receives the original SVG; subsequent ones receive clones. |
| data-whatsapp-modal-link | attribute | — | Any anchor or element that should open the WhatsApp URL directly. The script sets href and target="_blank" on all matching elements using the URL from [data-whatsapp-modal]. |
| data-whatsapp-modal-toggle | attribute | — | Clickable element that opens or closes the modal by toggling [data-whatsapp-modal-status]. Add to the backdrop overlay, the close button, and any external trigger button. |
| data-whatsapp-modal-trigger | attribute | — | Add to the external CTA button that contains both a [data-whatsapp-modal-link] and a [data-whatsapp-modal-toggle] child. CSS uses this to hide the link on desktop (showing the modal toggle) and hide the toggle on touch devices (showing the direct link instead). |
Notes
- •Requires kjua loaded via CDN before the script runs.
- •The WhatsApp URL is the single source of truth — set it once on [data-whatsapp-modal] and the script populates the QR code and all link elements automatically.
- •The modal uses CSS transitions (opacity + visibility + transform) driven by the data-whatsapp-modal-status attribute — no GSAP required.
- •The backdrop overlay element itself has [data-whatsapp-modal-toggle], so clicking outside the card closes the modal.
- •Escape key dismissal is handled by a global keydown listener that sets the status to "not-active".
- •The touch-device media query (@media (hover: none) and (pointer: coarse)) hides the entire modal element and switches the trigger button to link mode, ensuring mobile users always get the native WhatsApp experience.
Guide
Setting the WhatsApp URL
Replace the value of data-whatsapp-modal with your own WhatsApp link. The script reads this single source and applies it everywhere — QR code, all link elements, and keyboard escape handler.
<div data-whatsapp-modal="https://wa.me/31612345678" class="whatsapp-modal">
…
</div>Touch device behavior
On touch devices (phones and tablets) the modal is hidden entirely. The trigger button instead shows a direct link that opens WhatsApp immediately. This is handled purely with CSS using @media (hover: none) and (pointer: coarse).
Trigger button structure
Place both a link and a toggle inside the trigger button and add [data-whatsapp-modal-trigger] to it. CSS then hides the correct child depending on the device type.
<div data-whatsapp-modal-trigger="" class="whatsapp-modal__btn">
<span class="whatsapp-modal__btn-span">WhatsApp us</span>
<!-- Clickable on touch devices (opening link directly) -->
<a data-whatsapp-modal-link="" href="#" class="whatsapp-modal__overlay-link"></a>
<!-- Clickable on non-touch devices (opening modal) -->
<div data-whatsapp-modal-toggle="" class="whatsapp-modal__overlay-toggle"></div>
</div>QR code background
The canvas placeholder shows a grey background while the QR is loading. Once the SVG is injected, the :has(svg) selector removes the placeholder background so the QR code sits cleanly. The rect background fill is also set to transparent via CSS.