Build a Spanish WhatsApp booking landing page with plain HTML, CSS, and JavaScript

Many independent service businesses already use WhatsApp to confirm appointments. The missing piece is often a small, clear landing page that answers the obvious questions before the first message: what is offered, how much it costs, and what a visitor should do next.

I built a dependency-free Spanish booking-page pattern around that handoff.

The booking flow

A useful booking page does not need a heavy scheduling stack to start doing its job. Its core flow can be simple:

1. Show a small set of services with understandable prices and durations.
2. Put a clear call to action on every relevant section.
3. Open WhatsApp with enough context that the owner does not have to ask the same first question again.
4. Keep the page fast and editable.

The key implementation detail is generating the WhatsApp link from a service-specific message:

const phone = "56900000000";

document.querySelectorAll(".whatsapp-link").forEach((link) => {
  const message = link.dataset.message;
  if (message) {
    link.href = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
  }
});

That lets a CTA such as “Reserve a hair ritual” arrive as a message like “Hola, quiero reservar el Ritual de cabello.” It is a small interaction, but it removes friction for both the customer and the business.

Design choices that help

• Mobile-first layout: appointment links are frequently opened from a phone.
• Visible prices and durations: clearer expectations usually mean better-quality enquiries.
• Short FAQs: rescheduling, location, and confirmation are common blockers.
• Semantic HTML: headings, buttons, and disclosure details work without a framework.
• No fake live contact details: the phone number, copy, price, and social links are clearly marked for replacement.

Live demo

You can inspect the working demo here:

WhatsApp Booking Landing Kit — Interactive Demo

Editable download

I also made the complete editable source available as a paid digital kit. It includes the responsive HTML, CSS, JavaScript, setup guide, sample booking messages, listing copy, and launch copy:

WhatsApp Booking Landing Kit — Spanish HTML Template

The demo and the kit were created with AI assistance and should be reviewed and adapted before real business details are published. I would love to know what details you consider essential in a service-business booking flow.