# Plugin Lueira Embed: referencia técnica

> Referencia técnica del plugin "Lueira Embed" para WordPress: parámetros completos del shortcode, módulo de alquiler, estructura de URLs, personalización CSS, atributos sandbox, requisitos y changelog.

## Plugin Lueira Embed: referencia técnica

Esta guía es la **referencia técnica** del plugin "Lueira Embed" para WordPress. Está pensada para personas con conocimientos de WordPress o HTML que quieran ir más allá del modal "Código de inserción": personalizar el botón, aplicar clases CSS, consultar todos los parámetros del shortcode o entender la estructura de las URLs.
​

👉 Si solo necesitas insertar un producto rápidamente, mejor empieza por la guía visual: [Cómo insertar tus actividades de Lueira en tu web Wordpress](lueira-guide:ff98c105-46ce-4d3a-9d20-68f25d2d9b29?locale=es).
​

## Características del plugin Lueira Embed

- **Integración sencilla:** inserta productos de Lueira mediante un Shortcode sin necesidad de conocimientos técnicos.
- **Diseño adaptable:** el modal se ajusta automáticamente a cualquier dispositivo.
- **Accesible y seguro:** cumple con los estándares ARIA y usa un iframe protegido (*sandboxed*).
- **Personalizable:** permite modificar el texto del botón y aplicar estilos propios.
- **Configuración simple:** incluye opciones de idioma y ajustes desde el panel de WordPress.

## Instalación manual del plugin (sin pasar por el modal)

1. Sube los archivos a la carpeta `/wp-content/plugins/lueira/`
2. Activa el plugin desde el menú **Plugins** en tu panel de WordPress.
3. (Opcional) Accede a **Ajustes > Lueira Embed** para configurar la **URL de tu centro en Lueira**.

## Configuración avanzada del plugin

Accede a **Ajustes > Lueira Embed** en el panel de WordPress para configurar:

- **URL del host:** la dirección base del marketplace de Lueira (por defecto: [https://store.lueira.com](https://store.lueira.com/)).

## Shortcode generado según el tipo de producto

El modal "Código de inserción" del admin genera un shortcode adaptado al tipo de producto. Estas son las formas exactas que produce:

| **Tipo de producto** | **Shortcode generado** | **Embed URL del iframe** |
| --- | --- | --- |
| Clase grupal | `[lueira id="{id}" module="school" product_type="group"]` | `{host}/embed/school/group/{id}` |
| Clase privada | `[lueira id="{id}" module="school" product_type="private"]` | `{host}/embed/school/private/{id}` |
| Pack de clases grupales | `[lueira id="{id}" module="school" product_type="group-package"]` | `{host}/embed/school/group-package/{id}` |
| Producto de alquiler | `[lueira id="{id}" module="rent"]` | `{host}/embed/rent/product/{id}` |
| Pack de alquiler (bundle) | `[lueira id="{id}" module="rent" product_type="bundle"]` | `{host}/embed/rent/bundle/{id}` |

⚠️ **Caso especial — productos de alquiler individuales:** el shortcode generado **no incluye** el parámetro `product_type`. El plugin asume `product` por defecto cuando se usa `module="rent"` sin tipo explícito. Solo los packs de alquiler (bundles) llevan `product_type="bundle"`.
​

## Parámetros del shortcode

El modal solo expone los parámetros obligatorios. Si quieres personalizar más (texto del botón, idioma, clases CSS), edita el shortcode después de copiarlo añadiendo los parámetros opcionales:

| **Parámetro** | **Obligatorio** | **Default** | **Descripción** |
| --- | --- | --- | --- |
| `id` | Sí | - | El ID del producto que se va a insertar |
| `module` | Sí | - | "school" (clases / packs de clases) o "rent" (alquiler / packs de alquiler) |
| `product_type` | Depende | "product" si module="rent" | "private", "group", "group-package" para school; "bundle" para packs de alquiler. Para productos de alquiler individuales se puede omitir. |
| `lang` | No | "es" | Código de idioma para mostrar el contenido localizado. El modal no añade este parámetro; tienes que ponerlo tú a mano si lo necesitas. |
| `button_text` | No | "View activity" | Texto que se mostrará en el botón del shortcode |
| `class` | No | - | Clases CSS adicionales para el botón |

## Ejemplos de shortcode con parámetros adicionales

Clase privada con texto de botón personalizado:

[lueira id="456" module="school" product_type="private" button_text="View Activity"]

![](https://media.support.lueira.com/images/82664d1e7ec4d4da2b4b11e35566cb7c.png)

![](https://media.support.lueira.com/images/dee23467b87c1d5d2289f92bce8409c0.png)

Pack de clases grupales con clase CSS propia e idioma forzado a español:

[lueira id="789" module="school" product_type="group-package" lang="es" class="btn-primary" button_text="View Activity"]

![](https://media.support.lueira.com/images/82664d1e7ec4d4da2b4b11e35566cb7c.png)

![](https://media.support.lueira.com/images/806b701503a055aa40352f625177fbe2.png)

## Estructura de las URLs

**URLs que genera el modal "Código de inserción" (pestaña iFrame):**

El modal del admin genera URLs sin prefijo de idioma. El formato es:

`{host_url}/embed/{module}/{product_type}/{activity_id}`

Excepción: para productos de alquiler individuales el segmento del tipo es literal `product`, así: `{host_url}/embed/rent/product/{id}`.

​

**URLs que genera el plugin de WordPress a partir del shortcode:**

El plugin construye URLs con el siguiente formato, añadiendo el segmento de idioma si lo defines:

`{host_url}/{lang}/embed/{module}/{product_type}/{activity_id}`

Ejemplos:

- [https://store.lueira.com/es/embed/rent/bundle/456](https://store.lueira.com/es/embed/rent/bundle/456)
- [https://store.lueira.com/en/embed/school/private/123](https://store.lueira.com/en/embed/school/private/123)

## Personalización con CSS

El plugin incluye estilos CSS predeterminados para el modal y el botón. Puedes personalizar su apariencia de las siguientes formas:

- Añadiendo clases CSS personalizadas mediante el parámetro `class` del shortcode.
- Sobrescribiendo los estilos del plugin desde tu tema de WordPress.
- Modificando directamente el archivo `modal.css` incluido en el plugin.

## Clases CSS disponibles

| **Clase** | **Elemento** |
| --- | --- |
| `.lueira-embed-button-wrapper` | Contenedor del botón |
| `.lueira-embed-trigger` | Botón que activa el modal |
| `.lueira-embed` | Contenedor principal del modal |
| `.lueira-embed__backdrop` | Fondo o superposición del modal |
| `.lueira-embed__dialog` | Cuadro de diálogo del modal |
| `.lueira-embed__close` | Botón para cerrar el modal |

## Compatibilidad

- Navegadores modernos: Chrome, Firefox, Safari y Edge.
- Diseño adaptable a móviles (responsive).
- Cumplimiento de accesibilidad con atributos ARIA.

## Seguridad: atributos sandbox del iframe

El iframe incrustado por el plugin incluye los siguientes atributos de seguridad *sandbox*:

- `allow-same-origin`
- `allow-scripts`
- `allow-popups`
- `allow-forms`
- `allow-top-navigation-by-user-activation`

## Requisitos del plugin

- WordPress 5.0 o superior
- PHP 7.4 o superior

## Historial de versiones

**Versión 1.0.0**

- Implementación del shortcode con modal superpuesto
- Página de configuración en el administrador
- Diseño responsive
- Soporte multidioma
- Iframe con sandbox de seguridad

​

Si tienes dudas sobre cómo configurar los iframes en tu web, ¡no dudes en contactarnos!

Source: https://help.lueira.com/es/articles/plugin-lueira-embed-referencia-tecnica