# Guía de uso de iframes

## Esta guía tiene una versión más actual

⚠️ **Esta guía es antigua.** Ahora el admin genera el shortcode y el código iFrame de cada producto desde el modal **"Código de inserción"**, y algunos datos de esta página han cambiado (por ejemplo, en los productos de alquiler individuales el parámetro `product_type` ya no es obligatorio). Consulta las guías actualizadas:

- [Cómo insertar tus actividades de Lueira en tu web Wordpress](lueira-guide:ff98c105-46ce-4d3a-9d20-68f25d2d9b29?locale=es): guía paso a paso con el modal.
- [Plugin Lueira Embed: referencia técnica](lueira-guide:fcddf4c7-bb2c-4d74-ba23-f7c8f6b30999?locale=es): todos los parámetros del shortcode, URLs, CSS y requisitos.

💡 El iFrame no exige que tu web sea WordPress: puedes pegarlo en cualquier web que permita insertar HTML.

## Guía de uso de iframes

La plataforma Lueira permite añadir iframes a vuestra propia web para evitar redireccionar a los clientes a la tienda online de Lueira y que no tengan que abandonar vuestra web, esto te permite mantener el SEO de tu propia web.

​

Es importante que la configuración de vuestra web sea con WordPress. Lueira Embed te permite fácilmente añadir actividades de Lueira marketplace dentro de tus posts i páginas de WordPress usando un Shortcode. El plugin te añade un botón que abre una pestaña que contiene un iframe con la actividad insertada.

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

**Las características principales de esta opción:**

- **Integración sencilla:** inserta actividades 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.

**Como hacer la instalación de WordPress:**

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**.

**Instrucciones de configuración de los iframes:**

- **Configuración del administrador** 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/))

**Uso: Shortcode básico**

[lueira id="cd2j3bkk7mdnur3r857g" module="school" roduct_type="private"]

**Parámetros del Shortcode**

| **Parámetro** | **Obligatorio** | **Default** | **Descripción** |
| --- | --- | --- | --- |
| `id` | Yes | - | El ID de la actividad que se va a insertar |
| `module` | Yes | - | El tipo de módulo (por ejemplo, "school", "rent") |
| `product_type` | Yes | - | El tipo de producto (por ejemplo, "private", "group" y "group-package" para escuela; "product" y "bundle" para alquiler) |
| `lang` | No | "es" | El código de idioma para mostrar el contenido localizado (por defecto: "es") |
| `button_text` | No | "View activity" | El texto que se mostrará en el botón |
| `class` | No | - | Las clases CSS adicionales para el botón |

- **Ejemplos** Actividad de la escuela (privada): [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 grupal de ráfting: [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 la URL generada**
  El plugin genera las URL con el siguiente formato: {host_url}/{lang}/embed/{module}/{product_type}/{activity_id} Por ejemplo: [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)

**Estilos**

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`.
- Sobrescribiendo los estilos del plugin desde tu tema.
- Modificando directamente el archivo `modal.css` incluido.

**Clases de CSS**

- `.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.

**Ajustes de seguridad**

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

`allow-same-origin`

`allow-scripts`

`allow-popups`

`allow-forms`

`allow-top-navigation-by-user-activation`

**Requisitos**

- WordPress 5.0 o más
- PHP 7.4 o más

- **Version 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 como configurar los iframes en tu web, ¡no dudes en contactarnos!

Source: https://help.lueira.com/es/articles/guia-de-uso-de-iframes