# 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.

- Type: PHP
- Runs: Frontend only
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: whatsapp, chat, contact, button
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-whatsapp-button/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Floating WhatsApp Chat Button" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/