Lueira incluye desde el admin un modal "Código de inserción" que te genera automáticamente el shortcode de WordPress y el código iFrame de cada producto. Ya no necesitas construir las URLs ni los códigos a mano: solo abres el modal, copias y pegas.
En este manual te enseñaremos a integrar tus productos de Lueira directamente en tu web WordPress. Te mostraremos 3 formas diferentes de hacerlo, para que elijas la que mejor se adapte a tu sitio web.
Genera el código desde el admin
El modal funciona para cualquier producto que tengas activable en la tienda online:
Clases grupales
Clases privadas
Packs de clases grupales
Productos de alquiler
Packs de alquiler (bundles)
⚠️ Requisito: la opción "Código de inserción" solo aparece si tu centro tiene la tienda online activada. Si no la ves, comprueba en Ajustes que la tienda online esté habilitada.
Pasos:
Abre la ficha del producto en el admin (Actividades, Packs o Alquiler > tu producto).
En la cabecera de la ficha, junto al icono del lápiz, pulsa el menú de los tres puntos (⋮). En los packs de clases grupales también hay un icono dedicado
</>que abre el modal directamente.
Elige "Código de inserción".
WordPress: te da el enlace para descargar el plugin y el shortcode listo para copiar.
iFrame: te da el código iframe ya generado, con controles para ajustar el ancho, el alto y un interruptor para mostrar u ocultar los detalles del producto.
⚡ Tip: cada producto tiene su propio modal, así que el código que copias ya viene con el ID y el tipo de producto correctos.
¿Para qué sirve?
Esta funcionalidad es útil cuando:
Quieres mostrar tu calendario de reservas en tu web WordPress
Prefieres no redirigir a tus clientes a otra plataforma
Necesitas integrar tus productos de forma personalizada
Tienes varios productos y quieres mostrarlos todos en tu sitio
Entiende la estructura (opcional)
Aunque el modal te genera el código automáticamente, te ayudará entender de dónde sale. Cada producto de Lueira tiene una URL como esta:
Cada parte de esta URL tiene un significado:
Parte | De tu URL | Significado |
tutienda.lueira.com | Tu dominio | Es siempre igual para todos tus productos |
school / rent | Módulo | "school" para clases y packs de clases, "rent" para alquileres y packs de alquiler |
group / private / group-package / bundle | Tipo de producto | Cambia según el tipo de producto (los productos de alquiler individuales no llevan este segmento) |
abc123xyz | ID del producto | ESTO cambia para cada producto |
⚡ Lo importante: el módulo, el tipo de producto y el ID cambian según el producto. El modal los rellena por ti, pero si quieres construir el código a mano, son los tres datos que tienes que adaptar.
OPCIÓN 1: Un botón que abre el producto
La más sencilla. Tu visitante ve un botón y cuando lo clica, se abre tu calendario de reservas en un pop-up.
Paso 1: Instala el plugin
Desde el modal "Código de inserción" > pestaña WordPress, pulsa "Descargar plugin". El botón te lleva al plugin oficial de Lueira en wordpress.org.
Alternativa: en tu WordPress, ve a Plugins > Añadir nuevo, busca Lueira Embed, instálalo y actívalo.
Paso 2: Configura el plugin
Ve a Ajustes > Lueira Embed
Comprueba que el dominio sea correcto (tu dominio de Lueira)
Paso 3: Copia el shortcode
Vuelve al modal "Código de inserción" > pestaña WordPress y pulsa "Copiar" en el campo "Shortcode de WordPress". El modal genera el shortcode adaptado al tipo de producto. Estas son las formas según el tipo:
Tipo de producto | Shortcode generado |
Clase grupal | [lueira id="abc123xyz" module="school" product_type="group"] |
Clase privada | [lueira id="abc123xyz" module="school" product_type="private"] |
Pack de clases grupales | [lueira id="abc123xyz" module="school" product_type="group-package"] |
Producto de alquiler | [lueira id="abc123xyz" module="rent"] |
Pack de alquiler (bundle) | [lueira id="abc123xyz" module="rent" product_type="bundle"] |
⚡ No te tienes que aprender estas variantes: cada modal te da directamente el shortcode correcto para ese producto.
Paso 4: Pégalo en tu página
Edita la página donde quieras el botón
Añade un bloque Shortcode
Copia y pega el código completo
OPCIÓN 2: El producto completo integrado
Muestra todo: la foto del producto, la descripción completa y el calendario de reservas, todo en una sola página sin pop-ups.
Paso 1: Copia el código iFrame desde el admin
Abre el modal "Código de inserción" > pestaña iFrame. El código ya viene generado con la URL /embed/... correcta para tu producto. Por ejemplo, para una clase grupal:
<iframe src="https://tutienda.lueira.com/embed/school/group/abc123xyz" width="100%" height="800" frameborder="0" allowfullscreen></iframe>
El segmento /embed/{módulo}/{tipo}/{id} se adapta automáticamente según el producto (por ejemplo, /embed/rent/bundle/... para un pack de alquiler, /embed/school/private/... para una clase privada, etc.).
Pulsa "Copiar".
Paso 2 (opcional): Ajusta tamaño y contenido
Dentro de la pestaña iFrame puedes modificar antes de copiar:
Control | Qué hace |
Ancho | El ancho del iframe en tu página (por defecto 100%) |
Alto (px) | La altura en píxeles (por defecto 800). Súbela si el contenido se corta. |
Mostrar detalles del producto | Si lo apagas, se oculta la foto y la descripción y solo se ve el calendario (ver OPCIÓN 3) |
El código y la vista previa se actualizan en tiempo real conforme cambias estos valores.
Paso 3: Pégalo en tu página
Edita la página
Añade un bloque HTML
Copia y pega el código completo
OPCIÓN 3: Solo el calendario
Perfecto si quieres que tu visitante vea solo las fechas disponibles sin la descripción del producto.
En la pestaña iFrame del modal "Código de inserción", desactiva el interruptor "Mostrar detalles del producto". El modal añadirá automáticamente al final de la URL el parámetro ?showProductDetails=false:
<iframe src="https://tutienda.lueira.com/embed/school/group/abc123xyz?showProductDetails=false" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Pulsa "Copiar" y pégalo en un bloque HTML de tu página, como en la OPCIÓN 2.
Elige según lo que quieras:
OPCIÓN 1 si tu página ya explica bien el producto y solo necesitas un botón para que reserven
OPCIÓN 2 si quieres que todo sea visible en una sola página (la recomendación de Lueira)
OPCIÓN 3 si tu web ya tiene buenas fotos y descripción, y solo necesitas que vean disponibilidad
¿Y si tengo varios productos?
Fácil. Repite el proceso para cada producto: abre su modal "Código de inserción" y copia el shortcode o el iframe correspondientes. Cada modal genera el código con el ID, el módulo y el tipo de producto correctos, así que no tienes que tocar nada a mano.
¿Necesitas más control?
💡 Si quieres ir más allá del modal (personalizar el texto del botón, aplicar clases CSS, conocer los parámetros opcionales del shortcode o consultar los detalles técnicos del plugin Lueira Embed), echa un vistazo a la guía técnica: