Floating WhatsApp Chat Button
Adds a round WhatsApp button in the bottom corner of every page that opens a chat with your number and a pre-filled message.
Opens WPIDE on
Code
add_action( 'wp_footer', function () {
$phone = ''; // International format, digits only.
$message = 'Hi! I have a question about your website.';
$side = 'right'; // 'right' or 'left'.
$phone = preg_replace( '/\D/', '', $phone );
if ( '' === $phone ) {
return;
}
$url = 'https://wa.me/' . $phone . '?text=' . rawurlencode( $message );
printf(
'<a href="%1$s" class="wpide-whatsapp" target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp" style="position:fixed;%2$s:20px;bottom:20px;z-index:9999;width:56px;height:56px;border-radius:50%%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);"><svg width="30" height="30" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3a.5.5 0 0 0 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z"/></svg></a>',
esc_url( $url ),
'left' === $side ? 'left' : 'right'
);
} );
Notes
Set $phone in international format without + or spaces (for example 15550100000). Nothing is shown while it is empty.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.