Cómo añadir un botón de reserva a tu web (WordPress, Wix, Squarespace y HTML)

Cómo añadir un botón de reserva a tu web (WordPress, Wix, Squarespace y HTML)

Cómo añadir un botón de reserva a tu web (WordPress, Wix, Squarespace y HTML)

Una vez que tienes las reservas online configuradas, el siguiente paso es que tus clientes lleguen hasta ellas. La mayoría te encontrará a través de tu web, así que es ahí donde reservar tiene que ser más fácil. Un visitante que tiene que buscar un número de teléfono o mandar un mensaje a menudo se cansa y acaba reservando con otro. En esta guía te mostramos las dos formas de añadir reservas a tu web en 2026, un botón de reserva o un formulario de reservas insertado en la página, y te explicamos los pasos para WordPress, Wix, Squarespace y HTML.

Botón o formulario insertado: cuál elegir

Hay dos formas habituales de poner las reservas en una web, y muchos negocios usan las dos.

  • Un botón de reserva es un enlace normal que abre tu página de reservas. Funciona con cualquier creador de webs y en cualquier plan, se añade en un minuto y puedes repetirlo en el menú, en las páginas de servicios y en el pie de página.
  • Un formulario de reservas insertado muestra todo el proceso de reserva dentro de una de tus propias páginas, así que el visitante no sale nunca de tu web. Lleva un poco más de tiempo configurarlo, y algunos creadores de webs solo permiten insertar código en los planes de pago.

Una buena opción por defecto: pon un botón «Reservar ahora» en la cabecera de todas las páginas e inserta el formulario completo en una página «Reservar» dedicada, que es adonde lleva el botón. Si tu creador de webs no permite insertar código, el botón por sí solo funciona perfectamente.

Antes de empezar: consigue tu enlace y tu código de inserción

En timedule, abre Página de reservas en el panel y entra en la pestaña Enlace e inserción. Ahí encontrarás dos cosas:

  • Dirección de reservas: el enlace de tu página de reservas, por ejemplo https://tunegocio.timedule.com. Haz clic en Copiar enlace. Si quieres una dirección más corta o más clara, haz clic en Editar dirección y elige otro subdominio antes de compartirla en ningún sitio.
  • Integración en tu web: un pequeño fragmento de código que muestra el formulario de reservas en tu web. Haz clic en Copiar código.

El código tiene este aspecto, con el ID de tu empresa al final:

<div id="timedule-booking"></div>
<script src="https://timedule.com/iv1.js" type="text/javascript"></script>
<script type="text/javascript">window.timeduleInit("your-company-id");</script>

Cópialo siempre desde tu panel y no desde este artículo, para que el ID sea el correcto. Pega el código tal cual, sin cambiar nada. La primera línea marca dónde aparece el formulario y las otras dos cargan el formulario en ese lugar.

WordPress

Botón: en el editor de bloques, añade un bloque Buttons (Botones) donde quieras, escribe «Reservar ahora» y pega tu enlace de reservas como enlace del botón. Para añadirlo al menú principal, ve a Appearance → Menus (Apariencia → Menús), o a Appearance → Editor → Navigation en los temas de bloques, y añade un enlace personalizado con tu dirección de reservas.

Formulario insertado:

  1. Crea una página nueva llamada «Reservar» o abre la página donde quieras poner el formulario.
  2. Añade un bloque Custom HTML (HTML personalizado).
  3. Pega el código de inserción de tu panel y publica la página.

Si usas un maquetador como Elementor o Divi, utiliza su widget de HTML o de código. Los pasos son los mismos. En WordPress.com, los scripts suelen eliminarse en los planes más baratos, así que es posible que el formulario no aparezca. En ese caso, usa el botón o cámbiate a un plan que admita plugins.

Wix

Botón: haz clic en Add Elements (Agregar elementos) → Button, cambia el texto a «Reservar ahora», haz clic en el icono de enlace, elige Web Address (Dirección web), pega tu enlace de reservas y configúralo para que se abra en la misma ventana.

Formulario insertado:

  1. Abre la página donde quieras poner el formulario y haz clic en Add Elements → Embed Code → Embed HTML.
  2. Haz clic en Enter Code, elige Code, pega el código de inserción y haz clic en Update.
  3. Arrastra los bordes del elemento para que ocupe todo el ancho de tu contenido y unos 750 píxeles de alto. Wix muestra el código insertado dentro de un recuadro del tamaño que tú indiques, así que si el recuadro es demasiado pequeño el formulario queda cortado.
  4. Revisa la vista móvil en el editor y ajusta también ahí el tamaño del elemento.

Squarespace

Botón: edita la página, haz clic en Add Block (Añadir bloque) → Button, escribe «Reservar ahora» y pega tu enlace de reservas. Para la cabecera, abre los ajustes del encabezado del sitio, activa el botón del encabezado y haz que apunte al mismo enlace.

Formulario insertado:

  1. Edita la página y haz clic en Add Block → Code.
  2. Pega el código de inserción, asegúrate de que el modo esté en HTML y desactiva «Display Source».
  3. Guarda y revisa la página con la sesión cerrada. Squarespace a menudo no ejecuta scripts en la vista previa del editor, así que puede que el formulario solo aparezca en la página publicada.

JavaScript en los bloques de código solo está disponible en algunos planes de Squarespace. Si el formulario no aparece en tu página publicada, lo más probable es que tu plan no lo permita, y entonces lo mejor es usar un botón.

Facilita las reservas a tus clientes

Permite que tus clientes reserven online 24/7, envía recordatorios automáticos y reduce las ausencias. Configura tu página de reservas en minutos.

Sin tarjeta de crédito

HTML y otros creadores de webs

Si tú o tu desarrollador editáis el HTML directamente, pega el código de inserción en el cuerpo de la página, donde quieras que aparezca el formulario. Para un botón, basta con un enlace normal:

<a href="https://yourbusiness.timedule.com" class="book-button">Reservar ahora</a>

Dale el estilo de botón de tu web para que encaje con el resto del diseño. Lo mismo sirve para la mayoría de los demás creadores de webs, como Webflow, Shopify, Weebly o Jimdo: busca un bloque llamado «HTML», «Code», «Embed» o «Custom code» y pega ahí el código de inserción.

Enlaza directamente a un servicio o a una ubicación

Si tu web tiene una página para cada servicio, enlaza cada una directamente a ese servicio para que el cliente se ahorre un paso. En timedule, abre Servicios y copia el enlace de reserva que aparece junto al servicio. Si tienes varios locales, abre Ubicaciones y copia el enlace de cada uno. Ese enlace abre la página de reservas con la ubicación ya elegida. Un botón «Reservar un masaje» en tu página de masajes que abre directamente las horas de masaje convierte mejor que un «Reservar ahora» genérico que empieza desde el principio.

No te quedes solo en tu web

El mismo enlace de reservas funciona en cualquier sitio donde puedas pegar un enlace:

  • Google Business Profile: añádelo como enlace de reservas o de citas para que la gente pueda reservar directamente desde la Búsqueda y Maps de Google.
  • Instagram y Facebook: ponlo en tu biografía y en el botón de acción de tu página.
  • Firma de correo y mensajes: responde a las peticiones de reserva con el enlace en lugar de ir y venir con mensajes sobre horarios.
  • Material impreso: la pestaña Enlace e inserción también tiene un Código QR que puedes descargar para el mostrador, folletos o tarjetas de visita.

Compruébalo antes de anunciarlo

  • Haz una reserva de prueba desde tu web con tu propio móvil, como lo haría un cliente, y luego cancélala.
  • Revisa cómo se ve en el móvil. La mayoría de las reservas se hacen desde el teléfono, así que asegúrate de que el formulario no quede cortado y de que el botón sea fácil de pulsar.
  • Usa la misma dirección en todas partes. Si más adelante cambias tu dirección de reservas, tendrás que actualizar los enlaces que ya hayas compartido, así que elígela antes de empezar a compartirla.
  • Activa los recordatorios para que los clientes que reservan online se presenten de verdad. Nuestra guía sobre cómo reducir las ausencias te explica cómo hacerlo.

Conclusión: un botón en todas partes y una página con el formulario completo

Añadir reservas a tu web lleva unos minutos en cualquier plataforma: copia tu enlace o tu código de inserción desde el panel, añade un botón «Reservar ahora» en todas las páginas e inserta el formulario en una página de reservas si tu plan lo permite. Después, comparte el mismo enlace en Google, en redes sociales y en tu material impreso, y tus clientes podrán reservar cuando mejor les venga, también fuera de tu horario de apertura.

Si todavía no tienes una página de reservas, descubre lo que puede hacer timedule y crea tu página de reservas en unos minutos.

¿Listo para empezar?
Empieza hoy tu prueba gratuita.

Prueba nuestro software de reservas online y descubre lo fácil que es gestionar tus citas.

Regístrate gratisSin tarjeta de crédito