Add whatsapp to website

How to Add a WhatsApp Floating Button to Your WordPress Site

by

Picture a customer visiting bakedbypriti.in, drooling over my wife’s stunning chocolate layered cake, and wanting to order one for a birthday. They need a quick way to ask about flavors or delivery. A WhatsApp floating button lets them message Priti directly from WordPress site, turning interest into orders. I’ll show you how to add this button without plugins, keeping it simple and perfect for her baking business. It’s as easy as decorating a cupcake. Let’s get started!

Why a WhatsApp Button Helps Business

A floating button stays visible as customers browse, making it easy to:

  • Take custom cake orders instantly.
  • Answer questions about flavors or pricing.
  • Build trust with fast, personal replies.

It’s like having Priti’s bakery counter on every page of bakedbypriti.in, without slowing down the site.

What You Need

  • A WordPress site with admin access.
  • Working WhatsApp number.
  • A 60x60px WhatsApp icon.
  • No coding experience required – I’ll guide you step-by-step.

Steps to Add the Button

Let’s add a button that invites customers to chat about cakes, like a “Message Priti” sign.

Step 1: Choose a WhatsApp Icon

Pick a clear, 60x60px PNG icon for a professional look. Options:

Step 2: Add the Code

We’ll place the button by editing functions.php. It’s quick and straightforward.

  1. Open the Theme Editor:
    • In your WordPress dashboard, go to Appearance > Theme File Editor.
    • Select functions.php from the right.
    • Back up your site to be safe.
  2. Paste the below Code: Add this at the end of functions.php.
  3. Replace https://wa.me/1234567890 with your business’s WhatsApp number.
  4. Swap the image URL for your icon’s URL.
  5. Save the file. 
function add_whatsapp_floating_button() {
    echo '<a href="https://wa.me/1234567890" class="whatsapp-float" target="_blank" aria-label="Contact Priti on WhatsApp">
            <img src="https://i.imgur.com/Gq7GVKT.png" alt="WhatsApp" class="whatsapp-icon">
          </a>
          <style>
            .whatsapp-float {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1000;
            }
            .whatsapp-icon {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                transition: transform 0.3s ease-in-out;
            }
            .whatsapp-icon:hover {
                transform: scale(1.1);
            }
            @media (max-width: 768px) {
                .whatsapp-icon {
                    width: 50px;
                    height: 50px;
                }
                .whatsapp-float {
                    right: 15px;
                }
            }
          </style>';
}
add_action('wp_footer', 'add_whatsapp_floating_button');

Step 3: Test the Button

  • Refresh your site. Look for the WhatsApp icon in the bottom-right corner.
  • Click it to confirm it opens WhatsApp with your business’s number.
  • Test on a phone to ensure it’s clear and easy to tap.

Enhancements Options

Make the button irresistible for your customers:

  • Pre-Filled Message: Start the chat with a prompt
<a href="https://wa.me/9711000580?text=Hi Priti! Can you make a custom chocolate cake for my daughter's birthday?" ... >
  • Add a Bounce Effect: Draw attention subtly:
    @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.whatsapp-icon {
    animation: bounce 2s infinite;
}

    Match the Bakery Vibe: For eg: Use a box-shadow in Priti’s brand colors (e.g., rgba(255, 182, 193, 0.2) for pink).

    Quick Fixes

    • Button Not Showing? Check the image URL and functions.php for errors. Clear your cache if needed.
    • Mobile Position Off? Adjust right: 15px in the @media block.
    • Link Not Working? Use the international number format.

    Bonus Tip: Keep Icons Separate

    If the button covers another icon (like a “Go to Top” button), shift it left:

    • Change right: 20px to right: 90px in .whatsapp-float.
    • For mobile, adjust right: 15px to right: 70px in the @media block.
    • Use Developer Tools (right-click > Inspect) to check the other icon’s position and add a buffer (e.g., icon width + 10px).

    Final Thoughts

    This WhatsApp button is like a friendly baker’s smile on bakedbypriti.in – it invites customers to chat about their dream cakes. It’s fast, free, and keeps your site lightweight. Want to add buttons for email or Instagram? Use similar code and tweak positions.

    Questions? Drop a comment below!

    Leave a Comment