How to add floating whatsapp icon on wordpress website

In today’s fast-paced digital world, real-time communication is crucial for engaging with your customers. One of the easiest and most effective ways to enable instant messaging on your website is by adding a floating WhatsApp icon. This feature allows visitors to reach you directly on WhatsApp with just one click — boosting both accessibility and conversion rates.

In this blog post, we’ll show you two easy ways to add a floating WhatsApp icon to the bottom-right corner of your WordPress site — with or without a plugin.

✅ Method 1: Add Code Manually (No Plugin)

1. Login to your WordPress dashboard.
2. Go to:
   Appearance → Customize → Additional CSS
   or
   Appearance → Theme File Editor → footer.php (for HTML).
3. Paste the following code into the footer (before </body>) using a code snippet plugin or directly in a child theme.

<!-- WhatsApp Floating Button -->
<a href="https://wa.me/919876543210" 
   class="whatsapp-float" 
   target="_blank" 
   aria-label="Chat on WhatsApp">
   <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp" width="50" height="50">
</a>

<style>
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    cursor: pointer;
}
.whatsapp-float img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
</style>

📝 Important: Replace 919876543210 with your actual WhatsApp number (include country code, no “+” or spaces).

Note:- Whatsapp Link-https://api.whatsapp.com/send/?phone=919876543210&text=Hello+Sir%2C+I+want+to+know+more+about+your+services.&type=phone_number&app_absent=0

Method 2: Use a Plugin (No Coding Required)

If you prefer a no-code solution, several WordPress plugins can do the job for you.

🔍 Recommended Plugins:

• Click to Chat
• WP Social Chat
• Floating Chat Widget by Premio

📌 How to Use:

1. Install and activate the plugin from your WordPress dashboard.
2. Go to the plugin settings.
3. Enter your WhatsApp number and customize the icon, position, and style.
4. Save changes — you’re done!

🎯 Why Add WhatsApp to Your Website?

• 💬 Real-Time Communication: Improve customer support and engagement.
• 📱 Mobile-Friendly: Works seamlessly on smartphones.
• 🚀 Increased Conversions: Make it easy for users to reach out with questions or interest.

✅ Complete WhatsApp Floating Button Code (One Block)

📌 Add this to your site using:

• Elementor HTML widget, Custom HTML widget, or
• A plugin like “Insert Headers and Footers” (in the footer section)

<!-- Load Font Awesome for WhatsApp Icon -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<!-- WhatsApp Floating Button -->
<a href="https://wa.me/919999999999" class="floating-whatsapp" target="_blank">
  <i class="fab fa-whatsapp"></i> Deal with us
</a>

<style>
.floating-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  text-decoration: none;
  z-index: 9999;
  animation: bounce 2s infinite;
  font-family: Arial, sans-serif;
}
.floating-whatsapp i {
  font-size: 20px;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
</style>

✅ Important:

• Replace 919999999999 with your real WhatsApp number (no + or dashes)
• This button will appear on every page where this code is loaded

Would you like this code as a WordPress shortcode or plugin version instead?

Click Anywhere on home to Redirect particular url

If you want to redirect all clicks on the homepage of a WordPress site to a specific URL, you can use JavaScript or WordPress hooks.

Here are two approaches:

✅ Option 1: JavaScript (Simple & Effective)

Add this to your theme’s header.php file or via a custom plugin or custom JS plugin:

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Check if current page is homepage
  if (window.location.pathname === '/' || window.location.pathname === '/index.php') {
    // Intercept all clicks
    document.body.addEventListener('click', function (event) {
      // Check if click was on a link or inside a link
      let target = event.target.closest('a');
      if (target) {
        event.preventDefault(); // stop original navigation
        window.location.href = 'https://your-target-url.com'; // redirect to your target URL
      }
    });
  }
});
</script>

🔁 Replace https://your-target-url.com with the URL you want to redirect to.

Which one to choose?

• Use JavaScript if you want users to see the homepage and only redirect after they click somewhere.
• Use PHP if you want to redirect users immediately when they land on the homepage.

Would you like it to work only for certain user roles, or for everyone including guests?