Call-to-action button: writing it and placing it

A convinced visitor still has to act: call, book, ask for a quote, come by. The call-to-action button is where that happens. Badly named, too small or impossible to find, it lets customers who had already decided walk away.

Here is how to choose it, word it, size it and place it.

One main goal per page

Before writing the button, decide on the action that matters most for your business. It changes from one trade to another:

• A restaurant wants bookings: “Book a table”.
• A plumber wants calls: “Call now”.
• A bakery wants visits: “Get directions”.
• A practice wants appointments: “Book an appointment”.
• A photographer wants inquiries: “Ask about my availability”.

That action becomes the main button, the most visible on the page. The others, such as following your Instagram account or downloading a brochure, take a more discreet form. The Nielsen Norman Group recommends a clear visual hierarchy for the priority tasks of a homepage (2024). Three buttons of equal weight compete with each other, and visitors hesitate.

A label that names the action

The button text says what will happen, with a verb and its object: “Book a table”, “Ask for a quote”, “Call the workshop”. Avoid “Learn more”, “Click here” or a bare “Send”.

A vague label weakens what usability experts call the information scent: visitors can no longer guess what they will find after the click. It also hinders blind people, whose screen reader often announces links out of context (Nielsen Norman Group, 2015).

The Nielsen Norman Group sums up the qualities of a good label in four words (2019):

• Specific: it says exactly what lies behind it.
• Sincere: the page that opens keeps the promise. If “Book” leads to a mere request form, write “Request a booking”.
• Substantial: it makes sense on its own, without the paragraph around it.
• Succinct: the important words first.

Next to the button, a short sentence can lift the last doubt: “Reply within 24 hours”, “No commitment”, “Free cancellation the day before”. Provided it is true.

Phone and email, clickable

A phone number written as plain text forces visitors to copy it out. Linked with the “tel:” prefix, it starts the call with one tap on a phone (MDN). In the link, write the number in international format, the country code followed by the number without its leading zero (web.dev). The displayed text stays readable in the local format.

Email follows the same principle with the “mailto:” prefix, which opens the visitor’s mail app (MDN). Also show the address in plain text: on a computer, not everyone has a mail app installed, and some prefer to copy it.

Two reflexes:

• Show the number in the button: “Call the practice” followed by the number. Visitors know what they are dialing.
• Test the link from your own phone, after every change of number.

A target big enough for a thumb

A button that is too small makes people miss, especially while walking. The web accessibility guidelines (WCAG 2.2) set benchmarks, measured in CSS pixels, the unit of measure of web pages:

Criterion 2.5.8 exempts links placed within a sentence; your main button is subject to it. For an important control, the W3C invites you to aim for the stricter threshold, and the Nielsen Norman Group advises a bigger-than-average target for the main action. Also leave space between two neighboring buttons, such as “Call” and “Directions”: otherwise, people tap one when they meant the other.

Where to place it

At the top, first. In an eye-tracking study of 120 participants, 57% of the time spent looking at a page was on the first screen, and 74% on the first two (Nielsen Norman Group, 2018). So the main button goes right under the headline, visible without scrolling, on phone as on desktop.

Then where the decision is made:

• After the prices, when visitors have just checked they can afford it.
• After the frequent questions, when their last doubts are lifted.
• At the bottom of the page, for those who read everything.

Repeating the same button, with the same label, is not redundant: each visitor stops at a different place. On a phone, never hide it in a menu.

After the click

The button is only half the way. The landing page must keep its promise: the booking tool opens on the right venue, the form asks only for what is strictly necessary, and a message confirms the request went through. Once a month, go through the path yourself, from the first screen to the confirmation.

In sites composed by 29webs, the call-to-action button leads wherever you want: an https address, for example your booking tool, an email, a phone number or an anchor on the page. The contact block brings together the address, the opening hours and links that call, write an email or open WhatsApp with one tap.

In short: one main action per page, a verb that names it, a number called with one tap, a button big enough for a thumb, placed where visitors decide: at the top, then after each argument.