To add a WhatsApp chat button to your website, you create the button with your WhatsApp number and a pre-filled message, then add it to your site with a plugin, an app or one line of code. With wwidgets, a single pixel line adds the button to Shopify, WordPress and any other site. This guide shows you how, step by step, plus tips on welcome messages, opening hours and mobile use.
Why add a WhatsApp button to your website?
Many people already have WhatsApp open on their phone all day. Messaging you there feels easier and more personal than filling in a contact form or writing an email. A WhatsApp chat button removes friction for the visitor who has a quick question: "Does this come in blue?", "Do you deliver to Leeds?", "Can I collect in person?"
For a small business, it is also simple to manage. You do not need a separate live chat system or someone sitting at a desk; you can reply from your phone or from WhatsApp on your computer.
What does a WhatsApp chat button actually do?
A WhatsApp button is a link that opens a chat with your number. When a visitor taps it:
- On mobile, the WhatsApp app opens directly with your chat, often with a message already written.
- On desktop, WhatsApp Web or the desktop app opens, so the visitor can type from their computer.
The visitor then sends the message, and the conversation continues in WhatsApp. You see their number and can reply as usual.
Before you start: what do you need?
- A WhatsApp or WhatsApp Business account on the number you want to use. The free WhatsApp Business app is a good choice because it supports a business profile, greeting messages and away messages.
- Your number in international format, for example 44 for the UK followed by your number without the leading zero.
- Access to add code to your website, or to a plugin for header scripts.
Step 1: Create the WhatsApp button in wwidgets
- Sign up for the 14-day free trial and add your website.
- Create a campaign and choose the WhatsApp chat widget.
- Enter your number in international format.
- Write a welcome text and a pre-filled message, for example "Hi! I have a question about your products."
- Choose the design and position: bottom right is standard, but bottom left can work better if your site already has something in the right corner. Adjust colours and enable dark mode if needed.
- Set targeting: all pages or specific ones, desktop and mobile, and an optional delay so it does not appear instantly.
Step 2: How to add a WhatsApp button to Shopify
- In your Shopify admin, open Online Store > Themes.
- Click the three dots next to your live theme and choose Edit code.
- Open theme.liquid in the Layout folder.
- Paste the wwidgets pixel line just before the closing </head> tag.
- Save, then visit your store on your phone and tap the button to test it.
Already using wwidgets for other widgets? Then the pixel is already in place and the WhatsApp button appears as soon as you activate it.
Step 3: How to add a WhatsApp button to WordPress or WooCommerce
- Install a plugin that adds code to your site header, or open your theme's header scripts setting if it has one.
- Paste the pixel line into the header field.
- Save and clear any caching plugin so the change appears.
- Test on mobile and desktop.
Using one pixel for all widgets means you do not need a separate WhatsApp plugin, a separate popup plugin and a separate countdown plugin, each with its own settings and updates.
Step 4: How to add a WhatsApp button to any website
For Magento, Wix, site builders or hand-coded sites, add the pixel line to the <head> of your pages: through the head or custom code settings of your platform, or directly in your HTML template. The getting started guide covers the common platforms. The script loads asynchronously, so it will not delay your page.
Tips: how to get more from your WhatsApp button
Write a helpful welcome message
A short line next to the button, such as "Questions? Chat with us on WhatsApp", tells visitors what the button is for. A pre-filled message also helps people who do not know what to write. Some good examples:
- "Hi, I have a question about sizing."
- "Hello! I would like to check delivery to my postcode."
- "Hi, I am interested in a custom order."
Be clear about your hours
People on WhatsApp expect quick replies. If you are not available around the clock, say so: "We reply Mon to Fri, 9:00 to 18:00". In the WhatsApp Business app, set an away message for evenings and weekends so nobody feels ignored. You can also use targeting to show the button only when it is useful.
Design for mobile
Most WhatsApp clicks come from phones. Keep the button compact, make sure it does not cover your add-to-cart button, cookie banner or menu, and test it on a few different devices. A slightly larger tap area is better than a tiny icon.
Put it where questions arise
Product pages, delivery information and checkout-related pages are where people hesitate. You could show the button everywhere, or only on product and contact pages if you get a lot of messages.
Prepare quick replies
Write standard answers for common questions about delivery times, returns and sizing. WhatsApp Business lets you save quick replies, which keeps answers fast and consistent.
Respect privacy
Mention WhatsApp in your privacy policy and only use people's numbers to answer their questions, unless they have clearly agreed to receive marketing messages.
WhatsApp button or contact form?
| WhatsApp button | Contact form | |
|---|---|---|
| Speed | Instant, conversational | Slower, email-based |
| Best for | Quick questions before buying | Detailed requests, quotes |
| Effort for you | Reply from your phone | Reply by email |
| Data you get | Phone number and chat | Structured fields |
Many stores use both. wwidgets includes a request (lead) collector form as well, and form leads can go to email, a webhook, Slack, Telegram and other channels.
FAQ
Do I need WhatsApp Business for a website chat button?
No, a standard WhatsApp account works. However, the free WhatsApp Business app adds useful features like a business profile, greeting and away messages, and quick replies.
Will the WhatsApp button work on desktop?
Yes. On desktop it opens WhatsApp Web or the WhatsApp desktop app, so visitors can message you from their computer.
Can I show the button only on certain pages?
Yes. Use page targeting to show it on product pages, your contact page or wherever questions come up most, and choose desktop, mobile or both.
A WhatsApp button is one of the simplest ways to make your store feel more personal and answer questions before they turn into abandoned carts. Start your free trial, add the button in a few minutes and see what your visitors ask. You can check the plans on the pricing page.
