Guía de uso de iframes

⚠️ 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: guía paso a paso con el modal.

• Plugin Lueira Embed: referencia técnica: 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.

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.

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)

• Uso: Shortcode básico

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

• Parámetros del Shortcode

• Ejemplos

  • Actividad de la escuela (privada): [lueira id="456" module="school" product_type="private" button_text="View Activity"]

    
    

  • Pack grupal de ráfting: [lueira id="789" module="school" product_type="group-package" lang="es" class="btn-primary" button_text="View Activity"]

    
    

• 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/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!