Cómo añadir un sistema de reservas a un sitio de servicios en Webflow con Elfsight

Para un negocio de servicios, el formulario de reserva es, en esencia, el proceso de pago. Todo lo anterior (la página de precios, los testimonios, la respuesta a cuánto cuesta) existe solo para lograr que alguien elija una hora. Si ese paso requiere un intercambio de correos, es posible que algunos clientes que estaban listos para reservar simplemente se echen atrás.

El widget de reservas de Elfsight cierra esa brecha sin necesidad de backend, lo cual es una solución ideal para un fontanero, una clínica o una consultoría. Además, su modelo de facturación penaliza el método de instalación más obvio.

En esta guía, cubrimos la configuración y la decisión de ubicación, que resulta ser una decisión de facturación disfrazada de diseño.

¿Qué necesitas para añadir las reservas de Elfsight a Webflow?

Necesitas una cuenta de Elfsight, un sitio en Webflow con un plan que permita código personalizado y una lista clara de lo que vendes por franjas horarias. Esto último no es un mero trámite.

Aquí tienes la lista completa antes de empezar:

• Una cuenta de Elfsight, en un plan de pago si el widget será visto por más de un par de cientos de personas al mes

• Un sitio en Webflow con un plan que permita código personalizado, ya que el widget se instala mediante un elemento de incrustación de código (Code Embed)

• Una cuenta de Google si quieres sincronización bidireccional con el calendario, lo cual evita las reservas duplicadas

• Tus servicios definidos con duraciones realistas, incluyendo cualquier margen de tiempo que necesites entre citas

Necesitas un plan de pago de Webflow porque las incrustaciones personalizadas no están disponibles en los planes gratuitos.

¿Cuánto cuestan las reservas de Elfsight en un sitio de Webflow?

Elfsight cobra según las visualizaciones del widget y no por las reservas realizadas, por lo que lo importante es cuánta gente ve el widget, no cuánta lo usa. Ese simple hecho debería determinar dónde lo colocas.

Esto es lo que incluye cada nivel, según los precios de Elfsight:

Doscientas vistas en el plan gratuito dan para poco. No es un nivel para pequeñas empresas, sino una cuota de prueba: un widget de reservas en la página de inicio de un sitio de servicios con algo de tráfico puede agotarlas en un par de días, y el widget deja de mostrarse en lugar de degradarse con elegancia.

La columna de widgets indica cuántos puedes crear, no cuántas cuotas recibes.

Ahora que ya lo tenemos claro, pasemos a la configuración.

5 pasos para añadir un sistema de reservas a un sitio de servicios en Webflow

La estructura consiste en una lista de servicios, un widget configurado, una conexión de calendario, un código incrustado y la decisión de dónde colocarlo. Solo un paso es técnico.

El orden importa porque la configuración del widget es mucho más fácil cuando ya sabes qué es lo que vendes.

1. Anota tus servicios y sus duraciones reales

Haz esto antes de abrir el editor. Elfsight admite intervalos de 15, 30, 45 o 60 minutos, sesiones más largas como de 90 minutos y duraciones totalmente personalizadas por servicio, así que la herramienta se adaptará a casi cualquier cosa que decidas. El límite es la honestidad, no el software.

La cifra correcta debe incluir todo lo que no sea la cita en sí: desplazamientos, preparación, notas y la llamada telefónica posterior.

Una consulta de sesenta minutos que en realidad lleva noventa produce un calendario que parece disponible y una semana que no funciona. El fallo se manifiesta como impuntualidad en lugar de como un error de programación.

Ten en cuenta también que un visitante reserva un servicio por cita, por lo que un cliente que quiera dos cosas deberá reservar dos veces. Si tu trabajo suele combinarse, crea la combinación como un servicio propio con su propia duración en lugar de esperar que la gente reserve espacios consecutivos.

Terminarás este paso con una lista escrita que podrías entregar a alguien que cubra tu agenda.

2. Crea y configura el widget

En el editor de Elfsight, elige un diseño de reserva, añade los servicios del paso 1, establece tu disponibilidad y dale estilo para que combine con tu sitio. Todo esto es configuración, no código, y los controles de estilo cubren el diseño, los colores, las fuentes y el tamaño.

Dedica tiempo a la disponibilidad más que a la apariencia. La semana laboral predeterminada rara vez es la semana laboral real de alguien, y un widget que ofrece espacios que no puedes cumplir es peor que uno que ofrece menos, porque cada reserva rechazada es un cliente que ya habías convencido y que luego perdiste.

Configura los correos electrónicos de notificación mientras estás aquí. Elfsight envía confirmaciones y recordatorios tanto al cliente como a la empresa, y los recordatorios son la forma más barata de reducir las ausencias en un negocio de servicios.

Terminarás este paso con un widget a través del cual estarías dispuesto a aceptar una reserva real.

3. Conecta Google Calendar para la sincronización bidireccional

Elfsight ofrece sincronización bidireccional con Google Calendar, lo que bloquea los espacios reservados en tiempo real y escribe las citas confirmadas en tu calendario.

Sé preciso sobre lo que Elfsight documenta aquí, porque es más limitado de lo que sugiere la frase. Lo que se describe son las reservas realizadas a través del widget: esos espacios se bloquean en tiempo real y la cita confirmada se escribe en tu calendario. Eso cierra la brecha entre dos clientes que reservan el mismo espacio con minutos de diferencia.

Elfsight no documenta la otra dirección: que una cita que creaste tú mismo en Google Calendar sea leída y retirada de la disponibilidad del widget. No lo des por sentado.

Pruébalo antes de confiar en ello, porque si no funciona, tus propios compromisos seguirán apareciendo como disponibles y el widget venderá alegremente un espacio en el que ya estás ocupado.

El flujo es Ajustes, luego Google Calendar en Integraciones, después elegir una cuenta, conceder permisos y seleccionar qué calendario sincronizar. Elige el que usas realmente en lugar de un calendario de trabajo vacío.

Termina este paso haciendo una reserva de prueba y confirmando que aparece en Google Calendar; luego añade un evento tú mismo y comprueba si ese espacio desaparece del widget, lo que te indicará en qué dirección puedes confiar.

4. Inserta el widget en Webflow

Elfsight genera un fragmento de código tras la configuración. En el Diseñador, añade un elemento "Code Embed" desde el panel "Add" en la sección "Advanced", suéltalo donde quieras que aparezca el formulario de reserva y pega el fragmento.

El fragmento consiste en una etiqueta de script y un div que contiene el ID de tu widget:

<!-- A Code Embed element on the booking page -->
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div
  class="elfsight-app-YOUR-WIDGET-ID"
  data-elfsight-app-lazy
></div>

También puedes insertar widgets de Elfsight dentro de plantillas de colección del CMS; así es como un formulario de reserva aparece en cada página de servicio sin tener que crearlo de nuevo para cada una. Ten en cuenta cómo afecta esto a tu recuento de visualizaciones: un widget en una plantilla de colección se renderiza en cada página de elemento, por lo que una colección grande multiplica las visualizaciones igual que lo haría un botón flotante.

Publica el sitio antes de comprobarlo, ya que el código personalizado solo surte efecto al publicar y no dentro del Diseñador.

Al terminar este paso, tendrás un formulario de reserva funcionando en una página activa.

5. Elige la ubicación con cabeza

Ahora decide dónde colocar el widget, teniendo en cuenta que la ubicación influye tanto en la conversión como en el coste.

Una página de reserva dedicada es la opción más económica y suele convertir bien, porque quienes llegan allí ya han tomado una decisión. Un widget en la página de precios o servicios aprovecha el momento de intención, pero consume más visualizaciones.

Un botón flotante en todas las páginas es lo más visible, pero también lo más caro con diferencia, ya que cuenta una visualización por cada página de cada sesión.

El punto medio razonable para la mayoría de los negocios de servicios es una página de reserva junto con un enlace destacado en las páginas donde los usuarios toman la decisión; esto logra la mayor parte del beneficio de conversión por una fracción del coste en visualizaciones.

Si realmente quieres el botón flotante, compara primero el plan con tus visualizaciones mensuales reales en lugar de asumir que el recuento de visualizaciones del widget se parece al de tus reservas. Elfsight ofrece planes Enterprise por encima del Premium precisamente para estos casos, así que el tráfico alto no es un muro, solo una cifra más alta de lo que la mayoría de los negocios de servicios esperan.

Al terminar este paso, tendrás una ubicación que puedes justificar por ambos motivos.

¿Por qué fallan los widgets de reserva de Elfsight en Webflow?

Los widgets de reserva fallan silenciosamente para el visitante, lo cual sale caro: un formulario que no se carga hace perder clientes que nunca se quejan. No aparece ningún error y la página parece estar intacta.

Cuatro causas cubren casi todos los casos, y las dos primeras son las que merece la pena revisar periódicamente en lugar de reaccionar cuando ya es tarde.

El widget no aparece en el sitio publicado

Causa: Normalmente se debe a que el plan del sitio no permite código personalizado o a que el sitio no se ha publicado desde que se añadió el elemento. Webflow aplica el código personalizado al publicar y no en el Diseñador, por lo que un widget puede parecer ausente incluso cuando está perfectamente configurado.

Solución: Publica y comprueba la URL en vivo. El modo de vista previa renderiza los efectos del código personalizado, por lo que si un widget falta en ambos, el problema es distinto a uno que se ve en la vista previa pero desaparece en el dominio real.

Si sigue sin aparecer, confirma que el plan del sitio permite código personalizado y abre la consola del navegador: una solicitud de script bloqueada o fallida te indicará que el problema es la entrega y no el marcado. Prueba también desactivando los bloqueadores de contenido, ya que los scripts de widgets de terceros suelen ser un objetivo común y un formulario de reserva bloqueado es invisible tanto para ti como para una parte de tus visitantes.

El widget deja de mostrarse a mitad de mes

Causa: Se ha agotado el límite de visualizaciones. Este fallo se debe directamente a la ubicación: un widget en todo el sitio consume visualizaciones según el tráfico total, no solo según el tráfico de tu página de reservas.

Solución: Compara el recuento de visualizaciones en tu cuenta de Elfsight con los límites de tu plan; luego, retira el widget de las páginas donde solo está presente pero no es útil, o cambia a un plan superior.

Si el widget desaparece a mitad de mes, tómalo como una señal sobre su ubicación y no solo como un problema de facturación, ya que el plan que necesitas depende de dónde esté colocado el widget, no de cuánto trabajo tengas.

Esto no debería pillarte por sorpresa. Elfsight envía avisos por correo electrónico antes de la desactivación, muestra una previsión de visualizaciones que te alerta cuando vas camino de agotarlas antes de tiempo y despliega un mensaje en el lugar del widget que solo tú, como propietario, puedes ver.

Los visitantes simplemente no ven nada, por eso vale la pena revisar la previsión en lugar de esperar a que alguien te avise de que el widget ha desaparecido.

Un detalle de configuración ahorra una cantidad sorprendente de visualizaciones: mantén la sesión iniciada en Elfsight en el navegador donde construyes el sitio, ya que así evitarás que tus propias cargas de página cuenten mientras trabajas.

Dos clientes reservan el mismo hueco

Causa: La sincronización del calendario es unidireccional o nunca se conectó, por lo que el widget solo conoce las reservas que él mismo gestionó. Cualquier cosa añadida directamente a tu calendario sigue estando disponible para que un cliente la reserve.

Solución: Activa la sincronización bidireccional y confirma que lee y escribe creando un evento en Google Calendar y comprobando que el hueco desaparece del widget. Haz esta prueba en lugar de confiar en el estado de la conexión, ya que un calendario conectado y un calendario que se está leyendo no son lo mismo.

Luego, asegúrate de que el calendario conectado incluya tus compromisos reales, no solo un calendario de trabajo ordenado que omite la mitad de lo que realmente ocupa tu semana. La mayoría de las reservas dobles que llegan a este punto resultan ser una sincronización que funciona perfectamente sobre una imagen incompleta de tu tiempo.

Los clientes reservan horas en las que no puedes trabajar

Causa: Disponibilidad configurada con demasiado optimismo o duraciones que excluyen el tiempo de desplazamiento, preparación y cierre. El widget cumple lo que le has dicho, y lo que la mayoría de la gente le dice es su semana ideal, no la real.

Solución: Ajusta las duraciones para incluir todo lo que realmente consume la cita y añade márgenes entre huecos en lugar de confiar en que siempre irás a tiempo.

Si las reservas llegan a los extremos de tu jornada, reduce la ventana de disponibilidad en lugar de rechazarlas individualmente, ya que cada rechazo te cuesta un cliente que ya habías ganado y es más perjudicial de lo que valía ese hueco.

Vale la pena revisarlo después del primer mes de mucho trabajo, porque las duraciones que parecían correctas sobre el papel rara vez son las que el trabajo realmente necesita.

Qué puedes construir a continuación con Elfsight y Webflow

Una vez que las reservas llegan de forma fiable, las siguientes mejoras suelen centrarse en lo que ocurre alrededor de la cita: prepagos o depósitos para reducir las ausencias, un formulario de admisión para llegar preparado, o widgets de reserva en páginas de servicios individuales gestionados desde una colección CMS.

Si quieres que la confirmación haga algo más que llegar a una bandeja de entrada, nuestra guía de notificaciones de clientes potenciales cubre cómo dirigir un envío a un canal que tu equipo realmente vigile. Para conocer los detalles de la conexión y lo que cubren los widgets, consulta la integración de Webflow y Elfsight.