WhatsApp Floating/Sticky Button For Website
A WhatsApp sticky button (or floating chat widget) allows website visitors to instantly chat with you on WhatsApp. It stays fixed on the screen while scrolling, boosting conversions.
With this Snippet, you can show a WhatsApp icon on the bottom side of your site. And your customers can talk to you simply by clicking it.
<?php
/**
* Floating WhatsApp Button for WordPress By Vaibhav S
* Add this to your theme's functions.php file
*
* CONFIGURATION: Update the settings in the config array below.
*/
function floating_whatsapp_button() {
// ──────────────────────────────────────────
// CONFIGURATION — edit these values
// ──────────────────────────────────────────
$config = [
'phone' => '919139799338', // Country code + number, NO + or spaces
'message' => 'Hello! I have a query.',// Pre-filled message (URL-encoded below)
'tooltip' => 'Chat with us on WhatsApp',
'bottom' => '30px', // Distance from bottom of viewport
'right' => '24px', // Distance from right of viewport
'show_on_mobile' => true, // Show on mobile devices?
'show_pulse' => true, // Animated pulse ring?
'dark_mode' => false, // Dark tooltip style?
];
// ──────────────────────────────────────────
$encoded_msg = rawurlencode( $config['message'] );
$wa_url = "https://wa.me/{$config['phone']}?text={$encoded_msg}";
$hide_mobile = ! $config['show_on_mobile'] ? 'display:none!important;' : '';
$pulse_class = $config['show_pulse'] ? 'wa-pulse' : '';
?>
<!-- Floating WhatsApp Button Design CSS-->
<style>
.wa-float-btn {
position: fixed;
bottom: <?php echo esc_attr( $config['bottom'] ); ?>;
right: <?php echo esc_attr( $config['right'] ); ?>;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 4px 18px rgba(37,211,102,.45);
cursor: pointer;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(37,211,102,.6);
}
.wa-float-btn svg {
width: 32px;
height: 32px;
fill: #fff;
}
/* Pulse animation */
.wa-float-btn.wa-pulse::before {
content: '';
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(37,211,102,.4);
animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(1.9); opacity: 0; }
}
/* Tooltip */
.wa-float-btn .wa-tooltip {
position: absolute;
right: 72px;
white-space: nowrap;
background: <?php echo $config['dark_mode'] ? '#1a1a1a' : '#fff'; ?>;
color: <?php echo $config['dark_mode'] ? '#fff' : '#111'; ?>;
font: 600 13px/1 -apple-system, sans-serif;
padding: 7px 12px;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0,0,0,.15);
opacity: 0;
pointer-events: none;
transform: translateX(6px);
transition: opacity .2s, transform .2s;
}
.wa-float-btn .wa-tooltip::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: <?php echo $config['dark_mode'] ? '#1a1a1a' : '#fff'; ?>;
border-right-width: 0;
}
.wa-float-btn:hover .wa-tooltip {
opacity: 1;
transform: translateX(0);
}
/* Mobile visibility */
@media (max-width: 767px) {
.wa-float-btn { <?php echo $hide_mobile; ?> }
}
</style>
<a class="wa-float-btn <?php echo esc_attr( $pulse_class ); ?>"
href="<?php echo esc_url( $wa_url ); ?>"
target="_blank"
rel="noopener noreferrer"
aria-label="<?php echo esc_attr( $config['tooltip'] ); ?>"
>
<!-- Official WhatsApp logo path -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<path d="M16.003 2.667C8.639 2.667 2.667 8.638 2.667 16
c0 2.354.618 4.663 1.794 6.688L2.667 29.333l6.82-1.788
A13.267 13.267 0 0 0 16.003 29.333
C23.365 29.333 29.333 23.362 29.333 16
S23.365 2.667 16.003 2.667zm0 24.267a11.03 11.03 0 0 1-5.628-1.543
l-.403-.238-4.045 1.06 1.078-3.938-.263-.419
A11.003 11.003 0 0 1 5.003 16
c0-6.065 4.936-11 11-11s11 4.935 11 11-4.937 11-11 11z"/>
<path d="M22.232 19.197c-.318-.159-1.88-.926-2.172-1.033
-.291-.105-.503-.158-.714.159-.212.317-.82 1.033-.005 1.033
0 0-.636.212-1.193-.423
A8.447 8.447 0 0 1 15.97 16.71
c-.556-.953-.848-1.854-.742-2.171.108-.319.476-.478.794-.636
.319-.159.424-.265.636-.477.213-.212.108-.371-.053-.636
-.159-.265-1.033-2.489-1.406-3.122-.37-.636-.741-.53-1.033-.53
-.265 0-.53-.053-.795-.053-.265 0-.742.106-1.139.53
-.397.424-1.511 1.458-1.511 3.6
0 2.145 1.564 4.183 1.776 4.448
.213.265 3.017 4.662 7.407 6.39
1.033.424 1.83.636 2.463.795
1.033.265 1.986.212 2.727.106
.848-.106 2.6-1.033 2.97-2.013
.37-.978.37-1.828.265-2.013
-.107-.159-.318-.265-.636-.424z"/>
</svg>
<span class="wa-tooltip"><?php echo esc_html( $config['tooltip'] ); ?></span>
</a>
<!-- /Floating WhatsApp Button -->
<?php
}
// Hook into wp_footer so the button appears on every page
add_action( 'wp_footer', 'floating_whatsapp_button' );