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# oryarn add react-calendlyLuego, 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:
<InlineWidgeturl="https://calendly.com/TU_ENLACE"styles={{ height: '700px' }}utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}prefill={{name: 'Jane Doe',email: '[email protected]'}}}/>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.