Top 30 WhatsApp Floating Icons for Modern Websites

Add Instant Messaging Power to Your Site with These Stylish, Click-to-Chat WhatsApp Icons

Photo of 3ish omt7dish 3ish omt7dish Follow on X Send an email August 1, 2025Last Updated: August 1, 2025
0 8 15 minutes read
WhatsApp Floating Icons

Top 30 WhatsApp Floating Icons for Modern Websites

 

In today’s fast-paced digital world, instant communication is key, and WhatsApp remains one of the most popular messaging platforms globally. Adding a WhatsApp floating icons to your website is a smart, user-friendly way to connect with your visitors in real-time. Whether you run a small business, blog, or e-commerce store, these floating icons make it easy for users to reach out with just one tap.

In this guide, we’ve handpicked 10 stylish and functional WhatsApp floating icons that can enhance your site’s accessibility and engagement. From minimalist designs to animated icons that grab attention, there’s something here for every style and purpose.

Here are 10 WhatsApp right-floating button codes using the official WhatsApp icon (instead of the emoji ). I’ll use Font Awesome for the icons, which is a popular icon library.

Check This If You Need To change colors https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-whatsapp

1. Basic WhatsApp Floating Button with Icon

<!DOCTYPE html>
<html>
<head>
    <!-- Add Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
    .whatsapp-float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .whatsapp-float:hover {
        background-color: #128C7E;
        transform: scale(1.1);
        transition: all 0.3s ease;
    }
    </style>
</head>
<body>

<!-- Place this in your HTML body -->
<a href="https://wa.me/1234567890" class="whatsapp-float" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

</body>
</html>

2. WhatsApp Button with Text Label

<style>
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 100;
    font-size: 16px;
}

.whatsapp-btn i {
    font-size: 24px;
    margin-right: 10px;
}

.whatsapp-btn:hover {
    background: #128C7E;
    transform: translateY(-3px);
    transition: all 0.3s ease;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-btn" target="_blank">
    <i class="fab fa-whatsapp"></i> Chat Now
</a>

3. Animated Pulse WhatsApp Button

<style>
.whatsapp-pulse {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-pulse" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

4. WhatsApp Button with Tooltip

<style>
.whatsapp-tooltip {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.whatsapp-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-tooltip" target="_blank">
    <i class="fab fa-whatsapp"></i>
    <span class="tooltip-text">Message us on WhatsApp</span>
</a>

5. Square WhatsApp Button

<style>
.whatsapp-square {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    transition: all 0.3s ease;
}

.whatsapp-square:hover {
    background-color: #128C7E;
    transform: rotate(10deg) scale(1.1);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-square" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

6. WhatsApp Button with Notification Badge

<style>
.whatsapp-badge {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff0000;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-badge" target="_blank">
    <i class="fab fa-whatsapp"></i>
    <span class="badge">3</span>
</a>

7. Slide-in WhatsApp Button

<style>
.whatsapp-slide {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: -80px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    transition: right 0.5s ease;
}

body:hover .whatsapp-slide {
    right: 40px;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-slide" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

8. Dual WhatsApp & Phone Buttons

<style>
.contact-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
}

.contact-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.contact-btn:hover {
    transform: scale(1.1);
}

.whatsapp-btn {
    background-color: #25d366;
}

.phone-btn {
    background-color: #007bff;
}
</style>

<div class="contact-float">
    <a href="https://wa.me/1234567890" class="contact-btn whatsapp-btn" target="_blank">
        <i class="fab fa-whatsapp"></i>
    </a>
    <a href="tel:+1234567890" class="contact-btn phone-btn">
        <i class="fas fa-phone"></i>
    </a>
</div>

9. WhatsApp Button with Countdown Offer

<style>
.whatsapp-offer {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 200px;
    background: #25D366;
    color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 100;
    font-family: Arial, sans-serif;
}

.offer-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.offer-title i {
    margin-right: 8px;
    font-size: 20px;
}

.countdown {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

.whatsapp-link {
    display: block;
    background: white;
    color: #25D366;
    padding: 8px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

.whatsapp-link:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}
</style>

<div class="whatsapp-offer">
    <div class="offer-title">
        <i class="fab fa-whatsapp"></i> Special Offer!
    </div>
    <div class="countdown" id="countdown">05:00</div>
    <a href="https://wa.me/1234567890" class="whatsapp-link" target="_blank">
        Chat Now
    </a>
</div>

<script>
let time = 300; // 5 minutes in seconds
const countdown = document.getElementById('countdown');

const timer = setInterval(() => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    countdown.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    time--;
    
    if (time < 0) {
        clearInterval(timer);
        document.querySelector('.whatsapp-offer').style.display = 'none';
    }
}, 1000);
</script>

10. Circular Progress WhatsApp Button

<style>
.whatsapp-progress {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 40px;
    right: 40px;
    z-index: 100;
}

.progress-circle {
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.progress-circle .bg {
    stroke: #ddd;
}

.progress-circle .progress {
    stroke: #25D366;
    stroke-dasharray: 188;
    stroke-dashoffset: 188;
    animation: progress 5s linear forwards;
}

.whatsapp-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.whatsapp-icon:hover {
    background: #128C7E;
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes progress {
    to {
        stroke-dashoffset: 0;
    }
}
</style>

<div class="whatsapp-progress">
    <a href="https://wa.me/1234567890" target="_blank">
        <div class="progress-circle">
            <svg>
                <circle class="bg" cx="35" cy="35" r="30"></circle>
                <circle class="progress" cx="35" cy="35" r="30"></circle>
            </svg>
            <div class="whatsapp-icon">
                <i class="fab fa-whatsapp"></i>
            </div>
        </div>
    </a>
</div>

Implementation Notes:

1- Font Awesome Setup:

  • All examples use Font Awesome icons (fab fa-whatsapp)
  • Include this in your <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

2- Customization:

  • Replace 1234567890 With your WhatsApp number (include country code, no + or 0)
  • Adjust colors, sizes, and positions to match your site design
  • Modify animations and hover effects as needed

3- Placement:

  • CSS goes in your <head> or external stylesheet
  • HTML goes in your <body>, typically at the bottom before </body>

These buttons will all use the official WhatsApp icon and provide various visual effects to attract user attention while maintaining a professional appearance.

Here are 10 WhatsApp floating button designs centered on your website with titles and subtitles:

1. Centered Bubble Chat Button

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.whatsapp-center-bubble {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #25D366;
    color: white;
    border-radius: 50px;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
    z-index: 1000;
    font-family: 'Segoe UI', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}
.whatsapp-center-bubble:hover {
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4);
}
.whatsapp-center-bubble i {
    font-size: 22px;
    margin-right: 12px;
}
.whatsapp-center-content {
    text-align: center;
}
.whatsapp-center-title {
    font-weight: 600;
    font-size: 15px;
}
.whatsapp-center-subtitle {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 2px;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-center-bubble" target="_blank">
    <i class="fab fa-whatsapp"></i>
    <div class="whatsapp-center-content">
        <div class="whatsapp-center-title">Need Help?</div>
        <div class="whatsapp-center-subtitle">Chat with our team</div>
    </div>
</a>

2. Article Assistance Center Button

<style>
.whatsapp-center-assist {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    padding: 15px 25px;
    z-index: 1000;
    font-family: 'Helvetica', sans-serif;
    border: 1px solid #f0f0f0;
    text-align: center;
    max-width: 280px;
    width: 90%;
}
.whatsapp-assist-icon {
    background: #25D366;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}
.whatsapp-assist-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}
.whatsapp-assist-subtitle {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 12px;
}
.whatsapp-assist-btn {
    display: inline-block;
    background: #25D366;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}
.whatsapp-assist-btn:hover {
    background: #128C7E;
}
</style>

<div class="whatsapp-center-assist">
    <div class="whatsapp-assist-icon">
        <i class="fab fa-whatsapp"></i>
    </div>
    <div class="whatsapp-assist-title">Article Assistance</div>
    <div class="whatsapp-assist-subtitle">Get help understanding this content</div>
    <a href="https://wa.me/1234567890" class="whatsapp-assist-btn" target="_blank">
        WhatsApp Now
    </a>
</div>

3. Centered Quick Help Button

<style>
.whatsapp-center-help {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border-radius: 8px;
    padding: 15px 25px;
    z-index: 1000;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
    text-align: center;
    transition: all 0.3s ease;
    max-width: 240px;
}
.whatsapp-center-help:hover {
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}
.whatsapp-help-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-help-title i {
    margin-right: 8px;
    font-size: 20px;
}
.whatsapp-help-subtitle {
    font-size: 13px;
    opacity: 0.9;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-center-help" target="_blank">
    <div class="whatsapp-help-title">
        <i class="fab fa-whatsapp"></i> Quick Help
    </div>
    <div class="whatsapp-help-subtitle">
        Message us about this article
    </div>
</a>

4. Centered Expert Consultation Button

<style>
.whatsapp-center-expert {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 20px;
    z-index: 1000;
    font-family: 'Helvetica', sans-serif;
    text-align: center;
    width: 260px;
    border: 1px solid #f5f5f5;
}
.whatsapp-expert-icon {
    background: #25D366;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: white;
    font-size: 22px;
}
.whatsapp-expert-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 8px;
    color: #333;
}
.whatsapp-expert-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}
.whatsapp-expert-btn {
    display: inline-block;
    background: #25D366;
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.whatsapp-expert-btn:hover {
    background: #128C7E;
}
</style>

<div class="whatsapp-center-expert">
    <div class="whatsapp-expert-icon">
        <i class="fab fa-whatsapp"></i>
    </div>
    <div class="whatsapp-expert-title">Expert Consultation</div>
    <div class="whatsapp-expert-subtitle">Get professional advice about this topic</div>
    <a href="https://wa.me/1234567890" class="whatsapp-expert-btn" target="_blank">
        Chat Now
    </a>
</div>

5. Simple Centered WhatsApp Prompt

<style>
.whatsapp-center-simple {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #25D366;
    color: white;
    border-radius: 6px;
    padding: 12px 20px;
    z-index: 1000;
    font-family: 'Arial', sans-serif;
    text-align: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.whatsapp-center-simple:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.whatsapp-simple-icon {
    font-size: 20px;
    margin-right: 10px;
}
.whatsapp-simple-text {
    line-height: 1.3;
    text-align: left;
}
.whatsapp-simple-title {
    font-weight: 600;
    font-size: 14px;
}
.whatsapp-simple-subtitle {
    font-size: 12px;
    opacity: 0.9;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-center-simple" target="_blank">
    <div class="whatsapp-simple-icon">
        <i class="fab fa-whatsapp"></i>
    </div>
    <div class="whatsapp-simple-text">
        <div class="whatsapp-simple-title">Questions?</div>
        <div class="whatsapp-simple-subtitle">We're here to help</div>
    </div>
</a>

6. Centered WhatsApp Help Card

<style>
.whatsapp-help-card {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    z-index: 1000;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid #f0f0f0;
}
.whatsapp-card-icon {
    background: #25D366;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: white;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(37,211,102,0.3);
}
.whatsapp-card-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}
.whatsapp-card-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}
.whatsapp-card-btn {
    display: block;
    background: #25D366;
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.whatsapp-card-btn:hover {
    background: #128C7E;
}
</style>

<div class="whatsapp-help-card">
    <div class="whatsapp-card-icon">
        <i class="fab fa-whatsapp"></i>
    </div>
    <div class="whatsapp-card-title">Need Clarification?</div>
    <div class="whatsapp-card-subtitle">Our experts can explain this article in detail</div>
    <a href="https://wa.me/1234567890" class="whatsapp-card-btn" target="_blank">
        Get Help Now
    </a>
</div>

7. Floating WhatsApp Chat Ribbon

<style>
.whatsapp-ribbon {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #25D366;
    color: white;
    padding: 15px 0;
    z-index: 1000;
    text-align: center;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
}
.whatsapp-ribbon-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-ribbon-icon {
    font-size: 24px;
    margin-right: 15px;
}
.whatsapp-ribbon-text {
    text-align: left;
}
.whatsapp-ribbon-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 3px;
}
.whatsapp-ribbon-subtitle {
    font-size: 14px;
    opacity: 0.9;
}
.whatsapp-ribbon-btn {
    margin-left: 20px;
    background: white;
    color: #25D366;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.whatsapp-ribbon-btn:hover {
    background: #f5f5f5;
}
</style>

<div class="whatsapp-ribbon">
    <div class="whatsapp-ribbon-content">
        <div class="whatsapp-ribbon-icon">
            <i class="fab fa-whatsapp"></i>
        </div>
        <div class="whatsapp-ribbon-text">
            <div class="whatsapp-ribbon-title">Still have questions?</div>
            <div class="whatsapp-ribbon-subtitle">Chat with our support team</div>
        </div>
        <a href="https://wa.me/1234567890" class="whatsapp-ribbon-btn" target="_blank">
            Start Chat
        </a>
    </div>
</div>

8. Minimal Centered WhatsApp Prompt

<style>
.whatsapp-minimal-center {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    padding: 12px 20px;
    z-index: 1000;
    font-family: 'Helvetica', sans-serif;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
}
.whatsapp-minimal-icon {
    color: #25D366;
    font-size: 20px;
    margin-right: 12px;
}
.whatsapp-minimal-text {
    line-height: 1.3;
    text-align: left;
}
.whatsapp-minimal-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.whatsapp-minimal-subtitle {
    font-size: 12px;
    color: #666;
}
.whatsapp-minimal-link {
    color: #25D366;
    font-weight: 600;
    margin-left: 15px;
    white-space: nowrap;
}
</style>

<div class="whatsapp-minimal-center">
    <div class="whatsapp-minimal-icon">
        <i class="fab fa-whatsapp"></i>
    </div>
    <div class="whatsapp-minimal-text">
        <div class="whatsapp-minimal-title">Need more information?</div>
        <div class="whatsapp-minimal-subtitle">We're available on WhatsApp</div>
    </div>
    <a href="https://wa.me/1234567890" class="whatsapp-minimal-link" target="_blank">
        Message Us →
    </a>
</div>

9. Animated WhatsApp Help Button

<style>
@keyframes float {
    0% { transform: translateX(-50%) translateY(0px); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0px); }
}

.whatsapp-animated {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #25D366;
    color: white;
    border-radius: 8px;
    padding: 15px 25px;
    z-index: 1000;
    font-family: 'Arial', sans-serif;
    text-align: center;
    box-shadow: 0 5px 20px rgba(37,211,102,0.3);
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
}
.whatsapp-animated-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-animated-icon {
    font-size: 22px;
    margin-right: 12px;
}
.whatsapp-animated-text {
    line-height: 1.3;
    text-align: left;
}
.whatsapp-animated-title {
    font-weight: 600;
    font-size: 15px;
}
.whatsapp-animated-subtitle {
    font-size: 13px;
    opacity: 0.9;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-animated" target="_blank">
    <div class="whatsapp-animated-content">
        <div class="whatsapp-animated-icon">
            <i class="fab fa-whatsapp"></i>
        </div>
        <div class="whatsapp-animated-text">
            <div class="whatsapp-animated-title">Instant Help</div>
            <div class="whatsapp-animated-subtitle">Click to chat with us</div>
        </div>
    </div>
</a>

10. Centered WhatsApp Support Panel

<style>
.whatsapp-support-panel {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 1000;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid #f0f0f0;
}
.whatsapp-panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.whatsapp-panel-icon {
    background: #25D366;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: white;
    font-size: 20px;
}
.whatsapp-panel-title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
}
.whatsapp-panel-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}
.whatsapp-panel-btn {
    display: block;
    background: #25D366;
    color: white;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
}
.whatsapp-panel-btn:hover {
    background: #128C7E;
}
.whatsapp-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #999;
    cursor: pointer;
    font-size: 18px;
}
</style>

<div class="whatsapp-support-panel" id="whatsappPanel">
    <div class="whatsapp-panel-close" onclick="document.getElementById('whatsappPanel').style.display='none'">
        ×
    </div>
    <div class="whatsapp-panel-header">
        <div class="whatsapp-panel-icon">
            <i class="fab fa-whatsapp"></i>
        </div>
        <div class="whatsapp-panel-title">Support Available</div>
    </div>
    <div class="whatsapp-panel-subtitle">
        Our team is ready to help you understand this article better. Message us with your questions.
    </div>
    <a href="https://wa.me/1234567890" class="whatsapp-panel-btn" target="_blank">
        <i class="fab fa-whatsapp"></i> Start WhatsApp Chat
    </a>
</div>

These centered WhatsApp buttons offer various styles from minimal to more elaborate designs, all with clear titles and subtitles to encourage user engagement. They’re perfect for article pages where you want to offer help without being intrusive. Remember to:

  1. Replace “1234567890” with your actual WhatsApp number
  2. Adjust colors to match your brand
  3. Modify the text to suit your content
  4. Test responsiveness on different devices
  5. Consider adding a small delay before the button appears for better UX

Here are 10 different left-positioned WhatsApp floating icons with subtle hover effects for your website:

1. Basic Left Floating Icon

Simple icon with tooltip on hover

<style>
.whatsapp-left-icon {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.whatsapp-left-icon:hover {
    background: #128C7E;
    transform: scale(1.1);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-icon" target="_blank" title="Chat on WhatsApp">
    <i class="fab fa-whatsapp"></i>
</a>

2. Pulse Effect Icon

Gentle pulsing animation

<style>
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.whatsapp-left-pulse {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    animation: pulse 2s infinite;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-pulse" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

3. Floating Icon with Ring

Circle border animation on hover

<style>
.whatsapp-left-ring {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    transition: all 0.3s ease;
}
.whatsapp-left-ring:hover {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.3);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-ring" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

4. Bounce-on-Hover Icon

Jumps slightly when hovered

<style>
.whatsapp-left-bounce {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    transition: all 0.3s ease;
}
.whatsapp-left-bounce:hover {
    transform: translateY(-5px);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-bounce" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

5. Glowing Icon

Soft glow effect at all times

<style>
.whatsapp-left-glow {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.6);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-glow" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

6. Slide-In From Left

Hidden by default, appears on page hover

<style>
.whatsapp-left-slide {
    position: fixed;
    bottom: 30px;
    left: -60px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    transition: all 0.5s ease;
}
body:hover .whatsapp-left-slide {
    left: 30px;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-slide" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

7. Rotating Icon

360° spin on hover

<style>
.whatsapp-left-rotate {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    transition: all 0.3s ease;
}
.whatsapp-left-rotate:hover {
    transform: rotate(360deg);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-rotate" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

8. Neon Border Icon

Colorful border animation

<style>
.whatsapp-left-neon {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 0 10px #25D366;
    animation: neon-pulse 1.5s infinite alternate;
}
@keyframes neon-pulse {
    from { box-shadow: 0 0 5px #25D366; }
    to { box-shadow: 0 0 20px #25D366; }
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-neon" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

9. Floating Icon with Badge

Notification counter badge

<style>
.whatsapp-left-badge {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
}
.whatsapp-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-badge" target="_blank">
    <i class="fab fa-whatsapp"></i>
    <span class="whatsapp-badge">3</span>
</a>

10. Glass Morphism Icon

Modern frosted glass effect

<style>
.whatsapp-left-glass {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: rgba(37, 211, 102, 0.7);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
</style>

<a href="https://wa.me/1234567890" class="whatsapp-left-glass" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

Note: Don’t forget to:

  • Replace 1234567890 With your WhatsApp number

  • Include Font Awesome (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">) in your <head>

Here’s a concise FAQ section for implementing WhatsApp floating icons on your website:

WhatsApp Floating Icons FAQ

Q1: How do I add these icons to my website?
A: Copy the HTML/CSS code for your preferred design and paste it before the closing </body> tag of your website. Include Font Awesome in your <head> section.

Q2: How do I change the WhatsApp number?
A: Replace 1234567890 in the href="https://wa.me/1234567890" with your full number (country code + number, without + or 0). Example: href="https://wa.me/15551234567"

Q3: Why isn’t the icon showing up?
A: Check:

  1. You’ve added Font Awesome CSS
  2. The icon isn’t hidden behind other elements (try increasing z-index)
  3. There are no JavaScript conflicts

Q4: How do I change the icon position?
A: Adjust these CSS properties:

css
bottom: 30px; /* Distance from bottom */
left: 30px;   /* Distance from left */

Q5: Can I use these on mobile?
A: Yes! All designs are responsive. For mobile, consider:

  • Increasing size (change width/height to 60px)
  • Moving it higher (increasing the bottom value) to avoid floating keyboards

Q6: How do I change the color?
A: Modify these values in CSS:

css
background: #25D366; /* WhatsApp green */
/* Alternative colors: */
background: #128C7E; /* Darker green */
background: #075E54; /* Dark green */

Q7: Can I add a time delay before the icon appears?
A: Yes, add this JavaScript:

javascript
setTimeout(function(){
  document.querySelector('.whatsapp-icon').style.display = 'flex';
}, 3000); // 3 second delay

Q8: How do I make it appear only on specific pages?
A: Add a unique class to your body tag (e.g., <body class="contact-page">Modify the CSS:

css
.contact-page .whatsapp-icon {
  display: flex !important;
}

Q9: Can I track clicks on the WhatsApp button?
A: Yes, add Google Analytics tracking:

html

<a href="https://wa.me/1234567890" onclick="ga('send', 'event', 'WhatsApp', 'click', 'Help Button');">

Q10: How do I make the icon appear after scrolling?
A: Add this JavaScript:

javascript
window.addEventListener('scroll', function() {
  if (window.scrollY > 500) { // After 500px scroll
    document.querySelector('.whatsapp-icon').style.display = 'flex';
  }
});

Pro Tip: For better performance, combine multiple animations into a single CSS transition property:

css
transition: all 0.3s ease;

Remember to test your implementation on different devices before going live!

Read More:

Tags
Photo of 3ish omt7dish 3ish omt7dish Follow on X Send an email August 1, 2025Last Updated: August 1, 2025
0 8 15 minutes read
Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Minecraft server hosting

The Ultimate Guide to Free Minecraft Server Hosting in 2025

July 3, 2025
namecheap

Namecheap Discount: Affordable Domains, Hosting & Security

July 2, 2025
Free Website Hosting

Free Website Hosting 2025 – Zero Cost, No Ads, 99% Uptime

July 4, 2025
HostGator

The Complete HostGator Guide: Everything You Need to Know

July 9, 2025
Back to top button