Smart WhatsApp Float Button to increase customer messages

Export .zip

HTML

CSS

JavaScript

Content

source-code.html

<!-- Floating Button -->
<div class="wa-front-btn" id="wa-front-btn">
<i class="bi bi-whatsapp"></i>
</div>

  <!-- Popup -->
  <div class="wa-front-popup" id="wa-front-popup">
    <div class="wa-front-header">
      <div>
        <div class="fs-5 fw-bold">Questions? Doubts?</div>
        <div class="small opacity-90">Chat with us via WhatsApp</div>
      </div>
      <button type="button" class="btn-close" id="wa-front-close" aria-label="Close"><i class="bi bi-x"></i></button>
    </div>

    <div class="p-4">
      <div class="text-center mb-4 text-muted small">
        We will respond as soon as possible.
      </div>
      
      <div>
        <a href="https://web.whatsapp.com/send?phone=" target="_blank" 
           class="d-flex align-items-center p-3 bg-light rounded-3 text-decoration-none text-dark">
          <div class="wa-front-avatar me-3"></div>
          <div>
            <h5 class="mb-1">Company Name</h5>
            <p class="mb-0 text-muted small">Support Team</p>
          </div>
        </a>
      </div>
    </div>
  </div>

    .wa-front-btn {
      position: fixed;
      bottom: 25px;
      right: 25px;
      width: 65px;
      height: 65px;
      background: linear-gradient(135deg, #25D366, #128C7E);
      border-radius: 50%;
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 9999;
      transition: all 0.3s ease;
    }

    .wa-front-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
    }

    .wa-front-btn i {
      font-size: 34px;
      color: white;
    }

    .wa-front-popup {
      position: fixed;
      bottom: 105px;
      right: 25px;
      width: 360px;
      max-width: calc(100vw - 50px);
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(30px) scale(0.95);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 9998;
    }

    .wa-front-popup.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .wa-front-header {
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: white;
      padding: 18px 20px;
      position: relative;
    }

    .wa-front-header .btn-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.25);
      color: white;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      opacity: 1;
      z-index: 10;
    }

    .wa-front-avatar {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: url('https://cdn-icons-png.flaticon.com/128/15678/15678795.png') center/cover;
      flex-shrink: 0;
    }

    const btn = document.getElementById('wa-front-btn');
    const popup = document.getElementById('wa-front-popup');
    const closeBtn = document.getElementById('wa-front-close');

    let isOpen = false;

    function openPopup() {
      isOpen = true;
      popup.classList.add('active');
    }

    function closePopup() {
      isOpen = false;
      popup.classList.remove('active');
    }

    // Clique no botão inteiro
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      if (isOpen) closePopup();
      else openPopup();
    });

    // Botão de fechar
    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      closePopup();
    });

    // Fechar ao clicar fora
    document.addEventListener('click', (e) => {
      if (isOpen && !popup.contains(e.target) && e.target !== btn) {
        closePopup();
      }
    });

    // Fechar com tecla ESC
    document.addEventListener('keydown', (e) => {
      if (e.key === "Escape" && isOpen) {
        closePopup();
      }
    });

User Reviews

0.0

0 reviews

5 stars

4 stars

3 stars

2 stars

1 stars

Be the first to review this component.

Browse docs

Smart WhatsApp Float Button to increase customer messages

Component Architecture

1. Floating Action Button (FAB)

2. Popup Window

3. WhatsApp Redirect Link

Technologies Used

How It Works

Key Technical Features

Recommended Improvements

User Reviews

0.0