Widget Builder
En el Widget Builder, montas visualmente lo que debe aparecer en tu pagina web.
Crear una integracion
Cuando creas una nueva integracion, primero se abre un modal con plantillas:
| Plantilla | Descripcion |
|---|---|
| Horario de clases | Encabezado con vista semanal |
| Completa | Horario de clases, paquetes y entrenadores en diseno de 2 columnas |
| Solo paquetes | Paquetes de creditos en primer plano |
| Enfoque en entrenadores | Presentacion del equipo con cuadricula |
| Vista rapida | Lista compacta de proximas clases |
| Vacia | Empieza desde cero y construye todo tu mismo |
Dale a tu integracion un nombre (p. ej. "Pagina de inicio", "Pagina de clases"), elige una plantilla y haz clic en "Crear". La plantilla sirve como punto de partida - puedes personalizar todo libremente en el builder despues.
Diseno
El builder tiene tres areas:
| Area | Posicion | Funcion |
|---|---|---|
| Catalogo de widgets | Izquierda | Todos los widgets disponibles para anadir |
| Lienzo | Centro | Tu integracion - vista previa en vivo |
| Configuracion | Derecha | Configuracion del widget seleccionado |
Filas y columnas
Los widgets se organizan en filas. Cada fila puede tener un diseno de columnas especifico:
| Diseno | Descripcion |
|---|---|
| 1 columna | Ancho completo (100%) |
| 2 columnas (50/50) | Dos columnas de igual ancho |
| 2 columnas (33/66) | Columna izquierda estrecha, derecha ancha |
| 2 columnas (66/33) | Columna izquierda ancha, derecha estrecha |
| 3 columnas (33/33/33) | Tres columnas de igual ancho |
Crear un diseno
- Haz clic en "Anadir fila" en el lienzo
- Selecciona el diseno de columnas deseado
- Arrastra widgets a las columnas individuales
En dispositivos moviles, todos los disenos de columnas se muestran automaticamente apilados verticalmente.
Anadir widgets
Mediante arrastrar y soltar
- Selecciona un widget en el catalogo (izquierda)
- Arrastralo a una columna en el lienzo
- Sueltalo en la posicion deseada
Cambiar el orden
Arrastra los widgets hacia arriba o hacia abajo dentro de una columna para cambiar el orden.
Eliminar un widget
Selecciona el widget y haz clic en el icono de eliminar (papelera).
Widgets disponibles
Widgets principales
Horario de clases
Horario interactivo con todas las citas de tu estudio.
| Ajuste | Opciones |
|---|---|
| Vista | Semana, lista, mosaicos o agrupado por entrenador |
| Mostrar filtros | Si / No - muestra filtros de categoria y entrenador |
| Semanas adelante | 1 a 8 - cuantas semanas se muestran |
| Mosaicos por fila | 2, 3 o 4 (solo vista de mosaicos) |
| Boton de reserva | Si / No |
| Filtro de categoria | Opcionalmente mostrar solo categorias especificas |
| Filtro de entrenador | Opcionalmente mostrar solo entrenadores especificos |
Cuando un visitante hace clic en una clase, se abre un modal de detalles con descripcion, informacion del entrenador, horario, capacidad y mas. Desde ahi, el visitante puede reservar la clase en la plataforma Bookicorn (se abre en una nueva pestana).
Paquetes de creditos
Muestra todos los paquetes de creditos con precios, creditos y caracteristicas. A traves del boton "Comprar ahora", el visitante es llevado a la plataforma Bookicorn para comprar el paquete.
| Ajuste | Opciones |
|---|---|
| Diseno | Cuadricula, lista o carrusel |
| Max. paquetes | 1 a 12 |
| Ordenar | Popularidad, precio o creditos |
| Insignia "Popular" | Si / No - marca paquetes populares |
Resumen de entrenadores
Muestra tu equipo con fotos de perfil, biografia y especializaciones.
| Ajuste | Opciones |
|---|---|
| Diseno | Cuadricula, lista o carrusel |
| Max. entrenadores | 1 a 20 |
| Mostrar biografia | Si / No |
| Especializaciones | Si / No |
Cuando un visitante hace clic en un entrenador, se abre un modal de perfil con biografia, especializaciones, enlaces de redes sociales y proximas clases.
Widgets avanzados
Proximas clases
Lista compacta de las proximas citas de clases.
| Ajuste | Opciones |
|---|---|
| Cantidad | 1 a 20 |
| Mostrar entrenador | Si / No |
| Filtro de categoria | Opcionalmente solo categorias especificas |
Reserva rapida
Destaca una sola clase - con fecha, capacidad y boton "Reservar ahora". Ideal para promocionar una oferta especifica.
| Ajuste | Opciones |
|---|---|
| Clase | Desplegable para seleccionar la clase |
| Texto del boton | Libremente personalizable (predeterminado: "Reservar ahora") |
Categorias
Categorias de clases filtrables para explorar.
| Ajuste | Opciones |
|---|---|
| Estilo | Pills (botones) o tarjetas |
| Mostrar cantidad | Si / No - muestra el numero de clases por categoria |
Entrenador destacado
Un solo entrenador en primer plano - perfecto para presentar a un coach.
| Ajuste | Opciones |
|---|---|
| Entrenador | Desplegable para seleccionar |
| Mostrar clases | Si / No |
| Max. clases | Numero de proximas clases |
Marketing
Resenas
Resenas de clientes de tu estudio.
| Ajuste | Opciones |
|---|---|
| Cantidad | 1 a 20 |
| Valoracion minima | 1 a 5 estrellas |
| Estilo | Tarjetas o carrusel |
| Permitir resenas | Si / No - muestra el boton "Escribir una resena" |
Widgets para miembros
Estos widgets estan destinados a miembros conectados.
Boton de inicio de sesion
Boton para iniciar sesion en Bookicorn.
| Ajuste | Opciones |
|---|---|
| Texto del boton | Libremente personalizable |
| Redireccion | URL despues del inicio de sesion (opcional) |
Estado de creditos
Muestra al miembro conectado su saldo actual de creditos.
| Ajuste | Opciones |
|---|---|
| Estilo | Compacto o detallado |
Mis reservas
Lista de las proximas reservas del miembro.
| Ajuste | Opciones |
|---|---|
| Cantidad | Reservas mostradas |
| Mostrar pasadas | Si / No |
Ubicacion
Mapa de ubicacion
Mapa con la ubicacion de tu estudio.
| Ajuste | Opciones |
|---|---|
| Altura | En pixeles |
| Zoom | Nivel de zoom del mapa |
| Mostrar indicaciones | Si / No |
Widgets de diseno
Los widgets de diseno te ayudan a estructurar tu integracion.
Encabezado
| Ajuste | Opciones |
|---|---|
| Texto | Libremente personalizable |
| Tamano | H1, H2, H3 o H4 |
| Alineacion | Izquierda, centro o derecha |
Bloque de texto
| Ajuste | Opciones |
|---|---|
| Contenido | Texto libre (HTML) |
| Alineacion | Izquierda, centro o derecha |
Espaciador
| Ajuste | Opciones |
|---|---|
| Altura | 8 a 200 pixeles |
Separador
| Ajuste | Opciones |
|---|---|
| Estilo | Solido, discontinuo o punteado |
| Color | Color personalizado opcional |
Guardar y vista previa
Guardar
Haz clic en "Guardar" en la esquina superior derecha. Los cambios estan inmediatamente activos - la version actualizada aparece en tu pagina web.
Si hay cambios sin guardar, se te advertira al salir del builder.
Vista previa
Haz clic en "Vista previa" para ver la integracion en una nueva pestana a tamano completo. La vista previa muestra datos reales en vivo de tu estudio.
Consejos
Configuracion recomendada para la pagina de inicio
- Encabezado ("Nuestras clases")
- Proximas clases (3-5)
- Espaciador
- Encabezado ("Paquetes de creditos")
- Paquetes de creditos
- Espaciador
- Encabezado ("Nuestro equipo")
- Resumen de entrenadores
Para una pagina de horario de clases
- Horario de clases (vista semanal, filtros activos)
Para una pagina de precios
- Encabezado ("Nuestros paquetes")
- Paquetes de creditos (diseno en cuadricula)
- Espaciador
- Resenas (carrusel)
Consejo de rendimiento
Menos es mas. Un widget con horario de clases y paquetes carga mas rapido que diez widgets diferentes en una pagina. Usa integraciones separadas para diferentes paginas de tu web.
Preguntas frecuentes
¿Puedo usar un widget mas de una vez?
Dentro de una integracion, cada tipo de widget solo puede aparecer una vez. Crea integraciones separadas para diferentes paginas.
¿Por que no veo datos en el builder?
Asegurate de que has creado clases, paquetes o entrenadores en tu estudio. El builder muestra datos en vivo.
¿Que pasa cuando cambio el orden?
Despues de guardar, el nuevo orden es inmediatamente visible en tu pagina web.
Responsivo - ¿como se ve en movil?
Todos los widgets son completamente responsivos. Los disenos multicolumna se apilan automaticamente en vertical en pantallas pequenas. Puedes usar la funcion de vista previa para probar diferentes tamanos de pantalla.