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:
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.
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
Parámetro | Obligatorio | Default | Descripción |
| Yes | - | El ID de la actividad que se va a insertar |
| Yes | - | El tipo de módulo (por ejemplo, "school", "rent") |
| Yes | - | El tipo de producto (por ejemplo, "private", "group" y "group-package" para escuela; "product" y "bundle" para alquiler) |
| No | "es" | El código de idioma para mostrar el contenido localizado (por defecto: "es") |
| No | "View activity" | El texto que se mostrará en el botón |
| 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"]
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:
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.cssincluido.
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-originallow-scriptsallow-popupsallow-formsallow-top-navigation-by-user-activationRequisitos
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!