Enter

Resources

    Icons (SVG)

      We couldn't found a match for "Lorem ipsum"

      Welcome to the Vault 👋

      Hey Name, we are super excited to have you on board. Thanks for the support and hopefully Osmo becomes your go-to place for inspiration and development tips-and-tricks. Enjoy! - Ilja & Dennis

      0:00

      Upgrade to lifetime

      We’re offering an exclusive €50 discount when you upgrade to a Lifetime membership. We’ll deduct the cost of your current subscription cycle.

      Lifetime Bonus
      As a bonus you’ll also receive our complete marketing website—as a Webflow cloneable or a folder containing all HTML, CSS & JS assets.

      Use discount code:

      TPJH9Q26

      Upgrade to lifetime

      -€50

      Osmo Slack Community

      Help, share, and inspire each other—this is the space to talk about animations all day long and connect with other Osmo members.

      Join Slack Community

      Need help?

      Unfortunately, we don’t currently have the capacity to answer all questions individually—but that’s why we created the Osmo community!

      It’s a space where members can come together to share tips, troubleshoot, and collaborate. Whether you’re dealing with a tricky bug, need advice, or just want to connect with like-minded creatives, our community is here for you.

      Join Slack Community

      Copied SVG to clipboard
      Something went wrong
      Copied code to clipboard
      Something went wrong
      Saved to bookmarks!
      Removed from bookmarks

      Default

      User image

      Default

      Name

      • -€50
        Upgrade to Lifetime
      The Vault/

      WhatsApp Modal (Generate QR Code)

      Search
      K
      WhatsApp Modal (Generate QR Code)

      Live Preview

      Documentation

      Webflow

      Code

      Setup: External Scripts

      External Scripts in Webflow

      Make sure to always put the External Scripts before the Javascript step of the resource.

      In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?

      Watch the video

      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 structure to Webflow

      In the video below we described how you can copy + paste the structure of this resource to your Webflow project.

      Watch the video

      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

      Custom Javascript in Webflow

      In this video, Ilja gives you some guidance about using JavaScript in Webflow:

      Watch the video

      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

      Custom CSS in Webflow

      Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:

      Watch the video

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

      Live Preview

      Resource Details

      Scan
      QR Code
      Modal
      Button
      Interaction
      Information

      Original source

      Dennis Snellenberg

      Creator Credits

      We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.