Questo articolo spiega i requisiti minimi e la struttura raccomandata affinché il contenuto HTML funzioni correttamente all’interno delle diapositive di tipo Contenuto HTML nei moduli interattivi di SMARTFENSE.
Come funziona il contenitore della piattaforma
L’attività di Contenuto HTML rende la slide all’interno di un iframe gestito internamente dalla piattaforma. Lo sviluppatore non interagisce direttamente con questo iframe.
Affinché l’iframe adatti la sua altezza al contenuto della slide, la piattaforma ha bisogno di trovare lo script iframe-resizer.contentWindow.min.js all’interno dell’HTML. Se non è presente, il contenitore non può espandersi e il contenuto viene tagliato.
Requisiti obbligatori
Una slide HTML deve soddisfare solo tre requisiti per funzionare correttamente sulla piattaforma.
1. Includere lo script di auto-sizing
Aggiungere il seguente script nel <head> del documento:
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
2. HTML autocontenuto
La slide non deve fare riferimento a file esterni propri. Tutti gli stili devono essere incorporati nel <head> all’interno di un tag <style>.
3. Notificare il completamento (solo se la diapositiva blocca l’avanzamento)
Se la diapositiva è configurata come obbligatoria per procedere, il codice deve notificare alla piattaforma quando l’utente completa l’attività:
function notifyCompleted(success = true) {
window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
}Chiamare questa funzione nel momento in cui l’utente completa l’attività definita.
Struttura base raccomandata
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titolo della slide</title>
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
<style>
/* Stili propri della slide */
</style>
</head>
<body>
<!-- Contenuto della slide -->
<script>
// Logica della slide
// Solo se la diapositiva blocca l’avanzamento:
function notifyCompleted(success = true) {
window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
}
</script>
</body>
</html>Variabili di personalizzazione
L’editor supporta variabili che vengono sostituite dinamicamente con i dati dell’utente e dell’organizzazione quando il modulo viene visualizzato.
Variabili utente:
| Variabile | Descrizione |
|---|---|
$name | Nome dell’utente |
$lastname | Cognome dell’utente |
$email | Indirizzo email dell’utente |
$username | Nome utente |
$manager_email | Email del diretto responsabile |
Variabili dell’organizzazione (configurate in Impostazioni > Organizzazione > Dati dell’organizzazione):
| Variabile | Descrizione |
|---|---|
$organization_name | Nome dell’organizzazione |
$tenant_name | Nome del tenant |
$domain | Dominio principale |
$main_organization_domain | Dominio principale dell’organizzazione |
$help_desk_area | Nome dell’area help desk |
$help_desk_email | Email dell’help desk |
$help_desk_phone | Telefono dell’help desk |
$compliance_area | Nome dell’area compliance |
$hr_area | Nome dell’area risorse umane |
$is_area | Nome dell’area sicurezza delle informazioni |
$is_email | Email dell’area sicurezza delle informazioni |
$incident_report_area | Nome dell’area segnalazione incidenti |
$incident_report_email | Email per la segnalazione degli incidenti |
$incident_report_phone | Telefono per la segnalazione degli incidenti |
$ceo | Nome del CEO |
$ceo_email | Email del CEO |
$cto | Nome del CTO |
$ciso | Nome del CISO |
$ciso_email | Email del CISO |
$cpo | Nome del CPO |
$cpo_email | Email del CPO |
$chro | Nome del CHRO |
$cco | Nome del CCO |
$cco_email | Email del CCO |
$cco_area | Nome dell’area del CCO |
$procurement_area | Nome dell’area acquisti |
$procurement_area_email | Email dell’area acquisti |
Per usare una variabile, inserirla direttamente nell’HTML dove necessario:
<p>Ciao, <strong>$name $lastname</strong>. In caso di incidente, contattare <strong>$incident_report_area</strong> all’indirizzo <strong>$incident_report_email</strong>.</p>
Le variabili dell’organizzazione vengono aggiornate in un unico punto e si propagano automaticamente a tutti i moduli che le utilizzano.
💡 Buone pratiche
- Prendere come punto di partenza una diapositiva esistente dalla galleria di SMARTFENSE. Include già lo script obbligatorio e la struttura base corretta.
- Usare il pulsante Anteprima dopo ogni modifica prima di salvare.
- Testare sempre con una campagna di prova prima di lanciare il modulo agli utenti finali.
- Verificare che tutti gli stili siano incorporati nel
<head>e che l’HTML non faccia riferimento a file esterni propri.