Cómo estructurar el código HTML para diapositivas de módulos interactivos – SMARTFENSE

Este artículo explica los requisitos mínimos y la estructura recomendada para que el contenido HTML funcione correctamente dentro de las diapositivas de tipo Contenido HTML en los módulos interactivos de SMARTFENSE.

Cómo funciona el contenedor de la plataforma

La actividad de Contenido HTML renderiza el slide dentro de un iframe que gestiona la plataforma internamente. El desarrollador no interactúa con ese iframe directamente.

Para que el iframe ajuste su altura al contenido del slide, la plataforma agrega automáticamente el script de auto-ajuste al mostrar la diapositiva en la vista final. No es necesario que usted lo incluya en su HTML.

Ese ajuste automático depende de que el slide tenga una altura natural, definida por su propio contenido. Si el HTML fuerza una altura fija o relativa a la pantalla en html, body o el contenedor principal, la plataforma no puede calcular correctamente cuánto debe crecer el iframe y el contenido queda cortado (ver la sección "Alturas: qué evitar" más abajo).

Requisitos obligatorios

Un slide HTML debe cumplir estos requisitos para funcionar correctamente en la plataforma.

1. HTML autocontenido

El slide no debe referenciar archivos externos propios. Todos los estilos deben ir embebidos en el <head> dentro de una etiqueta <style>.

2. Notificar la completitud (solo si la diapositiva bloquea el avance)

Si la diapositiva está configurada como obligatoria para avanzar, el código debe notificar a la plataforma cuando el usuario complete la actividad:

function notifyCompleted(success = true) {
  window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
}

Llame a esta función en el momento en que el usuario completa la actividad definida.

Alturas: qué evitar

El ajuste automático de altura mide la altura natural del contenido del slide. Cualquier regla CSS que fuerce una altura fija o relativa a la pantalla rompe esa medición: el contenido se corta en la vista final, aunque en la previsualización del editor se vea completo (esa previsualización tiene scroll propio, por eso no muestra el problema).

Evite declarar, en html, body o en el contenedor principal del slide:

height: 100% (o cualquier porcentaje) en html o body.
min-height: 100vh, height: 100vh, o cualquier otra unidad relativa al viewport (vh, vw) en el contenedor principal. Dentro del iframe, el "viewport" es el propio iframe, no la pantalla del usuario, así que esa unidad no representa el alto real disponible.

Deje que html y body tengan su altura natural (sin declarar height, o con height: auto), y que el contenedor principal crezca según el contenido. Si necesita un alto mínimo, use un valor fijo en píxeles, nunca en vh.

Estructura base recomendada

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título del slide</title>
  <style>
    /* Estilos propios del slide */
    /* No declarar height:100% en html/body ni min-height:100vh en el contenedor principal */
  </style>
</head>
<body>
  <!-- Contenido del slide -->

  <script>
    // Lógica del slide

    // Solo si la diapositiva bloquea el avance:
    function notifyCompleted(success = true) {
      window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
    }
  </script>
</body>
</html>

Variables de personalización

El editor admite variables que se reemplazan dinámicamente con los datos del usuario y de la organización cuando el módulo se visualiza.

Variables de usuario:

Variable	Descripción
`$name`	Nombre del usuario
`$lastname`	Apellido del usuario
`$email`	Correo electrónico del usuario
`$username`	Nombre de usuario
`$manager_email`	Correo del manager directo

Variables de organización (configuradas en Configuración → Organización → Datos de la organización):

Variable	Descripción
`$organization_name`	Nombre de la organización
`$tenant_name`	Nombre del tenant
`$domain`	Dominio principal
`$main_organization_domain`	Dominio principal de la organización
`$help_desk_area`	Nombre del área de help desk
`$help_desk_email`	Correo del help desk
`$help_desk_phone`	Teléfono del help desk
`$compliance_area`	Nombre del área de compliance
`$hr_area`	Nombre del área de recursos humanos
`$is_area`	Nombre del área de seguridad de la información
`$is_email`	Correo del área de seguridad de la información
`$incident_report_area`	Nombre del área de reporte de incidentes
`$incident_report_email`	Correo de reporte de incidentes
`$incident_report_phone`	Teléfono de reporte de incidentes
`$ceo`	Nombre del CEO
`$ceo_email`	Correo del CEO
`$cto`	Nombre del CTO
`$ciso`	Nombre del CISO
`$ciso_email`	Correo del CISO
`$cpo`	Nombre del CPO
`$cpo_email`	Correo del CPO
`$chro`	Nombre del CHRO
`$cco`	Nombre del CCO
`$cco_email`	Correo del CCO
`$cco_area`	Nombre del área del CCO
`$procurement_area`	Nombre del área de compras
`$procurement_area_email`	Correo del área de compras

Para usar una variable, insértela directamente en el HTML donde corresponda: