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.

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)

Sube los archivos a la carpeta /wp-content/plugins/lueira/
Activa el plugin desde el menú Plugins en tu panel de WordPress.
(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).

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"]

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"]

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:

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!

Plugin Lueira Embed: referencia técnica