WhatsApp button for websites
WhatsApp button for websites
Put a button in the corner of your website that opens the conversation with your business, with a ready message. See the preview, pick the side of the screen and copy the code to paste into your site.
- No sign-up
- Works in your browser
- The code loads nothing from XBASE
Build your button
Only the area code and the number, without the country code and without a leading 0.
Write it the way your customer would.
Preview
Plain HTML, no script and no tracking.
Everything happens in your browser. Nothing you type is sent to XBASE.
Inside the button
How the WhatsApp button works
It is a WhatsApp link shaped like a button, pinned to a corner of the page. Whoever clicks leaves the site and lands in the conversation with your business, in the phone app or in WhatsApp Web, with the ready message in the typing field.
<a href="https://wa.me/55119XXXXXXXX?text=Hi%2C%20I%20came%20from%20your%20website" aria-label="Chat on WhatsApp">…</a>The button takes the conversation to WhatsApp; it does not happen inside the page. To answer inside the site, there is the XBASE website chat.
Less friction
Why add the button to your website
Contact always in sight
Whoever wants to talk to you finds the way on any page, without copying a number.
The question at the moment it comes up
Whoever is looking at a product asks right there, about price, delivery time or size.
In the app they already use
On the phone, the conversation opens directly in WhatsApp.
The conversation arrives with context
The ready message can say which page the person came from.
The button makes the first contact easier. It does not reply, does not ensure a sale and does not replace whoever answers.
Step by step
How to add the button to your website
- 01
Type the number
With the area code, the way it is on WhatsApp.
- 02
Write the ready message
For example: "Hi, I came from your website and I'd like to understand how your service works."
- 03
Check the preview
Look at it on the phone and on the computer.
- 04
Copy the code
The generator writes the HTML for you.
- 05
Paste it into the site and test
In a part of the site that runs HTML. Publish and open the page on the phone and on the computer.
If someone else runs your website, send them the code.
Templates
Ready messages for visitors coming from the website
Product page
Hi, I have a question about the [product] on this page.
Service page
Hi, I'd like to understand how [service] works.
Pricing page
Hi, I'm comparing the options and I'd like help choosing.
Appointment
Hi, I'd like to book a time. What options do you have?
After-sales
Hi, I bought on the website and I'd like to know about order [number].
The message lives inside the page code, and any visitor can see it. No passwords, card data or health data.
Installation
Where to paste the code
- 01
HTML website
The code goes in the file every page uses, before the closing <body> tag. Publish it on one page first.
- 02
WordPress
Use a custom HTML block or the theme's code area. Some plans and hosts limit where code can go.
- 03
Online store
Make a copy of the theme first. Paste the code in the theme layout and check that the button does not cover the cart or the checkout.
- 04
Website builders
Use your platform's custom code or HTML feature. Some plans do not allow code.
Position
Where to place the button
The button usually sits at the bottom right. Use the left side if the right already has a cart, a cookie notice or another button. Keep the same place on every page and check these:
| Page | What for |
|---|---|
| Product | Questions about price, stock, delivery time and size |
| Service | People who need to explain their case before asking for a quote |
| Pricing | The last question before choosing |
| Appointments | Time, place and what to bring |
| Help | Next to email and phone, if any |
Product
- What for
- Questions about price, stock, delivery time and size
Service
- What for
- People who need to explain their case before asking for a quote
Pricing
- What for
- The last question before choosing
Appointments
- What for
- Time, place and what to bring
Help
- What for
- Next to email and phone, if any
The button must not cover a form, a buy button, the mobile menu or a privacy notice.
Common problems
The button does not show up or does not open?
| What happens | Likely cause | What to check |
|---|---|---|
| The code shows up as text | It was pasted into a text block | Use an area that runs HTML |
| The button does not show up | The platform removed the code or it is in the wrong template | Check the platform's code rules and where you pasted it |
| It opens the wrong number | Number or country typed wrong | Fix it and generate the code again |
| The message arrives cut off | The link was edited by hand | Generate the code again |
| The button covers another element | Two elements in the same corner | Switch sides or adjust the layout |
| Shows on the computer, not on the phone | A site style hides or covers the button | Test the page on the phone |
| It opens, but nothing is sent | The ready message waits for the customer to tap send | That is how WhatsApp works |
The code shows up as text
- Likely cause
- It was pasted into a text block
- What to check
- Use an area that runs HTML
The button does not show up
- Likely cause
- The platform removed the code or it is in the wrong template
- What to check
- Check the platform's code rules and where you pasted it
It opens the wrong number
- Likely cause
- Number or country typed wrong
- What to check
- Fix it and generate the code again
The message arrives cut off
- Likely cause
- The link was edited by hand
- What to check
- Generate the code again
The button covers another element
- Likely cause
- Two elements in the same corner
- What to check
- Switch sides or adjust the layout
Shows on the computer, not on the phone
- Likely cause
- A site style hides or covers the button
- What to check
- Test the page on the phone
It opens, but nothing is sent
- Likely cause
- The ready message waits for the customer to tap send
- What to check
- That is how WhatsApp works
Changed the code and the old button is still there? Clear the site cache before testing again.
Checklist
Check before publishing
- It opens the conversation with the right number.
- The ready message shows up in full.
- The visitor is the one who decides to send it.
- It does not cover a form, a buy button or a privacy notice.
- It contrasts with the page background and has a margin to the screen edge.
- It is easy to tap on the phone.
- It has no distracting animation.
Formats
Button, link or QR code
| Format | Where to place it | How the customer reaches the conversation |
|---|---|---|
| Link | Instagram bio and Stories, a quote sent by email, a salesperson's signature, an ad | Opens directly, on the phone or on the computer |
| QR code | Price tag, order box, reception desk, school notice board, trade show booth | Scans it with the camera, without typing anything |
| Website button | Product, service, pricing and contact pages | Clicks the corner of the page they are reading |
Link
- Where to place it
- Instagram bio and Stories, a quote sent by email, a salesperson's signature, an ad
- How the customer reaches the conversation
- Opens directly, on the phone or on the computer
QR code
- Where to place it
- Price tag, order box, reception desk, school notice board, trade show booth
- How the customer reaches the conversation
- Scans it with the camera, without typing anything
Website button
- Where to place it
- Product, service, pricing and contact pages
- How the customer reaches the conversation
- Clicks the corner of the page they are reading
On your website, the button is always in sight. To share it elsewhere, use the link; on paper, the QR code.
Button or website chat
The button leads to WhatsApp. The website chat answers on the page itself.
They are two different things. The button sends the visitor to the business WhatsApp: if the number is connected to XBASE, the conversation arrives in the inbox, with an owner and a card in the pipeline. The XBASE website chat stays inside the page: the AI agent answers whoever is visiting, with what you taught it. To install it, you copy the code and paste it into the site.
In the website chat, the AI agent is the one who answers; the team does not reply there.
Frequently asked questions
Questions about the WhatsApp button
No. It works with any number active on WhatsApp: it is just a link shaped like a button.
From the first message to the sale
Every conversation with an owner and a stage in the pipeline, up to the proposal.
XBASE is a conversational CRM with AI. Official WhatsApp, Instagram Direct and email arrive in the same inbox, every conversation becomes a card in the pipeline, and our expert team sets up the automations and AI agents with you.
Create account- Nothing to install
- WhatsApp through Meta's official API
- Setup with a specialist