Usa esta guía paso a paso para insertar Calendly en tu sitio de WordPress. Ya sea que uses WordPress.com, WordPress.org o Elementor, encontrarás el método adecuado a continuación. Añade tipos de evento o páginas de reserva mediante integraciones en línea, ventanas emergentes y más.
Antes de empezar
Comprueba qué versión de WordPress estás utilizando
Si no estás seguro de si tu sitio utiliza WordPress.com o WordPress.org:
- Inicia sesión en tu panel de control de WordPress.
- Pasa el cursor sobre el logo de WordPress en la esquina superior izquierda.
- Si aparece un menú desplegable, estás utilizando WordPress.org.
- Si no aparece, estás utilizando WordPress.com.
Obtén tu código de inserción de Calendly
Tendrás que copiar el código de inserción desde tu cuenta de Calendly. Puedes generar un código para:
- Un solo tipo de evento
- Tu página de reservas
Añade Calendly a WordPress.org
WordPress.org te brinda acceso completo para insertar Calendly en una página o en todo el sitio.
- Nota: el código de inserción de Calendly requiere JavaScript. Es posible que algunos temas de WordPress no sean compatibles con JavaScript o puedan afectar la apariencia de la inserción.
Opción 1: añade Calendly a una sola página
- Inicia sesión en WordPress y dirígete a tu panel de administrador.
- Selecciona Páginas y luego elige una página para editar.
- Selecciona el icono + para añadir un nuevo bloque.
- Elige HTML personalizado en las opciones de formato.
- Pega tu código de inserción de Calendly.
- Selecciona Vista previa para comprobar el diseño.
- Selecciona Actualizar para guardar los cambios.
Opción 2: añade el widget emergente en cada página
- En el Panel de administración, dirígete a Apariencia > Editor.
- En la barra lateral derecha, en Archivos de tema, encuentra Pie de tema.
- Desplázate hasta la parte inferior del archivo y busca la etiqueta
</body>. - Pega el código del widget emergente de Calendly justo encima de esa etiqueta.
- Guarda y previsualiza tu sitio.
Añade Calendly a WordPress.com
Puedes añadir Calendly a WordPress.com, independientemente de que tu plan incluya o no soporte de complementos.
- Nota: los widgets incrustados de Calendly solo funcionan con planes de WordPress.com que admiten complementos personalizados o bloques HTML. Si tu plan no es compatible con estos, aun así puedes añadir un enlace clicable en tu página web.
Opción 1: para planes con complementos habilitados
- Dirígete a la página en la que quieres añadir Calendly.
- Selecciona el icono + Bloque de inserción.
- Busca e inserta el bloque HTML personalizado.
- Pega tu código de inserción de Calendly.
- Previsualiza los cambios y selecciona Actualizar para guardar.
Opción 2: para planes sin soporte de complementos
Todavía puedes enlazar a tu página de Calendly desde texto o imágenes.
- Mientras editas la página, resalta el texto y selecciona el botón Insertar/editar enlace.
- Pega la URL en tu página de programación, un tipo de evento o una página del equipo.
- Para vincular una imagen, selecciónala y sigue los mismos pasos.
Añade Calendly con Elementor
Elementor trabaja con WordPress.org y WordPress.com. Te brinda más control sobre el diseño de página.
- Abre tu página en el editor de Elementor.
- Añade un widget de código abreviado al lienzo.
- En la pestaña Contenido, pega el código de incorporación completo de Calendly.
Para un recorrido visual, mira la Guía de video de Elementor: añadir Calendly con Elementor.
Solución de problemas de desplazamiento en Elementor
Hemos visto que Elementor automáticamente añadirá overflow-y:auto como estilo en línea. La adición de este estilo puede crear un elemento de desplazamiento adicional.
Para corregir esto, asegúrate de que el desbordamiento u overflow-y esté configurado para estar oculto. Por ejemplo:
</style>
.calendly-inline-widget { overflow-y: hidden ! importante; }
</style>