How to Add a WhatsApp Chat Button to Any Website (Step-by-Step)
A WhatsApp chat button lets visitors start a conversation with your business in one tap. Instead of searching for your number or filling a form, they click a small chat button on your site and jump straight into WhatsApp.
In this guide you will learn how click-to-chat works, what you need to prepare, and how to install a WhatsApp button for your website in just a few steps.
How a WhatsApp chat button works
Technically, a WhatsApp button is a link that opens a prefilled chat with your business number. The link can be wrapped inside a floating widget so visitors see it on every page.
The visitor clicks the chat button.
The browser or app opens WhatsApp with your phone number.
An optional message is prefilled so the visitor only taps send.
What you need before you start
A business WhatsApp number that your team can monitor.
Create an account with your chosen chat platform and add your WhatsApp number. Use the number that your team already uses for customer support or sales so that replies are quick and consistent.
Step 2: Design your chat button
Next, customize how the chat button looks on your site. At a minimum, choose:
Button color that matches your brand.
Position on desktop and mobile, usually bottom right.
Icon and label, such as “Chat on WhatsApp”.
If your tool supports it, you can also add welcome text or show a small live chat bubble that invites visitors to ask a question.
Step 3: Choose when the WhatsApp button appears
A simple setup shows the button on every page. More advanced setups can target specific URLs, devices, or campaigns using rules:
Show the chat button only on product or pricing pages.
Hide it on checkout pages to avoid distractions.
Trigger a greeting message after a visitor scrolls 50 percent of the page.
Step 4: Install the click-to-chat script
Copy the installation snippet from your widget provider. For example, the Oscar Chat dashboard generates a script tag that you paste into your site once.
Open your site or tag manager.
Paste the script before the closing body tag.
Publish your changes.
Step 5: Test the WhatsApp chat button
Open your site in a new browser window or on your phone and click the button:
Make sure WhatsApp opens correctly.
Check that the right number and optional prefilled message appear.
Send a test message and confirm your team receives it.
Best practices for WhatsApp chat buttons
Reply quickly. Visitors who click a chat button expect a fast answer, not an email next day.
Set expectations. Use auto replies to explain your working hours or response time.
Collect key details. Ask for name and context early in the chat so the conversation stays productive.
Combine with live chat. Offer both a website live chat button and a WhatsApp option so visitors can choose.
Turn your WhatsApp button into a full chat experience
