Widgets de reserva

Cree e integre widgets de reserva desde el creador de widgets de su espacio de trabajo — configuración, vista previa y solución de problemas.

Los widgets de reserva permiten a los clientes reservar servicios en su sitio web sin visitar el portal del cliente completo.

Cada espacio de trabajo de ServEase tiene su propio Creador de widgets:

{workspace-id}.widgets.servease.io

Reemplace {workspace-id} con el identificador de su inquilino. Inicie sesión con sus credenciales de administrador y cree y configure tantos widgets como necesite — cada uno con su propio código de integración.

Configuración → Widget del portal del cliente en el panel de administración refleja la misma configuración para vista previa y guardado. Para integraciones diarias en sitios web, la mayoría de los equipos usan el creador de widgets independiente en {workspace-id}.widgets.servease.io. Consulte Widget del portal del cliente.

Al crear o editar un widget, elija un tipo en la sección Widget:

Tipo	Ideal para
Calendar	Cuadrícula de mes, semana o quincena — explorar disponibilidad a lo largo del tiempo
Timetable	Columnas de horario diario — vista franja por franja
List	Lista o cuadrícula desplazable de servicios o franjas reservables
Map	Vista basada en ubicación — útil cuando importan la distancia y la geografía

Cada tipo tiene sus propias opciones (vista predeterminada, formato de hora, diseño, configuración del mapa, etc.) descritas a continuación.

Cinco secciones de configuración

La barra lateral del creador de widgets tiene cinco secciones principales. Los cambios se aplican al widget que está editando; cree varios widgets para distintas páginas o audiencias.

Settings

Language — configuración regional predeterminada para visitantes (por ejemplo inglés, polaco, alemán).
API base URL — resuelta para el entorno de su inquilino (solo lectura).
Preview data source — Live data (servicios y franjas reales) o Demo data cuando su catálogo aún está vacío o desea una vista previa segura sin suficientes servicios publicados.

Comportamiento principal y flujo de reserva:

Widget type — Calendar, Timetable, List o Map (véase arriba).
Enable service overview pages — permite a los clientes abrir una vista general del servicio con estilo antes de reservar (consulte Páginas de vista general del servicio).
Overview template — cuando la vista general está habilitada, elija un estilo de diseño (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro, etc.).

Opciones específicas del tipo (cuando corresponda):

Tipo	Ejemplos
Calendar	Vista predeterminada (semana / quincena / mes), presentación de servicios vs franjas horarias, semana comienza el lunes o domingo, formato de hora (12h / 24h), columnas de franja (hora de inicio, nombre, opción, equipo, empleados, precio, ubicación — texto o iconos)
Timetable	Formato de hora, resaltar franjas disponibles
List	Diseño: cuadrícula o lista
Map	Clave de API de Google Maps opcional, unidad de distancia (km / mi)

Filters

Predefina lo que muestra el widget para que los visitantes vean un catálogo enfocado en lugar de todo a la vez:

Services, teams, search term
Start / end date (con presets como hoy, próxima semana, próximo mes)
Min / max price, distance (en widgets de mapa)

Use filtros al integrar un widget en una landing de campaña («Reservar solo yoga») o en un sitio específico de una ubicación.

Display

Mostrar u ocultar elementos de interfaz alrededor de la experiencia de reserva:

Toggle	Efecto
Filters bar	Controles de filtro predefinidos visibles para visitantes
Search / date / price / distance	Controles de filtro individuales (cuando la barra de filtros está activa)
Calendar view switcher	Solo tipo Calendar — controles de semana / mes
List layout switcher	Solo tipo List — alternar cuadrícula vs lista
Widget top bar	Encabezado dentro del marco del widget
Outer frame	Borde/marco alrededor del widget

Theme

Diseño visual independiente de la Frontend theme key del portal del cliente:

Colour presets — paletas integradas (claro predeterminado, oscuro, ocean, forest y otras).
Custom colours — primario, secundario, superficies, bordes y tokens relacionados.
Typography — familia tipográfica y tamaño (small / medium / large).
Layout — radio de borde, densidad de espaciado, margen exterior.

Vista previa antes de integrar

Use el panel de vista previa en pantallas grandes para revisar el widget antes de publicarlo:

Desktop — ancho completo
Tablet — ancho de tableta restringido
Mobile — ancho de teléfono

Actualice o abra en una pestaña nueva para probar con datos en vivo o demo. Confirme filtros, columnas de franja y tema en pantallas pequeñas — la mayor parte del tráfico de integración es móvil.

Integrar en su sitio web

Cuando la configuración esté lista, haga clic en el botón verde Embed.

El diálogo Copy into your site proporciona:

Un fragmento iframe (data-servease-widget="true") que apunta a la URL de su widget.
El script embed-loader.js — redimensiona el iframe y gestiona la ventana del modal en la página host.

Pegue tanto el iframe como el script del cargador donde deba aparecer el widget. Use Copy embed code para copiar el fragmento completo.

Un enlace Troubleshooting abre soluciones habituales (también resumidas abajo).

Solución de problemas de integraciones

Comprobaciones rápidas

Confirme que el iframe tiene data-servease-widget="true".
Confirme que embed-loader.js se carga (visible en la pestaña Network del navegador).
Confirme que window.ServeaseEmbedLoader existe en la consola del navegador.
Tras correcciones en el host, pegue el fragmento más reciente del creador de widgets.

Regla más importante

No confíe en etiquetas script dentro de dangerouslySetInnerHTML. Trate el iframe del widget como un componente real en React, Next.js o su CMS — no como HTML sin procesar.

Problemas habituales

Problema	Qué probar
El widget se corta	Falta la parte inferior en la primera carga o en móvil — use el fragmento del cargador más reciente; confirme que `embed-loader.js` se ejecuta; en React/Next, renderice un `<iframe />` real, no HTML inyectado
Actualizar lo corrige	Incorrecto en la primera visita, correcto tras recargar — el cargador se omitió durante la navegación del lado del cliente; cargue `embed-loader.js` programáticamente al montar
El cargador no se ejecuta	Script ausente o `ServeaseEmbedLoader` indefinido — reemplace con un fragmento nuevo; asegúrese de que la página host no elimine etiquetas script
Modal oculto por el chrome de la página	Modal de reserva bajo encabezado fijo — mantenga el cargador actual para mensajes de viewport; añada espacio vertical alrededor del iframe
React / Next / CMS	Inconsistente en bloques HTML — extraiga el `src` del iframe, renderice `<iframe />` en JSX, cargue el cargador con `document.createElement('script')`, llame a `ServeaseEmbedLoader.refresh()` al montar

Los widgets requieren servicios publicados con horarios válidos. Un widget vacío suele significar que no hay franjas reservables, filtros que excluyen todo o modo demo mientras los servicios siguen en borrador.

Páginas de vista general del servicio

Las páginas de vista general del servicio son landing pages opcionales de un solo servicio en su host de widgets — útiles para detalle de marketing, publicaciones en redes y enlaces de «reservar este tratamiento».

Habilítelas en la sección Widget del creador de widgets (Enable service overview + plantilla predeterminada). Los clientes pueden abrir Overview desde el modal de reserva, o puede generar enlaces desde Service detail → Generate page.

Cada página de vista general activa incluye Link share — los visitantes copian un enlace corto (https://{workspace-id}.api.servease.io/o/{code}) que redirige a la página completa en {workspace-id}.widgets.servease.io.

Consulte Páginas de vista general del servicio para plantillas, Generate page, link share y estructura de enlaces cortos.