Cómo insertar Calendly en una aplicación React

Si estás creando una aplicación React, puedes insertar Calendly para permitir a los usuarios reservar una cita sin abandonar tu sitio. Esta guía cubre tus opciones y ofrece consejos para una implementación sin problemas.

Usa el paquete react-calendly

La forma más sencilla de insertar Calendly en React es utilizar el paquete de terceros react-calendly. Aunque Calendly no lo mantiene directamente, muchos desarrolladores lo utilizan en producción.

Para comenzar:

Instala el paquete mediante npm o yarn:

npm install react-calendly
# or
yarn add react-calendly

Luego, importa y usa el componente en tu código de React:

import { InlineWidget } from "react-calendly";

function BookingPage() {
return (
<InlineWidget url="https://calendly.com/TU_ENLACE" />
);
}

Esto añade una inserción en línea a tu página.

Otros componentes disponibles

El paquete react-calendly también admite:

• PopupText – muestra un enlace de texto que abre una ventana emergente
• PopupButton – muestra un botón que abre el programador
• PopupWidget – añade un widget flotante a tu aplicación

Consulta el paquete react-calendly para ver ejemplos completos y opciones de personalización.

Personaliza tu inserción

Puedes pasar propiedades o parámetros para personalizar el widget. Por ejemplo, puedes:

• Llenar previamente el formulario de reserva con los detalles del invitado/a
• Hacer un seguimiento de los parámetros UTM
• Controlar la altura y el estilo

Ejemplo con propiedades:

<InlineWidge
turl="https://calendly.com/TU_ENLACE"
styles={{ height: '700px' }}
utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}
prefill={{
name: 'Jane Doe',
email: 'jane@example.com'
}}}
/>

Solucionar problemas de diseño

Las inserciones de Calendly utilizan iframes. Algunos diseños de React, especialmente los diseños con prioridad para móviles, pueden causar problemas de tamaño o desplazamiento.

Si observas problemas de desplazamiento (comunes en iOS):

• Asegúrate de que el contenedor tiene al menos 700 px de altura.
• Evita usar overflow: auto o contenedores de altura fija.
• Prueba el diseño usando herramientas de desarrollo del navegador

Usa el script de inserción estándar (sin paquete)

Si prefieres no usar react-calendly, puedes insertar Calendly con JavaScript estándar y un hook useEffect.

Ejemplo:

import { useEffect } from "react";

function BookingPage() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
script.async = true;
document.body.appendChild(script);

 window.Calendly.initInlineWidget({
url: "https://calendly.com/TU_ENLACE",
parentElement: document.getElementById("calendly-embed"),
});
}, []);

return <div id="calendly-embed" style={{ minWidth: "320px", height: "700px" }} />;
}

Esto le brinda un control total, de manera similar a la integración de Calendly en HTML normal.