Integración avanzada de Calendly para desarrolladores

Controla cómo funciona Calendly en tu sitio web. Usa la incorporación avanzada de JavaScript para personalizar cómo y cuándo aparece Calendly. Puedes rellenar previamente la información del invitado, realizar un seguimiento de eventos, ocultar detalles y más.

Configura la inserción con JavaScript

Añade Calendly a un elemento específico de tu página:

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed')
});

Configuración necesaria:

1. Incluye el script de Calendly en tu código HTML:

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>

2. Añade un elemento contenedor para la inserción:

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>

Incluye el elemento padre para controlar dónde aparece la inserción. Sin él, Calendly se cargará en la parte inferior de tu página web.

Prellenar respuestas de reserva

Obtén información sobre cómo rellenar previamente respuestas de reserva.

Redimensiona automáticamente la incrustación de Calendly

De forma predeterminada, la inserción tiene una altura fija. Si el contenido es más largo, puede desplazarse dentro del widget. Puedes hacer que la altura se ajuste automáticamente.

Usa la inserción estándar

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
data-resize="true"
style="min-width:320px;height:700px;"></div>

Usa la inserción avanzada de JavaScript

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed'),
resize: true
});

Importante:

• Solo usa una inserción con cambio de tamaño automático por página para evitar problemas de diseño.
• Evita los desplegables en los formularios de reserva o enrutamiento al usar el redimensionamiento automático.

Ocultar información de perfil o el banner de cookies

Aprende cómo personalizar tu inserción para ocultar información de perfil o el banner de cookies. 

Rastrear acciones con postMessage

Calendly envía eventos cuando alguien interactúa con la inserción. Puedes escucharlos para desencadenar acciones o realizar un seguimiento del comportamiento.

Eventos enviados:

• calendly.profile_page_viewed
• calendly.event_type_viewed
• calendly.date_and_time_selected
• calendly.event_scheduled

Ejemplo:

function isCalendlyEvent(e) {
return e.origin === "https://calendly.com" && e.data.event?.startsWith("calendly.");
}

window.addEventListener("message", function(e) {
if (isCalendlyEvent(e)) {
console.log("Calendly Event:", e.data.event);
console.log("Event Details:", e.data.payload);
}
});

Calendly utiliza window.postMessage() para enviar estos eventos a la ventana principal.

Usa un iframe (método alternativo)

Calendly se carga en un iframe de forma predeterminada. Si lo prefieres, puedes insertar Calendly utilizando un código iframe directo:

<iframe src="https://calendly.com/YOUR_SCHEDULING_LINK"
style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>

Nota: Los iframes no admiten el reajuste automático ni el seguimiento de eventos a través de postMessage.