For many service businesses in Brazil, and in other markets where people message companies by default, WhatsApp is the shortest path between interest and conversation. Adding a green button to the page is the easy part. What decides whether it works is what comes before the click (does the visitor already have enough context?) and what comes after (does someone reply, and reply well?).

In this post I stay with the implementation and the day-to-day operation of the channel. The structure of the page as a whole is in how to structure a landing page that converts.

WhatsApp or a form?

WhatsApp is not the right answer for every page. It tends to work well when:

  • the service needs a conversation before the decision;
  • the audience already uses WhatsApp to talk to businesses;
  • someone is available to reply at predictable hours.

A form tends to be better when you need structured information before replying (a quote that depends on measurements, volumes or dates), when the audience is corporate and prefers email, or when the volume of contacts requires triage.

On the pages I build, I usually make WhatsApp the main action and email a discreet alternative. Not everyone wants to start a conversation from their personal number, and a second option costs nothing. On this site's contact page, for example, the visitor fills in a short brief and chooses whether to send it via WhatsApp or email; the message comes out already composed with what they wrote.

WhatsApp documents the "click to chat" link format: https://wa.me/ followed by the full phone number in international format, digits only. That means the country code (55 for Brazil), the area code and the number, with no plus sign, spaces, brackets, dashes or leading zeros.

The pre-filled message goes in the text parameter and has to be URL-encoded, because spaces, accents and punctuation cannot go in raw. In JavaScript, encodeURIComponent handles it:

const number = countryCode + areaCode + phone // digits only
const message = "Hi! I came from the clinic websites page and would like to understand timeline and pricing."
const link = `https://wa.me/${number}?text=${encodeURIComponent(message)}`

Test the link on a phone and on a computer. On a computer, the click leads to WhatsApp Web or the installed desktop app, and some visitors will prefer another route; that is why the email alternative makes even more sense there.

A message that carries context

The ready-made message is not just there to save typing. It tells whoever replies where the person came from and what they want, without having to ask. A few rules I follow:

  • identify the page or the offer: "I came from the clinic websites page" is more useful than "I saw your site";
  • keep it short and editable: the person should be able to complete or change the sentence without deleting a paragraph;
  • do not put words in the visitor's mouth: "I want to hire you now!" sounds fake and puts people off;
  • one message per page or campaign: this also helps with measurement, as I explain further down.

Where to place the button

On the first screen, next to the promise, for people who arrive already decided. After the block that explains how the service works and in the closing section, for people who needed to read first.

The floating button is useful on mobile, but it needs care. It can cover text, clash with the cookie notice, sit on top of a form's submit button or hide the footer. If you use one, keep it discreet, without animation constantly asking for attention, and check every screen with it visible.

Accessibility counts too: the button needs a readable name ("Chat on WhatsApp"), not just an icon, plus enough contrast and a comfortable touch area. The WCAG 2.2 guidelines ask, at level AA, for targets of at least 24 by 24 CSS pixels or equivalent spacing between them.

Measuring without fooling yourself

A click on the button is not a contact. The person may open the app and give up before sending. That is why I keep two measures apart:

  1. clicks, recorded as an analytics event, noting which button was used (top, middle or floating);
  2. conversations started, counted in WhatsApp itself, ideally through each page's pre-filled message.

Many clicks and few conversations usually point to a problem between the two: an awkward message, a poor desktop experience or expectations that do not match what the page promised.

What happens after the click

This is where most contacts are lost. An excellent page does not make up for a reply that takes days. Before publishing, it is worth defining:

  • a business number, preferably on WhatsApp Business, not a personal one, since it will be public;
  • who replies and at what hours, with an away message saying when the person will hear back;
  • saved replies for frequent questions (timeline, payment method, next steps), used as a starting point, not as a robot;
  • the next step after the conversation: a brief, a written proposal or a booking.

When volume grows, it makes sense to automate triage and the most repetitive answers. But good automation starts from a manual process that already works. If that is your case, the difference between a scripted chatbot and an agent connected to your systems is in AI agents for customer service vs. chatbots.

If you want to review how WhatsApp is implemented on your page, reach me through the contact page, on whichever channel you prefer.

References