Cómo añadir una ventana emergente de Calendly a Webflow y mantener a tus visitantes en el sitio

He visto demasiadas páginas de aterrizaje excelentes perder conversiones justo en la meta. Creas un sitio en Webflow precioso, das en el clavo con el mensaje, diseñas una llamada a la acción que realmente funciona y, de repente, rediriges a los usuarios a “calendly.com/tu-pagina-de-reservas” para agendar una llamada.

La mitad de ellos nunca vuelve.

¿Adivinas por qué?

El problema es que rompes el flujo del usuario. Cada redirección externa es un punto de fricción donde la gente decide dejarlo para "más tarde" y cierra la pestaña.

He hecho pruebas en decenas de sitios y te aseguro que mantener la reserva dentro de la misma página mediante un modal aumenta las conversiones en comparación con los enlaces externos.

La solución es sencilla: integra Calendly como una ventana emergente que se abra directamente en tu página de Webflow. Sin redirecciones, sin pestañas nuevas y sin darle a tus clientes potenciales la oportunidad de distraerse con su bandeja de entrada y olvidarse de ti.

En esta guía, veremos paso a paso cómo añadir un modal de Calendly a Webflow. Aprenderás cuál de los tres métodos de integración de Calendly realmente convierte (spoiler: dos de ellos son un desastre para las páginas de aterrizaje).

3 formas de integrar Calendly en Webflow y por qué el modal es la mejor opción

Antes de empezar a copiar código, hablemos de qué método de integración vas a usar. Calendly ofrece tres formas de añadir reservas a tu sitio de Webflow, y solo una tiene sentido para páginas enfocadas a la conversión.

Los modales de Calendly abren la herramienta en una capa superpuesta cuando el usuario hace clic en tu llamada a la acción: sin navegar a otra página y sin romper el flujo. Por el contrario, las integraciones en línea ocupan más de 600 píxeles de espacio vertical y los enlaces directos envían a los clientes a calendly.com, donde la mitad se pierde por el camino.

La opción de texto emergente añade un enlace de texto con estilo (como "Reservar una demo") que abre tu calendario de Calendly en una ventana superpuesta al hacer clic. Los visitantes permanecen en tu página, la experiencia de programación aparece bajo demanda y tu diseño se mantiene limpio.

Este es el método que implementaremos en esta guía. Te da control total sobre dónde aparecen las llamadas a la acción (CTA) de reserva (encabezado, sección principal, tabla de precios o pie de página), todo ello activando la misma ventana modal de Calendly, sin saturar tu diseño con múltiples calendarios incrustados.

Para sitios donde la programación es importante pero no el objetivo principal de cada página, esta flexibilidad es fundamental.

¿Qué necesitas para añadir una ventana modal emergente de Calendly en Webflow?

Necesitas una cuenta de Calendly con un tipo de evento creado, acceso a la sección de código personalizado a nivel de sitio de Webflow y un elemento de botón o enlace en una de tus páginas. Para la implementación, pegarás el script de Calendly en el código del pie de página, añadirás un activador a tu botón y publicarás el sitio.

La complejidad de la implementación es baja, ya que no estás construyendo nada desde cero, solo conectando la funcionalidad emergente existente de Calendly a un botón en tu diseño de Webflow.

Esto es lo que necesitas para implementar la ventana modal emergente de Calendly en Webflow.

Una cuenta de Calendly con al menos un tipo de evento creado

El plan gratuito de Calendly funciona perfectamente para esto. Necesitarás la URL de programación de tu tipo de evento, que se ve así: “calendly.com/your-username/30min-call”.

Si aún no has creado un tipo de evento, inicia sesión en Calendly, haz clic en "Crear" en la navegación superior y configura un tipo de reunión básico. Luego, ponle nombre, elige una duración y conecta tu calendario. Te llevará unos 3 minutos.

Acceso a la sección de código personalizado de Webflow

Esto es a nivel de sitio, no de página. Lo encontrarás en Configuración del proyecto → Código personalizado.

Si estás trabajando en el sitio de un cliente y no tienes acceso a la configuración del sitio, deberás solicitarlo al propietario del proyecto. La ventana modal emergente requiere añadir el script externo de Calendly al código del pie de página de tu sitio, lo que significa que necesitas este nivel de permisos.

Un elemento de botón o enlace en tu diseño de Webflow

Puede ser cualquier cosa: un botón con estilo, un enlace de texto, un div personalizado con interacciones de clic. La ventana modal emergente se activa con el elemento que elijas. Le asignarás a este elemento un ID único o un nombre de clase compartido, que usaremos para conectarlo a la función emergente de Calendly.

Si planeas incluir varias llamadas a la acción de reserva en diferentes páginas, piensa si quieres que todas usen el mismo nombre de clase para facilitar la gestión.

Algo que suele confundir a la gente: la ventana modal emergente de Calendly no funcionará en el modo de vista previa de Webflow.

5 pasos para añadir una ventana modal emergente de Calendly en Webflow

Añadir una ventana modal emergente de Calendly a Webflow requiere cinco pasos: obtener el código de incrustación del panel de control de Calendly (opción de texto emergente), pegar el script en el código personalizado del pie de página a nivel de sitio de Webflow, añadir un botón a tu página con un ID único, pegar el código de activación en un elemento de incrustación que conecte tu botón con la función emergente de Calendly y publicar para probar en tu sitio en vivo.

Todo el proceso lleva entre 10 y 15 minutos, y la ventana emergente abrirá Calendly en una capa superpuesta cuando los visitantes hagan clic en tu llamada a la acción, sin redirigirlos fuera de tu página.

Paso 1: Obtén tu código de integración de Calendly desde el panel de control

Inicia sesión en tu cuenta de Calendly y ve al panel de control principal, donde verás listados tus tipos de eventos. Busca el tipo de reunión que quieres integrar, ya sea una consulta de 30 minutos, una llamada de demostración o lo que hayas configurado. Haz clic en el icono de engranaje junto al nombre del tipo de evento para abrir la configuración.

Si aún no has creado un tipo de evento, haz clic en "Crear" en la navegación superior. Establecerás un nombre, elegirás una duración (15, 30 o 60 minutos), seleccionarás la ubicación de tu reunión (Zoom, Google Meet, teléfono, etc.) y conectarás tu calendario para verificar la disponibilidad.

Selecciona la opción de integración de texto emergente

En la configuración del tipo de evento, busca la sección "Añadir al sitio web" en la barra lateral izquierda.

Haz clic ahí y verás las tres opciones de integración de Calendly: Integración en línea, Widget emergente y Texto emergente.

Texto emergente es la opción que te proporciona el código diseñado para activarse mediante enlaces o botones que tú controlas. Esto es lo que hace que la ventana modal se abra cuando alguien hace clic en tu llamada a la acción.

Copia el fragmento de código de integración

Después de seleccionar Texto emergente, Calendly te mostrará una vista previa y te pedirá que personalices el texto del enlace. Puedes configurarlo como "Reservar una llamada", "Programar una reunión" o lo que tenga sentido para tu caso de uso.

Este texto es lo que aparecería si pegaras el código directamente en tu página, pero de todos modos lo vamos a reemplazar con tu propio botón personalizado, así que la redacción exacta aquí no importa mucho.

Haz clic en "Continuar" y luego en "Copiar código".

El fragmento que estás copiando se ve más o menos así:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/your-username/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

Observa la estructura: hay un enlace CSS, una etiqueta de script de JavaScript y una etiqueta de anclaje con un controlador onclick. Las partes importantes aquí son el script que carga la funcionalidad del widget de Calendly y la URL de tu tipo de evento específico (calendly.com/your-username/30min).

Dividiremos este código en los siguientes pasos, donde el script irá en un lugar de Webflow y el código del activador en otro.

Paso 2: Añade el script de Calendly al código personalizado de Webflow

En tu proyecto de Webflow, haz clic en el icono de engranaje en la barra lateral izquierda para abrir la configuración del sitio.

Verás una lista de categorías de configuración. Busca "Código personalizado" y haz clic en él. Esto es diferente de la configuración a nivel de página (donde añadirías código a páginas específicas) o del elemento de integración (donde añadirías código en línea en tu diseño).

La sección de código personalizado controla el código que se carga en todo el sitio.

Si no ves el código personalizado en el menú de configuración de tu proyecto, es posible que no tengas el nivel de permiso adecuado en este proyecto. Webflow restringe el acceso al código personalizado a nivel de sitio a los propietarios del proyecto y a los editores con acceso completo.

Si eres diseñador, programador o tienes permisos limitados, necesitarás que el propietario del proyecto te conceda acceso o pegue este código por ti. Este es un obstáculo común si trabajas en sitios de clientes.

Pega el script en la sección de código del pie de página

En "Custom Code", verás dos cuadros de texto: "Head Code" y "Footer Code". Haz clic en el cuadro "Footer Code". Aquí es donde debe ir el script de Calendly.

Del código de inserción que copiaste de Calendly, necesitas dos líneas: el enlace CSS y la etiqueta script. El CSS es obligatorio, porque sin él, el modal se carga pero sin estilo.

Pega ambos en el cuadro "Footer Code":

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

No pegues aquí la etiqueta de anclaje con el controlador onclick; eso va en otro lugar en el siguiente paso.

Pega la etiqueta script en el "Footer Code" y luego haz clic en "Save Changes" al final de la página. No hace falta publicar todavía. Solo guarda los cambios del "Custom Code".

Paso 3: Añade un botón de activación a tu página de Webflow

Si ya tienes un botón de "Reservar llamada" o "Programar demo" en tu diseño de Webflow, puedes usarlo. Si no, arrastra un elemento de botón desde el panel "Add" a tu página donde quieras que aparezca la llamada a la acción, por ejemplo, en la sección principal, la tabla de precios o el pie de página, lo que mejor encaje con tu diseño.

El botón puede tener el estilo que quieras. El elemento de botón nativo de Webflow, un enlace de texto con una clase de botón, un div personalizado con estilo de botón... da igual.

El activador de la ventana emergente funciona con cualquier elemento en el que se pueda hacer clic. He visto gente activar modales de Calendly desde tarjetas de imagen, enlaces de navegación y llamadas a la acción personalizadas. Mientras sea un elemento del DOM que pueda recibir un evento de clic, funcionará.

Además, la posición importa menos de lo que crees.

El botón no tiene que estar cerca del elemento "Embed" que añadiremos después. Puedes tener el botón en el encabezado y el elemento "Embed" al final de la página, o el botón en la sección principal y el "Embed" en el pie de página. El JavaScript los conectará igual.

Asigna un ID único a tu botón en la configuración del elemento

Selecciona tu botón en el diseñador de Webflow. En la barra lateral derecha, verás el panel de configuración del elemento (el icono del engranaje). Busca el campo "ID" cerca de la parte superior. Está justo debajo del selector de elementos y encima del campo de clase.

Haz clic en el campo ID y dale a tu botón un identificador único. Algo como book-call-btn, schedule-demo o calendly-trigger. Mantenlo simple, en minúsculas y usa guiones en lugar de espacios o guiones bajos (es la convención estándar para IDs en desarrollo web).

Este ID debe ser único en la página.

No le des el mismo ID a varios botones; eso romperá el activador porque el getElementById de JavaScript solo captura el primer elemento que encuentra. Si quieres que varios botones abran el mismo modal de Calendly, lo gestionaremos en el paso 5 usando clases en lugar de IDs. Por ahora, configuraremos un solo activador.

Anota o recuerda este ID, porque lo necesitarás en el siguiente paso cuando peguemos el código del activador.

Añade un elemento Embed con el código del activador

Ahora vamos a conectar tu botón con la función de ventana emergente de Calendly.

Desde el panel de Añadir en Webflow (presiona A en tu teclado o haz clic en el icono de más), arrastra un elemento Embed a tu página. La ubicación no es muy importante. Yo suelo soltarlo cerca del botón o al final de la sección para encontrarlo fácilmente después, pero técnicamente puede ir en cualquier parte de la página.

Haz doble clic en el elemento Embed para abrir el editor de código. Aquí es donde pegarás el JavaScript que detecta los clics en tu botón y activa la ventana emergente de Calendly.

Aquí tienes el código que debes pegar:

<script>
  document.getElementById('book-call-btn').addEventListener('click', function() {
    Calendly.initPopupWidget({url: 'https://calendly.com/your-username/30min'});
    return false;
  });
</script>

Necesitas modificar dos cosas en este código:

• Reemplaza 'book-call-btn' por el ID real que le diste a tu botón en el paso anterior. Si lo llamaste schedule-demo, cambia esta línea a document.getElementById('schedule-demo').
• Reemplaza por la URL real de tu tipo de evento de Calendly. Es la misma URL que viste en el código de inserción del Paso 1. Apunta directamente a tu página de programación específica.'https://calendly.com/your-username/30min'

Haz clic en "Guardar y cerrar" en el elemento Embed. No verás ningún cambio visual en el Diseñador, ya que el elemento Embed solo aparece como un cuadro gris con la etiqueta . Es normal. El código solo se ejecuta cuando alguien hace clic en tu botón en el sitio publicado. Custom Code

Todo el script está envuelto en etiquetas <script> porque el elemento Embed acepta HTML, y el JavaScript debe estar dentro de etiquetas script para ejecutarse en un navegador.

Paso 4: Publica y prueba tu ventana emergente de Calendly en Webflow

En el Diseñador de Webflow, haz clic en el botón "Publicar" en la esquina superior derecha.

Si tienes varios destinos de publicación (sitio de prueba, sitio de producción), elige dónde quieres probar. Para las pruebas iniciales, publicar en un entorno de prueba es buena idea si tienes uno configurado, pero el sitio en vivo también funciona perfectamente.

Espera a que termine el proceso de publicación; Webflow mostrará un indicador de progreso. Suele tardar entre 30 y 60 segundos, dependiendo de cuántas páginas y recursos tenga tu sitio. No cambies de página ni cierres la pestaña mientras se publica.

Una vez que termine la publicación, Webflow mostrará un mensaje de éxito con un enlace para "Ver sitio en vivo". Haz clic en él o copia la URL de tu sitio y ábrela en una nueva pestaña del navegador. Esto es importante: debes probar en la URL publicada real (tussitio.webflow.io o tu dominio personalizado), no en el enlace de vista previa (preview.webflow.com/preview/tussitio...).

Haz clic en tu botón y verifica que se abra la ventana emergente

Ve a la página donde añadiste tu botón de reserva. Haz clic en él.

Si todo está conectado correctamente, verás que la interfaz de programación de Calendly se abre como una capa sobre tu página. El fondo debería oscurecerse ligeramente y el calendario debería aparecer centrado en tu pantalla.

La ventana emergente debería mostrar el nombre de tu tipo de evento, la duración, la descripción (si añadiste una) y los horarios disponibles según tu calendario. Los usuarios pueden navegar por las fechas, seleccionar una hora y completar la reserva sin salir de tu sitio de Webflow.

Cuando cierran la ventana (haciendo clic en el botón X o fuera de la capa), regresan a tu página exactamente donde estaban.

Si al hacer clic en el botón no ocurre nada (ni ventana, ni error, nada de nada), las causas más comunes son: el script no está en el código del pie de página (revisa Configuración del proyecto → Código personalizado), el ID del botón en tu código de activación no coincide con el ID real del botón (revisa si hay errores tipográficos) o sigues probando en el modo de vista previa en lugar del sitio publicado.

Paso 5: Añade varios activadores de ventana emergente de Calendly en la misma página de Webflow

Si seguiste el paso 3, tu botón tiene un ID único, comobook-call-btn

For multiple buttons, we need a different approach because IDs must be unique; you can't give five different buttons the same ID and expect getElementById to work.

Para varios botones, necesitamos un enfoque diferente porque los ID deben ser únicos; no puedes asignar el mismo ID a cinco botones distintos y esperar que

funcione.calendly-trigger

En su lugar, puedes asignar el mismo nombre de clase a todos tus botones de reserva.booking-btnschedule-ctaopen-calendly),

Selecciona cada botón donde quieras activar la ventana emergente de Calendly, ve al campo Selector (donde añades clases en Webflow) y añade una clase como

As long as they all share the same class name, the trigger code will work on all of them.

Puedes llamarla como quieras (button, button-primary, and button-largecalendly-trigger

,

,

<script>
  document.querySelectorAll('.calendly-trigger').forEach(function(button) {
    button.addEventListener('click', function() {
      Calendly.initPopupWidget({url: 'https://calendly.com/your-username/30min'});
      return false;
    });
  });
</script>

solo mantén la coherencia.querySelectorAll('.calendly-trigger').forEach()

Añade esta clase a todos los botones en todas las páginas donde quieras que funcione la ventana emergente. ¿Navegación del encabezado? Añade la clase. ¿CTA principal? Añade la clase. ¿Botón de tabla de precios? Añade la clase. ¿Enlace del pie de página? Añade la clase.'https://calendly.com/your-username/30min'

Mientras todos compartan el mismo nombre de clase, el código de activación funcionará en todos ellos.calendly-trigger

También puedes conservar tus otras clases de estilo. Si tu botón principal tiene clases como

, simplemente añade

como una clase adicional. El código de activación solo necesita esa clase compartida para encontrar todos los botones.

Actualiza tu código de inserción para dirigirte a todos los botones coincidentes

Vuelve al elemento de inserción (Embed) donde añadiste tu código de activación en el paso 3. Haz doble clic para abrir el editor de código. Sustituye el código existente por esta versión actualizada:calendly-trigger

Los cambios clave:

encuentra todos los elementos con esa clase (fíjate en el punto antes del nombre de la clase; esa es la sintaxis del selector CSS), ycalendly-trigger

Todas deberían activar la misma interfaz de programación de Calendly porque todas ejecutan la misma initPopupWidget llamada con la misma URL de tipo de evento.

Si un botón funciona pero otro no, comprueba que ambos tengan realmente la calendly-trigger clase aplicada. En Webflow, es fácil pensar que has añadido una clase a un elemento cuando en realidad solo lo has seleccionado en el panel de Estilo pero no has hecho clic en "Crear nueva clase" ni has aplicado una existente.

Un caso excepcional: si tienes botones dentro de Listas de colección (por ejemplo, una cuadrícula de miembros del equipo con un botón "Reservar con [Nombre]"), tendrás que ajustar un poco el enfoque para pasar diferentes URL de Calendly para cada miembro del equipo.

Eso requiere leer atributos de datos o usar diferentes clases, lo cual va más allá de esta implementación básica, pero vale la pena mencionarlo si tu caso de uso lo requiere.

4 problemas comunes con la ventana emergente de Calendly en Webflow y cómo solucionarlos

Los tres problemas más comunes son probar en el modo de vista previa en lugar de en el sitio publicado (el código personalizado no se ejecuta en la vista previa), las extensiones del navegador que bloquean el script de Calendly (los bloqueadores de anuncios suelen marcar assets.calendly.com) y las discrepancias entre el ID del botón en tu código de activación y el ID del elemento real (busca errores tipográficos).

Los problemas menos comunes incluyen dificultades con el desplazamiento de la página después de que se abre la ventana emergente y los tipos de evento que muestran "no disponible" cuando en realidad están desactivados en tu panel de control de Calendly.

Veamos cómo resolver estos problemas.

1. El clic en el botón no hace nada

Si al hacer clic en el botón no aparece ninguna ventana emergente ni ningún error visible, comprueba lo siguiente en este orden:

• Verifica que estás probando en el sitio web publicado (no en preview.webflow.com)
• Confirma que el script está en Configuración del proyecto → Código personalizado → Código del pie de página (no en la configuración de la página)
• Verifica que el ID de tu botón en el código de activación incrustado coincida exactamente con el ID que le diste al elemento del botón (distingue entre mayúsculas y minúsculas, sin errores tipográficos)

Abre la consola de desarrollador de tu navegador (F12 o clic derecho → Inspeccionar → pestaña Consola) y busca errores de JavaScript. Si ves Calendly is not defined, el script no se cargó desde el código del pie de página.

Si ves Cannot read property 'addEventListener' of null, tu getElementById no encontró el botón porque el ID no coincide.

2. La ventana emergente funciona en Safari o en modo incógnito, pero no en Chrome normal

Las extensiones del navegador, especialmente los bloqueadores de anuncios y las herramientas de privacidad, suelen bloquear scripts de terceros, como widget.js de Calendly. Prueba en modo incógnito/privado (donde las extensiones suelen estar desactivadas) para confirmar que este es el problema.

Si la ventana emergente funciona en modo incógnito pero no en la navegación normal, desactiva las extensiones una por una para encontrar la culpable, o añade una excepción para tu sitio en la configuración de tu bloqueador de anuncios.

3. La página se desplaza de forma extraña después de abrir la ventana emergente

La ventana emergente de Calendly añade una clase al elemento body, pero no siempre evita el desplazamiento del fondo en todas las plantillas de Webflow.

Si los usuarios pueden desplazarse por la página detrás del modal o si la página da un salto al abrirlo, añade este CSS al código personalizado de tu sitio (en la sección Head Code):

<style>
body.calendly-overlay-open {
  overflow: hidden;
}
</style>

Esto evita el desplazamiento cuando el modal de Calendly está activo, solucionando el problema del salto tanto en escritorio como en dispositivos móviles.

El tipo de evento aparece como "no disponible" o no muestra franjas horarias

Inicia sesión en tu panel de Calendly y verifica que el tipo de evento esté activo (el interruptor debe estar en "On", no en "Off"). Comprueba que tus ajustes de disponibilidad no sean demasiado restrictivos; si solo muestras franjas con 60 días de antelación y estás haciendo pruebas con la fecha de hoy, no aparecerá nada.

Confirma que tu calendario conectado se esté sincronizando correctamente en los ajustes de calendario de Calendly.

Crea funciones más interactivas en Webflow más allá de la programación de citas

Ya has resuelto la programación con un modal emergente.

Pero convertir visitantes en sitios de consultoría y SaaS requiere algo más que botones de reserva: necesitas formularios de captación de leads que redirijan a diferentes calendarios según el tipo de servicio, flujos de cualificación que muestren precios antes de reservar, contenido dinámico que se adapte al comportamiento del visitante y cobros que se realicen antes de confirmar las citas.

La mayoría de los equipos se topan con un muro tras implementar incrustaciones básicas. Necesitan un modal para imanes de leads, un formulario de varios pasos para la cualificación, una tabla de datos para comparar precios o un selector de fechas que no dependa de Calendly.

Cada una de estas opciones implica elegir entre incrustaciones de terceros poco prácticas, un costoso desarrollo a medida o los componentes de código de Webflow.

Explora la integración de Calendly en Webflow para obtener funciones más avanzadas en el futuro y ver toda la gama de opciones de integración.

Para componentes interactivos más allá de la programación (modales, formularios, tablas de datos), echa un vistazo a las implementaciones de código personalizado o a los componentes de código de Webflow a medida que el ecosistema se expande.