# Cómo insertar tus actividades de Lueira en tu web Wordpress
> Lueira incluye un modal "Código de inserción" en el admin que genera el shortcode de WordPress y el código iFrame de cada actividad. Te enseñamos a integrar tus actividades en tu web WordPress en 3 formas distintas, todas a partir del nuevo modal.
## Cómo insertar tus actividades de Lueira en tu web Wordpress
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:
https://tutienda.lueira.com/school/group/d14k1iq98njc73df3mi0
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:
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`:
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:
👉 [Plugin Lueira Embed: referencia técnica](lueira-guide:fcddf4c7-bb2c-4d74-ba23-f7c8f6b30999?locale=es)
## Enlace de reservas y dominio propio de la tienda
## ¿Y si solo quiero un enlace a mi tienda?
Si no quieres insertar nada en tu web, puedes enlazar directamente a tu tienda online. La dirección la encuentras en **Configuración → Tienda online → General**, en el bloque "Tu tienda online se encuentra disponible en" (botón **Ir a la tienda**). Esa página muestra todo tu catálogo.
💡 El código **iFrame** (OPCIONES 2 y 3) es HTML estándar: también puedes pegarlo en webs que no sean WordPress, siempre que tu editor permita insertar un bloque de código HTML.
## Usar tu propio dominio para la tienda (por ejemplo, reservas.tuweb.com)
En **Configuración → Tienda online → General**, bloque **Dominio personalizado**, puedes indicar el dominio o subdominio que quieres usar para tu tienda en lugar de la dirección de Lueira.
Para que funcione, además hay que crear un registro DNS (de tipo CNAME) en el proveedor donde tienes contratado tu dominio, apuntando a tu tienda de Lueira. Hasta que ese registro esté creado y propagado, la tienda no funcionará en el nuevo dominio.
⚠️ **Antes de cambiarlo, escríbenos a soporte.** Te confirmaremos el valor exacto del registro y el orden de los pasos, y lo revisaremos contigo. Los datos de DNS dependen de cada caso (por ejemplo, los dominios con "ñ" o acentos hay que escribirlos en un formato especial).
Cuando el dominio propio ya funcione, revisa en tu WordPress **Ajustes → Lueira Embed** que la URL configurada sea la de tu tienda (Paso 2 de la OPCIÓN 1), y vuelve a copiar los códigos iFrame desde el modal si los pegaste antes del cambio.
Source: https://help.lueira.com/es/articles/como-insertar-tus-actividades-de-lueira-en-tu-web-wordpress