How to Add a WhatsApp Button to Your Squarespace Website (Hong Kong Guide)
In Hong Kong, a lot of clients would rather send a WhatsApp than fill in a form or make a call. In the Digital 2025 report, 70.6% of Hong Kong internet users aged 16 and over said they use WhatsApp (Meltwater). A WhatsApp button on your website lets them start a chat with you in one tap. Here's how to add one to Squarespace, on any plan, plus a few settings that make it work better.
Step 1: Make your WhatsApp link
WhatsApp's click-to-chat links follow a simple pattern: https://wa.me/ followed by your full phone number in international format. WhatsApp says to leave out any zeroes, brackets or dashes (WhatsApp).
For a Hong Kong number, that's the country code 852 followed by your 8-digit number, with no plus sign or spaces:
https://wa.me/852XXXXXXXX
Open the link on your phone to check it starts a chat with the right number. On a computer it opens WhatsApp Web or the desktop app.
Step 2: Add a ready-made first message (optional)
You can fill in the first message for the client by adding ?text= and your message to the end of the link, with spaces written as %20:
https://wa.me/852XXXXXXXX?text=Hi%20I%20would%20like%20to%20book%20a%20trial%20class
The message appears in the chat box, and the client can edit it before sending. A small trick: use a different message on each page ("trial class", "personal training", "corporate classes") and you'll know what each person is asking about before you reply.
Step 3: Put it in your site header
The header shows on every page, so it's the most visible place for a button. In Squarespace version 7.1 (Squarespace):
Open the Pages panel and click Edit.
Hover over the header and click Edit site header.
Click Add elements and switch on Button.
Click the new button, then Edit design, and set the text (for example "WhatsApp us") and your wa.me link.
Save.
If your header button already goes to online booking, keep it there. Booking is the bigger win, and the WhatsApp button can live on your pages instead.
Step 4: Add WhatsApp buttons on your pages
Add a button block with your wa.me link wherever people decide to get in touch:
Next to the Book button in your homepage hero.
On your pricing or timetable page, for questions about packages.
On your contact page, above the form.
Keep the contact form. Some people still prefer email, and it gives you a record of enquiries.
Step 5 (optional): A floating chat button
The round chat bubble that stays in the corner of every page needs a small piece of code added through Squarespace's code injection, which is only available on the Core, Plus and Advanced plans and some older plans (Squarespace). On the Basic plan, the header and page buttons above do the same job.
Step 6: Set up the WhatsApp Business app
If you're still using your personal WhatsApp, switch your business number to the free WhatsApp Business app. It adds tools that save a lot of typing (WhatsApp Business):
Greeting and away messages, so people get an instant reply outside your hours.
Quick replies for the questions you answer every day: prices, address, MTR exit, what to bring.
Labels to keep track of new enquiries, trial bookings and regulars.
A catalog of your class packs or services.
A business profile with your address, hours and website.
A few tips
Say when you reply. A line like "We reply within a few hours, 9am to 9pm" under the button sets expectations.
Don't let WhatsApp replace online booking. If clients can book online, put both buttons side by side and let them choose.
Check it after changes. If you change numbers, update every button and your Google Business Profile at the same time.
For more on what Hong Kong clients look for, read our guide to website design for fitness studios in Hong Kong.
Want us to set it up?
We build and fix Squarespace sites for gyms, studios and trainers in Hong Kong. Get a free website check with three specific fixes by email within two business days, or book a free 20-minute intro call.
