WhatsApp Modal (Generate QR Code) [Resource]

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://cdn.jsdelivr.net/npm/kjua@0.10.0/dist/kjua.min.js"></script>

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy

<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>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.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;
  }
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

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();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

[data-whatsapp-modal-qr-canvas]:has(svg) {
  background-color: transparent;
}

[data-whatsapp-modal-qr-canvas] svg rect {
  fill: transparent;
}

.whatsapp-modal__card {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  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__dark {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

[data-whatsapp-modal-status="active"] .whatsapp-modal__dark {
  opacity: 1;
  visibility: visible;
}

/* 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;
  }
}

Implementation

Modal Container

Place the [data-whatsapp-modal] attribute on your modal wrapper. Its value should be the WhatsApp URL (e.g. https://wa.me/…). This url will be turned into a QR Code.

<div data-whatsapp-modal="https://wa.me/31612345678" class="whatsapp-modal">
  …  
</div>

QR-Code Canvas

Inside your modal, add one or more placeholders with the [data-whatsapp-modal-qr-canvas] attribute. The script uses kjua to render an SVG QR code into each.

Link Elements

Any element with [data-whatsapp-modal-link] attribute will get its href set to your WhatsApp URL, plus target="_blank" (defined in the [data-whatsapp-modal] attribute).

Toggle Buttons

Add [data-whatsapp-modal-toggle] to one or more buttons to open/close the modal. Clicking toggles the attribute [data-whatsapp-modal-status] between active and not-active. We use CSS to animate the modal based on these values. With the Escape key on the keyboard it's also possible to close the modal.

Opening the modal (& touch devices)

To enable direct WhatsApp opening on touch devices (bypassing the modal), include both a [data-whatsapp-modal-link] and a [data-whatsapp-modal-toggle] attribute inside your external button, then add [data-whatsapp-modal-trigger] attribute to that button so the script knows which child element (the link or the toggle) to hide on touch- vs. non-touch devices. Example below:

<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>

Locked

Live preview

Resource details

Last updated
September 30, 2025
Category
Dropdowns & Information
Need help?
Join Slack

Scan

QR Code

Modal

Button

Interaction

Information

Original source

Dennis Snellenberg

WhatsApp Modal (Generate QR Code)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Modal Container

QR-Code Canvas

Link Elements

Toggle Buttons

Opening the modal (& touch devices)

Accordion CSS Animation

Sticky Section Tabs (CSS Only)

Creator Credits

Need help?

Join the Osmo Slack Community

Unlock the Osmo Vault

Upgrade toLifetime

WhatsApp Modal (Generate QR Code)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Modal Container

QR-Code Canvas

Link Elements

Toggle Buttons

Opening the modal (& touch devices)

Related resources

Accordion CSS Animation

Sticky Section Tabs (CSS Only)

Creator Credits

Unlock the
Osmo Vault

Upgrade to
Lifetime