Landings

La sección de Landings permite a los administradores gestionar, subir y organizar páginas de aterrizaje personalizadas. Al proporcionar el código HTML de tu sitio, puedes vincular cada landing directamente a una ruta específica dentro de la plataforma y obtener una vista del contenido y la estructura de tu sitio web.

El Panel de Landings ofrece una vista centralizada de todas las páginas activas y archivadas asociadas con las activaciones de la plataforma. Cada entrada muestra información clave como el nombre de la página, la ruta, el tamaño del archivo, las fechas de creación y actualización, y el estado de publicación.

En la parte superior de la página encontrarás:

• Pestañas Activas / Archivadas – Cambia entre las landings actualmente en uso y las archivadas.
• Barra de Búsqueda – Filtra páginas por nombre o palabra clave.
• Botón de Subida – Agrega una nueva página de aterrizaje al sistema.
• Contador Total – Muestra el número de landings disponibles (por ejemplo, “Total: 15”).

Descripción del Panel de Landings

Cada fila en el panel corresponde a una landing individual e incluye la siguiente información:

Column	Description
Name	El título de la landing (por ejemplo, Audio/Vision, Media Under Dystopia 3.0).
Route	La ruta URL única que conecta la landing con su activación (por ejemplo, /xr-creator/activations/the-sound-of-art).
Size	Tamaño del paquete de la landing en megabytes (MB).
Created	Fecha y hora en que se subió la landing por primera vez.
Updated	Fecha de la última modificación.
Status	Indica el estado de publicación (por ejemplo, Draft o Published).

Subir una Landing

Al hacer clic en el botón Upload se abre la ventana Upload New Landing, donde puedes añadir y configurar una nueva landing.

Campos

Field	Description
Name	El título de tu landing. Aparece en el dashboard e identifica la página.
Description	Breve descripción del contenido o propósito de la landing (opcional).
Route	La ruta URL donde estará disponible la landing (por ejemplo, /, /activations/my-activation).
File Upload	Sube un archivo .zip que contenga tu sitio de la landing.

Subida de Archivos

En la parte inferior del formulario, carga tu paquete de landing:

• Arrastra y suelta tu archivo .zip en el área de subida o haz clic para buscarlo manualmente.
• Tipo de archivo permitido: .zip
• Tamaño máximo de archivo: 200 MB

Importante:

Tu archivo .zip debe seguir la estructura correcta para que el sistema reconozca y despliegue la landing adecuadamente.

• El archivo index.html debe estar en el nivel raíz del ZIP (no dentro de una subcarpeta).
• Los directorios de soporte como /css, /js, /fonts y /images deben incluirse junto al archivo index.

Ejemplo de estructura:

/css
/fonts
/images
/js
401.html
404.html
index.html

Una vez subida, la landing aparecerá en la lista Activa en estado de Borrador hasta que sea publicada.

Opciones de Gestión de Landings

Cada landing incluye un menú contextual accesible a través del ícono de tres puntos (⋮).

Desde este menú, los administradores pueden gestionar, previsualizar o publicar las páginas según sea necesario.

Publicar

Activa esta opción para hacer que la landing sea accesible públicamente. Al publicarla, la página quedará disponible en su ruta designada y vinculada a su activación correspondiente.

Previsualizar

Abre una vista previa de la landing en una nueva ventana, permitiendo revisar su diseño, medios y contenido antes de publicarla.

Editar

Abre la landing para modificarla. Usa esta opción para actualizar el contenido, reemplazar recursos o revisar texto antes de volver a publicar.

Descargar

Descarga el paquete de la landing (archivos HTML/CSS/JS) para edición local o respaldo.

Archivar

Mueve la landing a la pestaña Archivadas. Esto ayuda a mantener la lista activa organizada sin eliminar la página permanentemente.

Pestañas Activas y Archivadas

• Pestaña Activas – Muestra todas las landings disponibles o en desarrollo.
• Pestaña Archivadas – Contiene landings antiguas o no utilizadas, almacenadas para referencia o futura reactivación.

Los administradores pueden cambiar entre estas pestañas en cualquier momento para revisar o restaurar contenido archivado.

Cambiar la Página de Inicio con Landings Personalizadas

Puedes reemplazar la página de inicio predeterminada de tu plataforma XR MAAS asignando una landing personalizada a la ruta raíz.

Configurar una Landing como Página de Inicio

1. Sube una landing como de costumbre.
2. Establece el campo Route en: /
3. Publica la landing.

Una vez publicada, tu landing personalizada se convierte en la página de inicio de tu panel.

Esto permite total libertad sobre la identidad visual y la experiencia de entrada para los visitantes.

Visualización Dinámica de Usuario Logueado

Las landings personalizadas—especialmente las páginas de inicio—pueden mostrar información dinámica del usuario cuando un visitante ha iniciado sesión.
Para habilitar esto, tu barra de navegación debe incluir clases CSS específicas que el sistema reconoce y completa automáticamente.

Estas clases permiten que XRHUB muestre u oculte los elementos correctos de la interfaz según el estado de autenticación.

Clases Requeridas

Asigna las siguientes clases a tu página:

1. login-button
   Aplicada al botón de Registro / Inicio de sesión. Visible solo cuando el usuario NO ha iniciado sesión.

   Ejemplo:

   <button class="login-button">Login</button>

2. **`user-button`**  
Contenedor del botón del usuario autenticado. Este es el contenedor principal que debe mantenerse oculto antes del inicio de sesión.

3. **`user-button-background`**  
Estilo de fondo del botón de usuario (círculo de avatar o bloque).

4. **`user-button-text`**  
Texto dentro del botón de usuario (normalmente el nombre del usuario).

5. **`user-menu`**  
Contenedor del menú desplegable.

6. **`user-menu-name`**  
Muestra dinámicamente el nombre del usuario.

7. **`user-menu-email`**  
Muestra dinámicamente el correo electrónico del usuario.

8. **`logout-button`**  
Proporciona la acción de cerrar sesión y devuelve al usuario al estado de inicio de sesión.

Esto asegura que el sistema pueda ocultarlo cuando el usuario ha iniciado sesión.

#### Hidden User Button Structure

Antes del inicio de sesión, el menú de usuario debe permanecer oculto. Puedes insertar contenedores o clases adicionales según sea necesario, pero la estructura general debe conservar la jerarquía definida.

Una vez que ocurre la autenticación, XRHUB:

- oculta el `login-button`  
- muestra el contenedor `user-button`  
- completa automáticamente:

- `user-menu-name`  
- `user-menu-email`  
- la lógica de `logout-button`

**Ejemplo de plantilla:**

```html
<!-- Shown only when NOT logged in -->
<button class="login-button">Login</button>

<!-- Shown only when logged in -->

<div class="user-button">
<div data-delay="0" data-hover="false" class="user-button-background w-dropdown">
  <div class="dropdown-toggle-5 w-dropdown-toggle">
    <div class="user-button-text">D</div>
  </div>
  <nav class="user-menu w-dropdown-list">
    <div class="container-email-name">
      <div class="user">
        <h4 class="heading-h4-size menu user-menu-name">John Doe</h4>
      </div>
      <div class="email">
        <div class="user-menu-email">johndoe@gmail.com</div>
      </div>
    </div>
    <a class="link-navegation w-inline-block logout-button">
      <div class="text-block">Logout</div>
    </a>
  </nav>
</div>
</div>

<!-- Shown only when NOT logged in -->
<button class="login-button">Login</button>

<!-- Shown only when logged in -->

<div class="user-button">
<div data-delay="0" data-hover="false" class="user-button-background w-dropdown">
 <div class="dropdown-toggle-5 w-dropdown-toggle">
   <div class="user-button-text">D</div>
 </div>
 <nav class="user-menu w-dropdown-list">
   <div class="container-email-name">
     <div class="user">
       <h4 class="heading-h4-size menu user-menu-name">John Doe</h4>
     </div>
     <div class="email">
       <div class="user-menu-email">johndoe@gmail.com</div>
     </div>
   </div>
   <a class="link-navegation w-inline-block logout-button">
     <div class="text-block">Logout</div>
   </a>
 </nav>
</div>
</div>

Conectar Landings con Activaciones

Cada landing puede asociarse directamente con una activación o evento específico.
Esto garantiza que los usuarios experimenten una página de aterrizaje personalizada antes de ingresar al entorno XR.

Casos de uso comunes:

• Formularios de registro o confirmación de asistencia (RSVP)
• Páginas informativas previas al evento
• Secciones de patrocinadores o colaboradores
• Páginas interactivas o con cuenta regresiva

Para vincular una landing con una activación, asegúrate de que la ruta definida coincida con la URL asignada a la activación en el sistema.

Clases Personalizadas para Landings Personalizadas

Puedes agregar clases personalizadas a tus elementos HTML para habilitar funciones interactivas específicas, como botones RSVP, temporizadores de activación o programas dinámicos.

Botón RSVP

Para habilitar el botón de RSVP y permitir que los usuarios confirmen su asistencia, agrega la siguiente clase al elemento del botón:

<button class="rsvp-button">RSVP Now</button>

Botón de Compartir

Para habilitar un botón de compartir con los enlaces cortos y el código QR para acceder a tu activación, agrega la siguiente clase al elemento de tu botón de compartir:

share-button

Botón de Ticket

Para habilitar el acceso a boletos en activaciones presenciales, agrega la siguiente clase:

ticket-button

Esta clase debe aplicarse al botón que los usuarios hacen clic para ver sus boletos de activación.

Cómo Habilitar un Temporizador en Landings de Activaciones

Agrega las siguientes clases requeridas a tu estructura HTML para mostrar un temporizador regresivo:

timer
days
hours
minutes
seconds

Ejemplo:

Estos elementos deben existir en el diseño para que el sistema pueda inyectar dinámicamente el tiempo restante.

Cómo Habilitar Programas Dinámicos en Landings Personalizadas

Para habilitar programas dinámicos de activaciones, se deben agregar clases específicas en una jerarquía organizada.
Estas clases permiten que el sistema reconozca y muestre correctamente los datos del cronograma o programa de la activación.

Solo necesitas crear un día de calendario y una presentación como estructura base; la plataforma la replicará dinámicamente.

Clases Requeridas:

program
program-day
program-day-text
program-presentations
program-presentations-list
program-presentation
program-presentation-time
program-presentation-image
program-presentation-name
program-presentation-description
program-presentation-button
program-presentation-presenters-list
program-presentation-presenter
program-presentation-presenter-name
program-presentation-presenter-image
program-presentation-presenter-bio

Ejemplo:

Estas clases aseguran que todos los elementos del programa (días, presentaciones, ponentes y horarios) se muestren correctamente y se actualicen de forma dinámica.

Consejo:
Antes de subir tu landing, pruébala localmente para confirmar que todas las rutas de recursos (CSS, JS, imágenes) cargan correctamente y que las clases personalizadas funcionan según lo esperado.
Esto evita errores de diseño, estilos faltantes o botones que no respondan después de la publicación.

Notas

• Solo los administradores o creadores autorizados pueden subir y publicar landings.
• Archivar no elimina el contenido; las landings archivadas pueden restaurarse en cualquier momento.
• Asegúrate de que cada ruta de landing sea única para evitar conflictos con las activaciones.
• Previsualiza las páginas antes de publicarlas para confirmar su diseño y funcionalidad.
• Usa nombres consistentes para facilitar la identificación y organización de las landings.