Cómo crear un botón personalizado para abrir Calendly

Añade un botón personalizado que abra Calendly en una ventana emergente mediante HTML y JavaScript; no es necesario un iframe. Guía completa de configuración y estilo incluida.

Antes de empezar

Para crear un botón que abra Calendly en una ventana emergente, debes:

• Incluir el script y CSS de Calendly insertados en tu página
• Añadir un botón u otro elemento sobre el que hacer clic en el código HTML
• Utiliza una función onclick de JavaScript para iniciar el planificador

Paso 1 - añade el CSS y JavaScript de Calendly

Añade el siguiente código al HTML del sitio, idealmente justo antes de la etiqueta de cierre </head o en la parte superior del cuerpo del HTML:

<!-- Scripts y estilos de inserción de Calendly --
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet"
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"</script

Estos recursos son necesarios para que la ventana emergente funcione.

Paso 2 - añade el botón

Crea un botón o enlace en el código HTML. En el atributo onclick, llama a la función emergente de Calendly e incluye tu enlace de programación.

Ejemplo:

<button onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/TU_ENLACE_PROGRAMACION' }); return false;"
Programa una hora para reunirse
</button

Reemplaza TU_ENLACE_PROGRAMACION por la URL completa de tu página de reservas o tipo de evento.

Puedes utilizar cualquier elemento en el que se pueda hacer clic (enlaces, iconos o divs), siempre que incluya la misma función de onclick.

Opcional – personaliza el comportamiento de la ventana emergente

La ventana emergente aparece en el centro de la pantalla con una superposición. También puedes pasar parámetros como datos de invitados rellenados previamente o etiquetas UTM si usas la inserción avanzada. Para la mayoría de los casos, el ejemplo anterior es suficiente.

Diseña tu botón

Puede personalizar el estilo de su botón con CSS. Un ejemplo:

<style
  .calendly-button {
    background-color: #0069ff;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  .calendly-button:hover {
    background-color: #0052cc;
  }
</style

<button class="calendly-button" onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/TU_ENLACE_PROGRAMACION' }); return false;"
  Reserva tu cita
</button

Actualiza los colores, el relleno, las fuentes y otros estilos para que se adaptena tu sitio.

Consejos para resolver problemas

• Comprueba que se incluyen el script de Calendly y el archivo CSS
• Comprueba que el botón utiliza return false; para evitar que la página se actualice
• Si la ventana emergente no aparece, comprueba si hay errores en la consola del navegador
• Evita hacer varias llamadas a Calendly.initPopupWidget en la misma página a menos que sea necesario