How to Add a WhatsApp Button to Your Website (Any Platform, Free)

Why Every Website Needs a WhatsApp Button in 2026

If your website does not have a WhatsApp contact button, you are losing customers every day. Most visitors who leave without contacting you will never come back. A WhatsApp button gives them a zero-friction way to reach you instantly — and since 98% of WhatsApp messages are read within 3 minutes, you can respond while they are still interested.

What You Need Before Starting

• Your WhatsApp phone number (personal or WhatsApp Business)
• Access to edit your website
• 5 minutes

Step 1: Generate Your WhatsApp Widget Code

Go to WAUtiltiy WhatsApp Widget Generator. Customize your widget:

• Phone number: Select your country and enter your number
• Welcome message: What appears in the chat bubble
• Button position: Bottom-right or bottom-left
• Button color: Default WhatsApp green or any custom brand color
• Button shape: Round, square, or pill
• Agent photo: Upload a photo for a personal touch

Once satisfied with the preview, click Get Code to get a single HTML snippet.

Step 2: Add the Widget to Your Website

WordPress

1. Log in to your WordPress dashboard
2. Go to Appearance → Theme Editor
3. Open your footer.php file
4. Paste the widget code just before the closing body tag
5. Click Update File

Alternatively, install the free Insert Headers and Footers plugin and paste the code in the footer section — no theme editing required.

Shopify

1. Go to Online Store → Themes → Actions → Edit Code
2. Open the theme.liquid file
3. Find the closing body tag and paste the code just before it
4. Click Save

Wix

1. In the Wix Editor: Add → More → HTML iframe
2. Paste the widget code in the HTML box
3. Resize to cover the full page (transparent)
4. Position in the bottom corner and publish

HTML Website

Open your HTML file, find the closing body tag, paste the widget code just before it. Save and upload. The button appears on every page.

Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the widget code in the Footer section and save

Tips to Get More Conversations from Your Widget

Write a specific welcome message. Instead of just asking how to help, be specific: mention pricing, availability, or what you can assist with.

Set realistic response expectations. Add your business hours to the welcome message if you do not reply instantly.

Position on the right. Bottom-right gets significantly more clicks than bottom-left in most markets.

Use a real photo. Widgets with a real person photo get more engagement — it feels more personal.

Frequently Asked Questions

Does it work on mobile?

Yes. On mobile, tapping the widget opens the WhatsApp app directly — seamless on both Android and iPhone.

Will it slow down my website?

The WAUtiltiy widget is a single lightweight script that loads after your page content and will not affect your PageSpeed score.

Can I use this on multiple websites?

Yes. Generate a separate widget for each website with its own welcome message, color, and position.

Add Your Widget Now

Generate your free WhatsApp chat widget at WAUtiltiy Widget Generator. No sign-up, no credit card, no limits.