Imagina que tienes un estudio de yoga. Tu sitio web lleva dos años activo — lo armó un amigo como favor — y casi no recuerdas la contraseña para entrar. Pero alguien te dijo que agregar un botón de "Reservar ahora" es tan fácil como pegar un fragmento de código.
Tienen razón. Y lo puedes hacer en unos 20 minutos.
Lo más importante:
- Cualquier sitio web — WordPress, Wix, Squarespace, HTML puro — puede tener un botón "Reservar ahora" funcionando hoy mismo
- Setmore, Cal.com y Calendly tienen planes gratuitos de verdad, sin fecha de vencimiento
- Existen tres estilos de widget; el botón flotante es la mejor opción por defecto para visitantes desde celular
- No necesitas a tu desarrollador, un plugin ni conocimientos de programación
En este artículo
- Por qué las reservas embebidas funcionan mejor que compartir un link
- Tres formas de agregarlo: inline, popup o flotante
- Las mejores herramientas de reservas gratis: comparativa rápida
- Cómo obtener tu código de embed
- Cómo insertarlo: 7 plataformas cubiertas
- Antes de publicarlo: revisión de 3 minutos en el celular
- Cuando algo falla: soluciones rápidas
- Preguntas frecuentes
Try this prompt⌘+Enterto launch
Por qué las reservas embebidas funcionan mejor que compartir un link
La mayoría de los dueños de negocios empieza poniendo un link de Calendly en la bio de Instagram, en sus estados de WhatsApp o al pie de su sitio. Funciona… hasta que deja de funcionar.
El problema es que cada vez que un cliente tiene que salir de tu sitio web para hacer una reserva, pierdes a una parte de ellos. Se distraen. La nueva pestaña no carga. Se dicen a sí mismos que volverán más tarde. No vuelven.
Varias plataformas de agendamiento publicaron datos que muestran una mejora de 2 a 3 veces en reservas completadas cuando el calendario está embebido directamente en el sitio del negocio, comparado con enviar a los clientes a una página externa. Una vez que pegas el fragmento de código que te da tu herramienta de reservas, toda la experiencia ocurre en tu sitio — sin redirecciones, sin fricción.
Esto es especialmente importante para los visitantes desde celular, que representan la mayoría del tráfico para casi todos los negocios de servicios locales. En América Latina, más del 70% de las búsquedas locales ocurren desde el celular. Cada clic extra fuera de tu sitio son reservas que estás dejando ir.
Tres formas de agregarlo: inline, popup o flotante
Antes de copiar el código, decide qué estilo tiene más sentido para tu sitio:
Widget inline — El calendario de reservas completo vive directamente en la página. Los visitantes lo ven en cuanto llegan, sin necesidad de hacer clic. Ideal para: negocios donde reservar ES el motivo principal por el que alguien entra (masajista, centro de tutorías, estudio de tatuajes). Generalmente se coloca en una página dedicada de "Reservas".
Widget popup — Un botón en tu página abre el calendario en una ventana superpuesta al hacer clic. Mantiene las páginas limpias. Ideal para: negocios que quieren mostrar contenido primero — un restaurante que muestra su menú, un fotógrafo mostrando su portafolio — antes de que aparezca la opción de reservar.
Botón flotante — Un chip de "Reservar ahora" pegado en la esquina inferior de todas las páginas. Aunque el visitante esté leyendo tu sección "Acerca de" o explorando tu galería, el botón siempre está ahí. La mejor opción por defecto para cualquier audiencia que navega principalmente desde el celular, que son la mayoría de los negocios de servicios.
Elige uno solo. Agregar los tres en la misma página genera desorden y confusión.
Las mejores herramientas de reservas gratis: comparativa rápida
Las cinco herramientas de abajo tienen planes genuinamente gratuitos — no pruebas, no "gratis si ingresas una tarjeta de crédito".
| Herramienta | Plan gratuito incluye | Tipos de widget | Ideal para |
|---|---|---|---|
| Setmore | Citas ilimitadas, hasta 4 colaboradores, recordatorios por email | Inline, popup, flotante | Salones, spas, entrenadores, tutores |
| Cal.com | Tipos de evento ilimitados, sincronización de calendario, pagos con Stripe (compatible con Mercado Pago vía integración) | Inline, popup, flotante | Dueños con perfil técnico que quieren control total |
| Calendly | 1 tipo de evento, reservas ilimitadas | Inline, popup | Consultores, coaches, profesionales independientes |
| TidyCal | Reservas ilimitadas, 1 conexión de calendario | Inline (iframe) | Freelancers, citas simples de 1 a 1 |
| Square Appointments | 1 local, 1 colaborador | Inline, popup | Disponible principalmente en México y EE. UU.; verifica disponibilidad en tu país antes de usarlo |
Mi recomendación honesta si estás empezando desde cero: Setmore. Su plan gratuito es el más generoso en 2026 — citas ilimitadas, hasta cuatro colaboradores, recordatorios por email, y funciona perfectamente en todos los constructores de sitios web. Sin sorpresas, sin cobros ocultos.
Cal.com es una segunda opción sólida si quieres control total (es de código abierto) y no te importa una configuración un poco más larga. Calendly es el nombre más conocido, pero en el plan gratuito resulta frustrante — un solo tipo de evento significa que un salón de belleza no puede listar cortes, tintes y peinados por separado sin pagar.
Cómo obtener tu código de embed
Las cinco herramientas generan un fragmento de HTML corto para ti. Así es donde encontrarlo en las tres opciones más populares:
Setmore:
- Inicia sesión → Settings → Website Integration
- Elige el estilo de widget (inline, popup o botón flotante)
- Personaliza el color del botón para que combine con tu sitio
- Haz clic en Copy Code — obtendrás un fragmento corto
Calendly:
- Abre tu tipo de evento → Share → Add to Website
- Elige Inline, Popup Text o Popup Widget
- Copia el fragmento de código
Cal.com:
- Abre tu tipo de evento → Share → Embed
- Elige tu estilo, ajusta los colores → Copia el fragmento
El fragmento se verá como un bloque de caracteres que quizás no reconoces a primera vista. No te intimide — es solo texto, y estás a punto de pegarlo en un lugar específico.
Cómo insertarlo: 7 plataformas cubiertas
Try this prompt⌘+Enterto launch
WordPress — Edita tu página, cambia al editor de Código (o agrega un bloque HTML personalizado en Gutenberg) y pega. Para el botón flotante, ve a Apariencia → Editor de archivos del tema → footer.php y pega justo antes de </body>.
Wix — Arrastra un elemento Embeds a tu página, elige "HTML iframe" y pega dentro. Para el botón flotante: Settings → Custom Code → Add Code to Pages → Body – end.
Squarespace — Agrega un Bloque de Código en cualquier página y pega tu fragmento. Para el botón flotante: Settings → Advanced → Code Injection → Footer.
Webflow — Arrastra un elemento HTML Embed y pega dentro. Para el botón flotante: Project Settings → Custom Code → Footer Code.
Sitio HTML puro (el tipo que alguien te armó hace años) — Abre el archivo .html en cualquier editor de texto y pega tu fragmento donde quieres que aparezca. Para el botón flotante, pégalo justo antes de </body> en el archivo de cada página. Un editor gratuito como VS Code funciona perfecto.
Shopify — Themes → Edit Code → Abre theme.liquid → pega el fragmento del botón flotante justo antes de </body>. Para un widget inline en una página: agrega una sección de HTML personalizado en el contenido de tu página.
Google Sites — Insert → Embed → "By code." Nota: Google Sites restringe algo de JavaScript, así que la opción iframe de Cal.com funciona mejor aquí que los embeds basados en JS.
Si tu sitio está en una plataforma que no está en esta lista, la misma lógica aplica: busca dónde agregar HTML personalizado o un bloque de código, pega tu fragmento, guarda. Todas las plataformas importantes tienen esta opción.
Antes de publicarlo: revisión de 3 minutos en el celular
Toma tu celular y revisa estas tres cosas antes de anunciarle el widget a tus clientes:
1. ¿El calendario carga en el celular? Abre tu página en el navegador de tu celular. Si no aparece en 3 segundos, prueba cambiar a la versión iframe de tu herramienta de reservas en lugar del embed con JavaScript — generalmente es más compatible con celulares más antiguos.
2. ¿El botón es visible sin hacer scroll? Los botones flotantes resuelven esto automáticamente. Si usaste un widget inline, asegúrate de que esté por encima del doblez en el celular (los visitantes no deberían tener que hacer scroll para encontrarlo). Súbelo en la página si es necesario.
3. ¿Puedes completar una reserva de prueba de principio a fin? Haz el proceso completo desde tu celular — selecciona un servicio, elige un horario, ingresa tu nombre, confirma. Si algo falla, verifica que la configuración de vista móvil de tu herramienta esté activada. La mayoría de las herramientas tienen un interruptor de vista optimizada para celular en la configuración de pantalla.
Tres minutos. Hazlo antes de avisarle a tus clientes que el botón está activo.
Cuando algo falla: soluciones rápidas
Recuadro blanco donde debería estar el widget — La configuración de seguridad de tu sitio está bloqueando el embed. Prueba cambiar de la versión iframe a la versión JavaScript (o viceversa). Si estás en un plan de hosting administrado, contacta al soporte y pídeles que permitan embeds del dominio de tu herramienta de reservas.
El color del botón no combina con tu sitio — Vuelve a la configuración del embed en tu herramienta de reservas (tanto Setmore como Calendly tienen selectores de color visuales) y ajusta antes de copiar el código de nuevo. No necesitas tocar CSS.
Funciona en computadora, invisible en celular — Algunos temas de WordPress o constructores de páginas deshabilitan el código personalizado en celular de forma separada al escritorio. Revisa la configuración móvil de tu tema, o usa la página de reservas alojada por la herramienta como link directo en el botón del celular.
Las reservas no aparecen en tu calendario — Probablemente saltaste el paso de sincronización de calendario durante la configuración. Ve a Settings → Integrations en tu herramienta de reservas y conecta tu Google Calendar o Outlook. Tanto Setmore como Calendly te guían en este proceso en unos 60 segundos.
Si prefieres saltarte el rompecabezas de "agregar al sitio existente", Fardino construye tu sitio web con las reservas ya integradas — describe tu negocio y te entrega un sitio completo con la sección de reservas preconfigurada.
Para tener el panorama completo sobre cómo armar el sitio web de tu negocio, la Guía Completa para Sitios Web de Pequeños Negocios cubre todo, desde las plantillas hasta el lanzamiento. Y si estás construyendo específicamente para un negocio de servicios, nuestras guías sobre sitios para salones de belleza con reservas y sitios para entrenadores personales y estudios de yoga van a fondo en la configuración de reservas en esos contextos específicos.
¿Quieres un camino más rápido para tener tu primer widget de reservas activo? Empieza con Agrega Reservas Online en 15 Minutos — cubre la elección de herramienta y la configuración básica en un solo artículo.
Preguntas frecuentes
¿Cómo agrego un widget de reservas online a mi sitio web de forma gratuita?
Regístrate en Setmore, Calendly, Cal.com o TidyCal — todos tienen planes gratuitos sin fecha de vencimiento. Ve a la configuración de embed o widget de tu cuenta, copia el fragmento de código y pégalo en el HTML o editor de páginas de tu sitio. La mayoría de los constructores de sitios web tienen un elemento de "HTML personalizado" o "Bloque de código" que hace de esto un simple proceso de pegar.
¿Puedo agregar un widget de reservas a un sitio que no construí yo?
Sí. Mientras tengas acceso al panel de administración — aunque sea solo para editar una página — puedes pegar el fragmento del widget. No importa quién lo hizo. La única excepción son plataformas completamente cerradas como Linktree o las páginas de Facebook, donde no se puede agregar código personalizado; en esos casos, enlaza directamente a tu página de reservas.
¿Cuál es el widget de reservas gratis más fácil de integrar en 2026?
Setmore es el más fácil para usuarios sin perfil técnico: configuración visual, copia con un clic y funciona en todos los constructores principales. Calendly es el más conocido, pero el límite de un solo tipo de evento en el plan gratuito termina frustando a la mayoría de los negocios de servicios bastante rápido.
¿Cuál es la diferencia entre un widget de reservas inline y uno popup?
El inline muestra el calendario completo directamente en tu página — sin necesidad de hacer clic. El popup mantiene tu página más limpia y muestra el calendario cuando alguien hace clic en tu botón "Reservar ahora". El botón flotante es un tercer estilo: un chip fijo que permanece visible en la esquina mientras los visitantes navegan cualquier página de tu sitio. Para la mayoría de los negocios de servicios donde la audiencia navega desde el celular, el flotante es la mejor opción por defecto.
¿Cómo agrego un widget de reservas a un sitio HTML puro?
Abre tu archivo .html en cualquier editor de texto y pega el fragmento de tu herramienta de reservas donde quieres que aparezca. Para un botón flotante, pégalo justo antes de la etiqueta </body>. Sin frameworks, sin plugins, sin habilidades especiales — es solo pegar texto.
Escrito por el equipo de 0xMinds — probamos herramientas de IA para que no tengas que hacerlo tú. Crea un sitio web con IA →
