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 necesita encontrar el script iframe-resizer.contentWindow.min.js dentro del HTML. Si no está presente, el contenedor no puede expandirse y el contenido queda cortado.
Requisitos obligatorios
Un slide HTML debe cumplir únicamente tres requisitos para funcionar correctamente en la plataforma.
1. Incluir el script de auto-sizing
Agregue el siguiente script en el <head> del documento:
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
2. HTML autocontenido
El slide no debe referenciar archivos externos propios. Todos los estilos deben ir embebidos en el <head> dentro de una etiqueta <style>.
3. 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.
Estructura base recomendada
<!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>
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
<style>
/* Estilos propios del slide */
</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:
<p>Hola, <strong>$name $lastname</strong>. Ante cualquier incidente, contacte a <strong>$incident_report_area</strong> en <strong>$incident_report_email</strong>.</p>
Las variables de organización se actualizan en un solo lugar y se propagan automáticamente a todos los módulos que las utilizan.
💡 Mejores prácticas
- Tome como punto de partida una diapositiva existente de la galería de SMARTFENSE. Ya incluye el script obligatorio y la estructura base correcta.
- Use el botón Previsualizar después de cada cambio antes de guardar.
- Pruebe siempre con una campaña de prueba antes de lanzar el módulo a los usuarios finales.
- Verifique que todos los estilos estén embebidos en el
<head>y que el HTML no referencie archivos externos propios.