# Add WhatsApp to your website

> Add a WhatsApp button that opens a chat with the right message on every page, and change the number later without editing your site.

A WhatsApp button lets a visitor ask a question the moment they have one, without copying your number. On a phone it opens the WhatsApp app; on a computer, WhatsApp Web or the desktop app.

## Add a chat button

Most website builders have a button block where you paste a link: paste your wa.link there. If you edit your site's HTML, this is a complete button:

```html
<a
	href="https://wa.link/tiendaluna"
	target="_blank"
	rel="noopener"
	style="display:inline-block;padding:12px 20px;border-radius:8px;background:#075e54;color:#ffffff;font-weight:600;text-decoration:none"
>
	Chat with us on WhatsApp
</a>
```

Replace `tiendaluna` with your address. Keep `rel="noopener"` as it is: adding `noreferrer` would hide your site from the link's **Traffic Sources**.

## Why not a wa.me link

WhatsApp's own wa.me links are free and open a chat too. The difference shows up later, when your number changes or a new person takes over the chats: a hard-coded link keeps pointing to the old number on every page until you find and edit each one.

|                              | wa.me link            | Premium Link            |
| ---------------------------- | --------------------- | ----------------------- |
| Change the number or message | Edit every page       | Once, in Walink         |
| Clicks counted               | No                    | Yes, with their sources |
| One message for many pages   | Full text in each URL | Yes, with variables     |
| Landing page before the chat | No                    | Optional                |

A [free wa.link](https://walink.com/docs/free-links) is like a wa.me link with a shorter address and a QR code: it can't be edited either. [Why Walink](https://walink.com/docs/why-walink) compares the options in more detail.

## A message for each page

On a product page, the chat should say which product the visitor was looking at. [Message variables](https://walink.com/docs/premium-links/message-variables) do it with a single Premium Link:

1. In the link's **Pre-filled Message**, write `{{product}}` where the product name goes: `Hi, I'm interested in the {{product}}.`
2. Under **Message variables**, set a default, such as `lamp collection`, for pages that don't pass one.
3. On each product page, add the product to the link: `https://wa.link/tiendaluna?product=Moon+Lamp`. A `+` stands for a space.

The chat opens with "Hi, I'm interested in the Moon Lamp." Variables work on Chat links. Smart Links send each destination's message as you wrote it.

## Requests with details

When you need the same details every time, such as a date, a service and a name, point the button to a [form](https://walink.com/docs/forms) instead. The visitor answers on form.wa.link, then WhatsApp opens with every answer already in the message. Link to the form from your page rather than embedding it. A form is $10 a month per published form.

## Measure and route clicks

- Your site shows up under its domain in the link's **Traffic Sources**, so you can tell website chats from Instagram ones.
- Clicks from every page count on the same link. To compare pages, give each page its own Premium Link.
- A [Smart Link](https://walink.com/docs/smart-links) can route website visitors. **Business Hours** sends clicks outside your hours to someone else. In **Referral Source** mode, select **Custom** and enter your domain to send website chats to your sales team; a custom source also matches a `utm_source` or `utm_campaign` tag in the link. See [Routing](https://walink.com/docs/smart-links/routing).