Cómo insertar tus actividades de Lueira en tu web Wordpress

Lueira incluye un modal "Código de inserción" en el admin que genera el shortcode de WordPress y el código iFrame de cada actividad. Te enseñamos a integrar tus actividades en tu web WordPress en 3 formas distintas, todas a partir del nuevo modal.

En esta página
  1. Cómo insertar tus actividades de Lueira en tu web Wordpress
  2. Genera el código desde el admin
  3. ¿Para qué sirve?
  4. Entiende la estructura (opcional)
  5. OPCIÓN 1: Un botón que abre el producto
  6. Paso 1: Instala el plugin
  7. Paso 2: Configura el plugin
  8. Paso 3: Copia el shortcode
  9. Paso 4: Pégalo en tu página
  10. OPCIÓN 2: El producto completo integrado
  11. Paso 1: Copia el código iFrame desde el admin
  12. Paso 2 (opcional): Ajusta tamaño y contenido
  13. Paso 3: Pégalo en tu página
  14. OPCIÓN 3: Solo el calendario
  15. ¿Y si tengo varios productos?
  16. ¿Necesitas más control?
  17. Enlace de reservas y dominio propio de la tienda
  18. ¿Y si solo quiero un enlace a mi tienda?
  19. Usar tu propio dominio para la tienda (por ejemplo, reservas.tuweb.com)

Cómo insertar tus actividades de Lueira en tu web Wordpress

Lueira incluye desde el admin un modal "Código de inserción" que te genera automáticamente el shortcode de WordPress y el código iFrame de cada producto. Ya no necesitas construir las URLs ni los códigos a mano: solo abres el modal, copias y pegas.

En este manual te enseñaremos a integrar tus productos de Lueira directamente en tu web WordPress. Te mostraremos 3 formas diferentes de hacerlo, para que elijas la que mejor se adapte a tu sitio web.
​

Genera el código desde el admin

El modal funciona para cualquier producto que tengas activable en la tienda online:

  • Clases grupales

  • Clases privadas

  • Packs de clases grupales

  • Productos de alquiler

  • Packs de alquiler (bundles)

⚠️ Requisito: la opción "Código de inserción" solo aparece si tu centro tiene la tienda online activada. Si no la ves, comprueba en Ajustes que la tienda online esté habilitada.

​

Pasos:

  • Abre la ficha del producto en el admin (Actividades, Packs o Alquiler > tu producto).

  • En la cabecera de la ficha, junto al icono del lápiz, pulsa el menú de los tres puntos (⋮). En los packs de clases grupales también hay un icono dedicado </> que abre el modal directamente.

  • Elige "Código de inserción".

  • WordPress: te da el enlace para descargar el plugin y el shortcode listo para copiar.

  • iFrame: te da el código iframe ya generado, con controles para ajustar el ancho, el alto y un interruptor para mostrar u ocultar los detalles del producto.

⚡ Tip: cada producto tiene su propio modal, así que el código que copias ya viene con el ID y el tipo de producto correctos.
​

¿Para qué sirve?

Esta funcionalidad es útil cuando:

  • Quieres mostrar tu calendario de reservas en tu web WordPress

  • Prefieres no redirigir a tus clientes a otra plataforma

  • Necesitas integrar tus productos de forma personalizada

  • Tienes varios productos y quieres mostrarlos todos en tu sitio

Entiende la estructura (opcional)

Aunque el modal te genera el código automáticamente, te ayudará entender de dónde sale. Cada producto de Lueira tiene una URL como esta:

https://tutienda.lueira.com/school/group/d14k1iq98njc73df3mi0

Cada parte de esta URL tiene un significado:

Parte

De tu URL

Significado

tutienda.lueira.com

Tu dominio

Es siempre igual para todos tus productos

school / rent

Módulo

"school" para clases y packs de clases, "rent" para alquileres y packs de alquiler

group / private / group-package / bundle

Tipo de producto

Cambia según el tipo de producto (los productos de alquiler individuales no llevan este segmento)

abc123xyz

ID del producto

ESTO cambia para cada producto

⚡ Lo importante: el módulo, el tipo de producto y el ID cambian según el producto. El modal los rellena por ti, pero si quieres construir el código a mano, son los tres datos que tienes que adaptar.
​

OPCIÓN 1: Un botón que abre el producto

La más sencilla. Tu visitante ve un botón y cuando lo clica, se abre tu calendario de reservas en un pop-up.

Paso 1: Instala el plugin

Desde el modal "Código de inserción" > pestaña WordPress, pulsa "Descargar plugin". El botón te lleva al plugin oficial de Lueira en wordpress.org.

Alternativa: en tu WordPress, ve a Plugins > Añadir nuevo, busca Lueira Embed, instálalo y actívalo.
​

Paso 2: Configura el plugin

  • Ve a Ajustes > Lueira Embed

  • Comprueba que el dominio sea correcto (tu dominio de Lueira)

Paso 3: Copia el shortcode

Vuelve al modal "Código de inserción" > pestaña WordPress y pulsa "Copiar" en el campo "Shortcode de WordPress". El modal genera el shortcode adaptado al tipo de producto. Estas son las formas según el tipo:

Tipo de producto

Shortcode generado

Clase grupal

[lueira id="abc123xyz" module="school" product_type="group"]

Clase privada

[lueira id="abc123xyz" module="school" product_type="private"]

Pack de clases grupales

[lueira id="abc123xyz" module="school" product_type="group-package"]

Producto de alquiler

[lueira id="abc123xyz" module="rent"]

Pack de alquiler (bundle)

[lueira id="abc123xyz" module="rent" product_type="bundle"]

⚡ No te tienes que aprender estas variantes: cada modal te da directamente el shortcode correcto para ese producto.
​

Paso 4: Pégalo en tu página

  • Edita la página donde quieras el botón

  • Añade un bloque Shortcode

  • Copia y pega el código completo

OPCIÓN 2: El producto completo integrado

Muestra todo: la foto del producto, la descripción completa y el calendario de reservas, todo en una sola página sin pop-ups.

Paso 1: Copia el código iFrame desde el admin

Abre el modal "Código de inserción" > pestaña iFrame. El código ya viene generado con la URL /embed/... correcta para tu producto. Por ejemplo, para una clase grupal:

<iframe src="https://tutienda.lueira.com/embed/school/group/abc123xyz" width="100%" height="800" frameborder="0" allowfullscreen></iframe>

El segmento /embed/{módulo}/{tipo}/{id} se adapta automáticamente según el producto (por ejemplo, /embed/rent/bundle/... para un pack de alquiler, /embed/school/private/... para una clase privada, etc.).

Pulsa "Copiar".
​

Paso 2 (opcional): Ajusta tamaño y contenido

Dentro de la pestaña iFrame puedes modificar antes de copiar:

Control

Qué hace

Ancho

El ancho del iframe en tu página (por defecto 100%)

Alto (px)

La altura en píxeles (por defecto 800). Súbela si el contenido se corta.

Mostrar detalles del producto

Si lo apagas, se oculta la foto y la descripción y solo se ve el calendario (ver OPCIÓN 3)

El código y la vista previa se actualizan en tiempo real conforme cambias estos valores.
​

Paso 3: Pégalo en tu página

  • Edita la página

  • Añade un bloque HTML

  • Copia y pega el código completo

OPCIÓN 3: Solo el calendario

Perfecto si quieres que tu visitante vea solo las fechas disponibles sin la descripción del producto.

En la pestaña iFrame del modal "Código de inserción", desactiva el interruptor "Mostrar detalles del producto". El modal añadirá automáticamente al final de la URL el parámetro ?showProductDetails=false:

<iframe src="https://tutienda.lueira.com/embed/school/group/abc123xyz?showProductDetails=false" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Pulsa "Copiar" y pégalo en un bloque HTML de tu página, como en la OPCIÓN 2.

Elige según lo que quieras:

  • OPCIÓN 1 si tu página ya explica bien el producto y solo necesitas un botón para que reserven

  • OPCIÓN 2 si quieres que todo sea visible en una sola página (la recomendación de Lueira)

  • OPCIÓN 3 si tu web ya tiene buenas fotos y descripción, y solo necesitas que vean disponibilidad

¿Y si tengo varios productos?

Fácil. Repite el proceso para cada producto: abre su modal "Código de inserción" y copia el shortcode o el iframe correspondientes. Cada modal genera el código con el ID, el módulo y el tipo de producto correctos, así que no tienes que tocar nada a mano.
​

¿Necesitas más control?

💡 Si quieres ir más allá del modal (personalizar el texto del botón, aplicar clases CSS, conocer los parámetros opcionales del shortcode o consultar los detalles técnicos del plugin Lueira Embed), echa un vistazo a la guía técnica:

👉 Plugin Lueira Embed: referencia técnica

Enlace de reservas y dominio propio de la tienda

¿Y si solo quiero un enlace a mi tienda?

Si no quieres insertar nada en tu web, puedes enlazar directamente a tu tienda online. La dirección la encuentras en Configuración → Tienda online → General, en el bloque "Tu tienda online se encuentra disponible en" (botón Ir a la tienda). Esa página muestra todo tu catálogo.

💡 El código iFrame (OPCIONES 2 y 3) es HTML estándar: también puedes pegarlo en webs que no sean WordPress, siempre que tu editor permita insertar un bloque de código HTML.

Usar tu propio dominio para la tienda (por ejemplo, reservas.tuweb.com)

En Configuración → Tienda online → General, bloque Dominio personalizado, puedes indicar el dominio o subdominio que quieres usar para tu tienda en lugar de la dirección de Lueira.

Para que funcione, además hay que crear un registro DNS (de tipo CNAME) en el proveedor donde tienes contratado tu dominio, apuntando a tu tienda de Lueira. Hasta que ese registro esté creado y propagado, la tienda no funcionará en el nuevo dominio.

⚠️ Antes de cambiarlo, escríbenos a soporte. Te confirmaremos el valor exacto del registro y el orden de los pasos, y lo revisaremos contigo. Los datos de DNS dependen de cada caso (por ejemplo, los dominios con "ñ" o acentos hay que escribirlos en un formato especial).

Cuando el dominio propio ya funcione, revisa en tu WordPress Ajustes → Lueira Embed que la URL configurada sea la de tu tienda (Paso 2 de la OPCIÓN 1), y vuelve a copiar los códigos iFrame desde el modal si los pegaste antes del cambio.