Floating Icons WhatsApp & Call

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="wa-float-wrapper" id="wa-wrapper">
  
  <div class="wa-services-list">
    
    <a href="https://wa.me/919745314631?text=Hi!%20I'm%20interested%20in%20your%20services." class="wa-service-item" target="_blank">
      <span class="wa-tooltip">WhatsApp Us</span>
      <div class="wa-icon-circle"><i class="fab fa-whatsapp"></i></div>
    </a>
    
    <a href="tel:+91 7736 465 111" class="wa-service-item">
      <span class="wa-tooltip">Call Now</span>
      <div class="wa-icon-circle" style="background-color: #007bff;"><i class="fas fa-phone"></i></div>
    </a>

  </div>

  <div class="wa-main-trigger" id="wa-main-btn">
    <i class="fab fa-whatsapp wa-main-icon"></i>
    <i class="fas fa-times wa-close-icon"></i>
  </div>
</div>

<style>
/* Base Container */
.wa-float-wrapper {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999999;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Main Button Styles */
.wa-main-trigger {
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff !important;
  font-size: 32px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
}

.wa-close-icon {
  display: none;
  font-size: 26px;
}

/* Options Container */
.wa-services-list {
  position: absolute;
  bottom: 75px; 
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.wa-float-wrapper.active .wa-services-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.wa-service-item {
  text-decoration: none !important;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}

.wa-icon-circle {
  width: 48px;
  height: 48px;
  background-color: #128c7e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  font-size: 22px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.wa-tooltip {
  background: white;
  color: #333;
  padding: 6px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-right: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* Active State Toggles */
.wa-float-wrapper.active .wa-main-icon {
  display: none;
}

.wa-float-wrapper.active .wa-close-icon {
  display: block;
}

.wa-float-wrapper.active .wa-main-trigger {
  background-color: #ff4b4b;
  transform: rotate(90deg);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const wrapper = document.getElementById('wa-wrapper');
  const mainBtn = document.getElementById('wa-main-btn');

  mainBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    wrapper.classList.toggle('active');
  });

  document.addEventListener('click', function(e) {
    if (!wrapper.contains(e.target)) {
      wrapper.classList.remove('active');
    }
  });
});
</script>