Back to Tools
Free Tool
WhatsApp Button Generator
Create a beautiful floating WhatsApp chat button for your website. Customize the style, position, and message. Copy the HTML code and paste it into your site.
Button Configuration
Customize your WhatsApp chat button
Include country code without + or spaces (e.g., 14155551234)
HTML Code
Copy this code and paste it before the closing </body> tag
<!-- WhatsApp Chat Button - Generated by Waply.io -->
<style>
.waply-whatsapp-btn {
position: fixed;
bottom: 20px; right: 20px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
background-color: #25D366;
color: white;
border: none;
border-radius: 50%;
padding: 16px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
transform: scale(1);
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
}
.waply-whatsapp-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.waply-whatsapp-btn svg {
width: 24px;
height: 24px;
fill: white;
}
</style>
<a href="https://wa.me/" target="_blank" rel="noopener noreferrer" class="waply-whatsapp-btn" title="Chat on WhatsApp">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
</svg>
</a>
<!-- End WhatsApp Chat Button -->Free WhatsApp Button Generator for Your Website
Add a professional WhatsApp chat button to your website in seconds. Our free WhatsApp button generator creates a beautiful, customizable floating chat button that lets your visitors start a conversation with just one click. No coding skills required.
Why Add a WhatsApp Chat Button?
- Instant Communication: Let customers reach you directly on WhatsApp
- Higher Conversion: WhatsApp has 98% open rates vs 20% for email
- Mobile-Friendly: Works perfectly on all devices
- Build Trust: Show customers you're available and responsive
Features of Our WhatsApp Button Generator
- ✓ Multiple button styles (circle, rounded, pill, square)
- ✓ Customizable colors and sizes
- ✓ Position anywhere on your page
- ✓ Pre-filled message support
- ✓ Hover animations included
- ✓ Mobile responsive design
- ✓ No external dependencies
- ✓ 100% free, no signup required
How to Install the WhatsApp Button
- 1. Enter your WhatsApp number with country code
- 2. Customize the button style, color, and position
- 3. Add an optional pre-filled message
- 4. Copy the generated HTML code
- 5. Paste it before the </body> tag on your website