WhatsApp chat button for Shopify
Last updated
Each one fills in a sample number and message. Swap in your own in step 2 and the checks update as you type.
Pick one of the three use cases above. The number check, the message check and a live preview of the app’s button appear here.
The parts of a chat button
A WhatsApp chat button for Shopify is a small floating button, shown on every page of the store, that opens a WhatsApp chat with the business and a first message already typed, and this tool checks the number, that first message and your reply hours before you switch the button on in the Nudgesmart app.
The number format follows the click to chat help page WhatsApp publishes for businesses, and the international numbering plan (ITU-T E.164) that caps a full number at 15 digits. Every widget layout the app offers is on the store widgets page, and the steps to switch the button on are in the WhatsApp button help article.
Most broken chat buttons fail on the number, not the design. These are the pieces the tool looks at, in the words WhatsApp and the app use for them.
- International format
- The number written the way someone abroad would dial it, but as bare digits: country code first, then the rest, with no plus sign, no spaces, no brackets and no dashes. WhatsApp click to chat expects exactly this shape, and so does the number field in the app.
- Country code
- The one to three digits that pick the country, such as 44 for the United Kingdom or 1 for the United States and Canada. Typing it in both boxes, or not at all, is the commonest reason a button opens a chat with nobody.
- Leading zero
- Many countries put a 0 in front of a number for calls inside the country. It is dropped once the country code is in front, so 07700 900123 in the UK becomes 7700900123 after the 44. Italy is the usual exception.
- Total length
- Under the international numbering plan, a full number with its country code runs to at most 15 digits. Anything longer has something doubled; anything very short is missing its area code.
- Pre-filled message
- The words already sitting in the typing box when the chat opens. The shopper sends them, not you, so they belong in the shopper voice: a question about an order, a size or delivery.
- Reply hours
- When someone will actually read the chat. Not a setting on the button; it is a promise you make in words, on the button label, in your WhatsApp greeting or on the contact page.
- Round icon or icon and text
- The two looks the app offers. The round icon is a small corner button with no words; icon and text adds a short label, which is the only place the button itself can say what it is for.
Nudgesmart adds widgets like this one to your store from the theme editor, in your theme’s fonts and colours by default, and is available on the Shopify App Store. See every widget layout or see what it costs.
Five numbers as merchants typed them
Invented inputs, using numbers set aside for fiction and testing. The number shown and every flag come from the same check the tool above runs.
| Scenario | Typed | Number for the app | What the tool says |
|---|---|---|---|
| UK mobile typed the way it is said aloud | Code 44, number 07700 900123 | 447700900123 | The leading 0 is only dialled inside the country, so it was dropped. |
| US number entered with its +1 in the number box | Code 1, number +1 (415) 555-0123 | 14155550123 | The number was typed with its country code, so the 1 at the front is not counted twice. |
| Country code typed twice, no plus | Code 61, number 61491570006 | 61491570006 | The 61 at the start looked like the country code typed a second time, so it was dropped. Check that is right. |
| Greeting written in the store voice | Code 44, number 7700900456 | 447700900456 | This reads as if the store is speaking, but the shopper is the one who sends it. Write it in their voice, such as a question about an order or a product. No set reply hours. A message that waits a day without a word reads as ignored; a stated reply window, even a slow one, does not. A round icon has no room for words, so it cannot say when you reply. Put your hours in the greeting your WhatsApp account sends back, or pick the icon and text layout. A personal number puts the button on every page of your store, so strangers get the number you use for friends and family. A separate number on the WhatsApp Business app keeps the two apart and adds a business profile, away messages and quick replies. |
| Area code left off | Code 1, number 555-0199 | not ready | Numbers under country code 1 need more digits than this. The area code or a few digits are probably missing. The button text is 25 characters. On a phone a long label covers product photos; three or four words is plenty. The button text promises an instant reply. Unless someone watches the chat at every hour, shoppers will hold you to a promise you cannot keep, so drop it. |
What the check cannot see
It checks the shape, not the account
A number can be perfectly formatted and still not be on WhatsApp, or be on a phone nobody looks at. Only a test from a real phone proves the chat reaches you.
Your personal number goes on every page
The button is site-wide, so whatever number it carries is public. A separate number on the WhatsApp Business app keeps customers out of your family chats and gives you away messages and quick replies for the hours you are not there.
Starting a chat is not saying yes to marketing
A shopper who asks about a size has not agreed to hear about your next sale. WhatsApp business rules expect permission before a business messages someone first, and in the UK and EU marketing messages also fall under privacy law. Ask, and keep a record of who agreed.
Chats live on a phone, not in Shopify
An order change agreed in a chat does not appear on the Shopify order. Write it on the order yourself, or the next person to pack it will never know.
Corners get crowded
Cookie banners, cart drawers and other chat tools also like the bottom corners of a phone screen. Check the button does not sit on top of one of them before you call it done.
A name, not a partnership
WhatsApp is a trademark of its owner. Nudgesmart is an independent app with no affiliation to WhatsApp and no endorsement from it; the name appears here only to say which app the button opens.
WhatsApp button questions
How do I add a WhatsApp button to my Shopify store?
In the Nudgesmart app, create the WhatsApp button, enter your number and a first message, and publish it. Then switch it on under App embeds in the Shopify theme editor and save. Because it is an app embed it shows on every page, with no section to add page by page.
What format does the WhatsApp number need?
Country code first, then the number, as digits only. Leave out the plus sign, any spaces, brackets or dashes, and the 0 many countries put in front for calls at home. A UK mobile written 07700 900123 becomes 447700900123.
Can I use my personal WhatsApp number?
You can, but every visitor to the store will see it. Most shops are better served by a second number on the WhatsApp Business app, which also lets you set a greeting, an away message for when you are closed and saved quick replies.
What should the pre-filled message say?
One short line in the shopper voice, such as asking about an order or a product. Skip greetings that sound like the store talking, since the shopper is the one who sends them, and skip placeholders in brackets, which arrive exactly as typed.
What happens when someone taps it on a computer?
WhatsApp opens in the browser or in its desktop app, where the shopper may need to link their phone first. That is why the tool suggests testing on a phone and on a computer before you rely on it.
Can the button match my store colours?
It starts in WhatsApp green, which shoppers recognise. In the app you can choose a different style or colour set, and the preview on this page lets you try them on a sample store page first.
Is Nudgesmart part of WhatsApp?
No. Nudgesmart is an independent Shopify app with no link to WhatsApp. The button uses the public click to chat feature WhatsApp offers to any business.
Some shoppers would rather ask than guess.
Nudgesmart adds a WhatsApp chat button across your store, as an icon or a pill, switched on from the theme editor and in WhatsApp green by default.
