Free WhatsApp Widget for Website — Complete Setup Guide 2025
What is a WhatsApp Widget?
A WhatsApp widget is a floating chat button that appears on your website, usually in the bottom corner. When visitors click it, WhatsApp opens — either on their phone or in WhatsApp Web — with a chat to your number ready to start. It is one of the highest-converting contact methods for websites.
Why Your Website Needs a WhatsApp Widget
- WhatsApp has a 98% message open rate — far higher than email
- Customers prefer messaging over phone calls and contact forms
- Instant responses increase conversion rates by up to 40%
- Works for businesses of all sizes — from freelancers to large companies
How to Create a Free WhatsApp Widget
- Go to WAUtility Widget Builder
- Enter your WhatsApp number with country code (e.g. 971501234567)
- Write a welcome message for the popup
- Choose your button color, shape and size
- Add your business name and tooltip text
- Optionally upload your logo or choose a built-in icon
- Pick your position (bottom-right is standard)
- Click Save My Widget to get a permanent link to your design
- Copy the embed code
- Paste before </body> on your site
Widget Customization Options
Button Shapes (7 Options)
Circle (classic), Rounded Square, Square, Squircle, Leaf, Diamond, Hexagon — choose the shape that matches your brand identity.
Colors
Any hex color for the button. The icon can be white, black, green or a custom color. Popup header can have its own color.
Sizes
6 sizes from 40px (discreet) to 90px (very prominent). Most websites use 60px (medium).
Popup Styles
Chat Bubble (realistic WhatsApp look), Minimal (clean), or Card (rounded card with shadow).
Animations
Enable the pulse animation to make the button gently glow — attracts more clicks without being annoying.
Logo
Upload your own logo image URL to replace the WhatsApp icon with your brand logo.
How to Install on Different Platforms
WordPress
Install the free "Insert Headers and Footers" plugin → paste code in Footer section → Save.
Shopify
Online Store → Themes → Edit Code → theme.liquid → paste before </body>.
Wix
Settings → Custom Code → Add code → Body (end) → All pages → Apply.
HTML Website
Open your HTML file → find </body> → paste code just before it → save.
Save Your Widget Design
After customizing, click Save My Widget to get a unique URL with your exact settings. Share it with your team or bookmark it to make changes later.
Create your free widget at wautility.com/widget.