En este vídeo tutorial premium te enseñaremos a crear un sistema de reservas para tus citas o consultorías con la versión gratuita de calendly e integrarlas con WordPress. Este es un tutorial pedido por uno de nuestros suscriptores premium, así que manos a la obra.

Objetivo de tutorial:

Este es un tutorial pedido por uno de nuestros alumnos, donde quería crear un sistema de reservas gratuito, sin necesidad de que el usuario tuviera que pagar para hacer la reserva.

Es cierto que con WordPress hay decenas de plugins gratuitos que te permiten crear un sistema de reservas, pero vi oportuno explicar un sistema de reservas que a mi me gusta mucho, y además, que tiene una versión gratuita: Calendly, esta poderosa herramienta nos permite crear diferentes tipos de «eventos» (reservas) y configurar la disponibilidad de nuestro horario de manera muy intuitiva y fácil.

Además, se puede integrar con nuestros calendarios de Google o Microsoft 365, de manera que se sincronice nuestra disponibilidad de tiempo con las reuniones que ya hayamos programado en dichos calendarios.

Al final te mostramos cómo integrar este calendario en una página propia de tu sitio web hecho con WordPress y Divi, de manera que todo quede lo más white label posible.

Si quieres ver más tutoriales premium enfocados en diseño visita nuestra nuestra categoría de «Diseño» en los tutoriales premium.

¿Qué es Calendly y por qué integrarlo con WordPress?

Calendly es la herramienta de agendamiento más usada del mundo: tu cliente entra, ve tu calendario disponible, elige un horario y confirma — sin emails de ida y vuelta. Si tienes un servicio que requiere reuniones (consultorías, clases particulares, agencias, asesorías), integrar Calendly directamente en tu sitio WordPress + Divi multiplica las reservas porque elimina toda la fricción. Si tu negocio es más específico — clínica, barbería, hotel — hay alternativas dedicadas como Amelia Booking para citas médicas, Booknetic para barberías y spas, o Hotel Booking con YITH.

Las ventajas concretas de tener Calendly embebido en lugar de solo un link externo:

• El usuario nunca abandona tu sitio: agenda dentro de tu landing page. Esto mejora la tasa de conversión porque no pierdes visitantes en la transición a otra plataforma.
• Diseño consistente: el widget de Calendly se puede personalizar con tus colores de marca para que se sienta nativo del sitio.
• Sincronización automática con tu calendario: las reservas aparecen directamente en Google Calendar, Outlook o iCloud sin que tengas que hacer nada.
• Métricas claras: Calendly te da estadísticas de cuántas reservas vienen de cada página, lo cual es oro puro para optimización.

Tres formas de integrar Calendly en tu sitio Divi

Calendly ofrece tres modalidades de integración. Cada una sirve para un caso distinto:

1. Inline embed (calendario embebido en la página)

El calendario aparece como una sección más de la página, ocupando espacio fijo. Es la opción más recomendada para landings dedicadas a «Agendar consulta» — el visitante ve el calendario al instante y puede reservar sin clicks adicionales.

2. Popup widget (botón flotante)

Aparece un botón «Agendar reunión» flotante en una esquina de la pantalla. Al hacer click se abre el calendario en un modal. Útil cuando quieres que el visitante explore tu sitio normalmente y tenga el botón siempre disponible.

3. Popup text link / button (link clickeable)

Cualquier link o botón de tu sitio puede abrir el calendario en modal al hacer click. Útil para CTAs específicos en posts del blog, footer, o secciones secundarias.

Mi recomendación: usa inline embed en la landing principal de «Reservar» + popup widget en el resto del sitio para tener un punto de acceso siempre visible.

Pasos clave para integrar Calendly en Divi

1. Crea tu cuenta de Calendly en calendly.com. La versión gratuita te da 1 tipo de evento — suficiente para empezar. Los planes pagos ($10-15/mes) suman tipos múltiples, recordatorios SMS, y branding custom.
2. Configura tu primer evento: nombre (ej. «Consulta de 30 min»), duración, horarios disponibles, conexión con Google Calendar o iCloud. Define las preguntas que quieres hacer al usuario al agendar (nombre, email, descripción del proyecto).
3. Personaliza branding: en el panel de Calendly carga tu logo y define un color principal que coincida con tu marca. El widget heredará esos colores y se sentirá parte de tu sitio.
4. Genera el código de embed. En tu evento → Share → «Add to Website» → elige Inline Embed → copia el snippet de HTML/JavaScript que Calendly genera.
5. Inserta el código en tu página de Divi. Edita la página → añade un módulo «Code» → pega el snippet → guarda. Si prefieres usar Gutenberg, hay un bloque «Custom HTML» que cumple la misma función.
6. Verifica el responsive. El embed de Calendly es responsive por defecto, pero comprueba en mobile que el calendario se vea legible y que el flujo de reserva funcione correctamente.
7. (Opcional) Configura redirect post-reserva. En Calendly puedes configurar que después de confirmar la reunión, el usuario sea redirigido a una página de «Gracias» con mensaje custom y siguientes pasos. Esto mejora la experiencia y permite trackear conversiones.

Tips para que tu calendario convierta

• Limita el horario disponible: si muestras 10 horas disponibles cada día, el visitante ve sobreoferta y no agenda con urgencia. Mostrar 3-4 ventanas concretas suele convertir mejor.
• Pide solo lo esencial en el formulario: nombre + email + 1 pregunta de contexto suelen ser suficientes. Más campos reducen la conversión.
• Usa buffer time: configura 15 min entre reuniones para que no te llamen pegadas. Calendly bloquea automáticamente esos buffers.
• Activa recordatorios automáticos: 24h antes y 1h antes vía email. Esto reduce la tasa de no-shows en un 30-40%.
• Trackea conversiones: integra Calendly con Google Analytics 4 o Meta Pixel para medir cuántas reservas vienen de cada campaña.

Preguntas frecuentes

¿Calendly es gratis?

Tiene plan gratuito que permite 1 tipo de evento, sincronización con un calendario, y embeds en sitios web. Suficiente para freelancers que ofrecen un solo tipo de consulta. Los planes pagos arrancan en $10/mes y desbloquean tipos múltiples, payments integrados (Stripe/PayPal), y branding completo sin marca de Calendly.

¿Hay alternativas a Calendly?

Sí: Cal.com (open source y gratuito), TidyCal (pago único de $30 de por vida), SimplyMeet, Setmore. Calendly es el más popular y tiene la integración más madura, pero si te importa el precio o el control total, las alternativas son válidas.

¿Puedo cobrar por las reuniones agendadas?

Sí, pero solo en planes pagos. Calendly se integra con Stripe y PayPal — el cliente paga al agendar y la reunión queda confirmada solo después del pago. Útil para coaches, consultores y profesionales que cobran por sesión.

¿El embed afecta la velocidad de mi sitio?

Calendly carga su widget vía JavaScript externo (~50 KB). Es relativamente ligero pero puede impactar Core Web Vitals si lo tienes en home. Para optimización, considera usar el popup widget en home y el inline embed solo en la página dedicada de «Reservar». Para más sobre velocidad WP, mira nuestro curso de Optimización.

¿Necesito un plugin de WordPress para integrarlo?

No es estrictamente necesario — Calendly funciona perfectamente con un módulo «Code» de Divi y el snippet HTML que te genera. Existen plugins (como «Calendly: Schedule appointments») que añaden un bloque/shortcode dedicado, pero suman peso innecesario. La forma directa con código es más eficiente.

¿Listo para empezar a recibir reservas online?

Crea tu cuenta gratuita en calendly.com y sigue los pasos del tutorial. Si quieres dominar las técnicas de diseño web profesional para construir landings que conviertan, mira nuestros tutoriales prémium de Diseño con Divi y nuestro curso de Funnels de Venta con WPFunnels. Para sitios turísticos o de servicios con sistema de reservas más complejo, también puedes ver el curso de WP Travel para reservas turísticas.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐