Come configurare le diapositive HTML nei moduli interattivi, passo dopo passo

Un tasso di completamento del 100% non garantisce che tre settimane dopo la stessa persona riconosca una mail di phishing prima di fare clic. Leggere non è la stessa cosa che decidere sotto pressione, e la differenza si allena.

Le diapositive HTML nei moduli interattivi di SMARTFENSE sono pensate proprio per colmare quella distanza. Invece di schermate statiche da attraversare con il pulsante “avanti”, ogni schermata attiva un processo mentale diverso: osservare, classificare, decidere, rispondere. E dato che le diapositive sono in HTML, puoi adattarle al brand, al settore e al caso reale del tuo cliente senza dover ricaricare i contenuti da zero.

Questo articolo è una guida operativa per amministratori e partner che vogliono configurarle oggi. Se ti interessa prima il perché del ridisegno (il cambio di paradigma, i principi e la logica del feedback positivo), ti consigliamo di leggere prima l’articolo sul nostro blog pubblico sulle diapositive HTML e l’e-learning interattivo.

Prima di iniziare: dove vivono le diapositive?

Nella piattaforma trovi due porte d’ingresso allo stesso strumento:

• Galleria dei contenuti: i modelli predefiniti curati dal team di contenuti di SMARTFENSE. Più di 50 moduli pronti all’uso, raggruppati per tematica (phishing, password, ingegneria sociale, IA, BYOD, ecc.). È il punto di partenza consigliato nel 90% dei casi.
• Contenuto personalizzato → Moduli interattivi: la tua libreria. Qui vivono i moduli che adatti dalla galleria e quelli che crei da zero.

La scelta su da dove partire è pratica: se esiste un modello vicino all’obiettivo, conviene sempre adattarlo invece di costruire da zero. La galleria porta già con sé l’impostazione concettuale (anatomia di un caso, feedback positivo, valutazione finale), e il tuo lavoro si riduce a vestirla con il brand e gli esempi del cliente.

Passo 1: Creare un modulo da modello

1. Entra in Contenuto personalizzato → Moduli interattivi.
2. Scegli Nuovo modulo interattivo → Da modello.
3. Nell’elenco, seleziona il modello più vicino all’obiettivo della campagna. Ad esempio, Sicurezza nei dispositivi mobili se devi lavorare sul BYOD.
4. La piattaforma ti porta alla prima vista di modifica con tutte le configurazioni precaricate.

In Dati visibili dall’amministratore definisci la parte operativa: nome interno, descrizione, etichette, categorie, tematiche, tempo stimato, difficoltà, catalogo e, se usi il componente di normative, la clausola corrispondente. Questa vista è quella che vedono gli amministratori; serve a classificare il modulo dentro la tua libreria e a collegarlo agli audit.

In Dati visibili dall’utente definisci ciò che l’utente finale vedrà: titolo del modulo, immagine di sfondo e immagine di copertina. Se il tuo cliente ha un’identità visiva forte, questo è il punto in cui compare.

Salvi e la piattaforma ti porta direttamente alla modifica delle diapositive, con tutto il contenuto del modello già caricato.

Passo 2: Personalizzare il brand con modifiche minime di HTML

Qui arriva il primo guadagno rapido. Non serve conoscere l’HTML in modo avanzato: con due o tre modifiche puntuali puoi trasformare un modello generico in qualcosa che sembra fatto su misura.

Ogni diapositiva ha il proprio editor HTML. Le operazioni che farai più spesso:

• Cambiare il colore di un blocco evidenziato (ad esempio, il box di “buone pratiche”). Cerchi la sezione delle colonne nel codice, identifichi il blocco dal nome già commentato e sostituisci il codice colore. Se il tuo cliente è un istituto finanziario, puoi allinearlo al suo brand book.
• Aggiungere il logo del cliente in alto a sinistra. Inserisci un tag che punta a un’immagine già caricata nella piattaforma, regoli il width e basta.
• Sostituire testi che fanno riferimento a domini o aree generiche con quelli reali del cliente. I dati di organizzazione si possono gestire con variabili (vedi passo 4), ma a volte è più semplice cambiare il copy diretto se è un dato fisso.

Dopo ogni modifica, il pulsante Anteprima ti porta alla vista dell’utente finale. Prova ogni modifica prima di salvare la diapositiva: l’anteprima non tocca nulla e ti evita sorprese in produzione.

Una volta finita la personalizzazione di una diapositiva, salvi quella diapositiva in particolare. Nella modifica generale le modifiche si salvano in automatico, ma a livello di ogni singola slide devi confermare.

Se hai ancora dubbi su come modificare l’HTML nella piattaforma, la stessa vista di modifica ha una guida in linea a tendina con esempi. Trovi anche il centro di assistenza di SMARTFENSE con articoli dedicati all’editor.

Passo 3: Creare una diapositiva da zero

Quando la galleria non ha ciò che ti serve, puoi aggiungere una diapositiva nuova senza uscire dall’editor.

1. Nella vista delle diapositive, cerca l’opzione Aggiungi diapositiva.
2. Scegli il layout: titolo e corpo, due colonne, una colonna, ecc.
3. Scegli Contenuto HTML.
4. Si apre un editor vuoto dove incolli il codice HTML che vuoi.

Un pattern utile per quando inizi: parti da una diapositiva già montata della galleria, copi il suo HTML, lo incolli nella diapositiva nuova e da lì lo modifichi. Risparmi il lavoro di ricreare struttura, stili e comportamento.

Se nella tua organizzazione c’è qualcuno con un profilo più tecnico, questa è la leva che apre il soffitto: qualunque interazione costruibile con HTML, CSS e un minimo di JavaScript inline ci sta dentro. Per esempio, esercizi di drag-and-drop per classificare tipi di phishing, simulatori di casella di posta o questionari con feedback condizionale.

Passo 4: Usare le variabili organizzative

Questa è la parte che ha più impatto sulla percezione dell’utente finale, ed è anche quella che si sfrutta di meno. Quando un modulo parla all’utente per nome, menziona la sua area reale e mostra il corretto indirizzo a cui segnalare gli incidenti, smette di sembrare un corso generico.

La piattaforma espone due insiemi di variabili:

Variabili dell’utente (provengono dal database utenti):

• nome e cognome
• indirizzo email
• responsabile diretto
• email del responsabile

Variabili dell’organizzazione (si configurano in Configurazione → Organizzazione → Dati dell’organizzazione):

• nome dell’area (help desk, SOC, ecc.)
• email dell’area
• telefono dell’area
• nome del CISO
• nome del direttore tecnologico
• email per la segnalazione di incidenti

Per usare una variabile dentro l’HTML, basta inserire il placeholder nel punto corrispondente. Quando l’utente apre il modulo, la piattaforma sostituisce ogni placeholder con il valore reale.

Quello che conviene sfruttare è che una variabile si aggiorna una volta sola e si propaga in tutti i contenuti. Se domani cambia l’indirizzo a cui si segnalano gli incidenti, non devi aprire ogni diapositiva; modifichi la variabile nella configurazione dell’organizzazione e tutti i moduli che la usano si aggiornano in automatico. Lo stesso vale se cambia il CISO, l’area di supporto o il direttore commerciale.

Per i clienti con filiali in più paesi, la variabile rispetta anche la lingua dell’utente: ogni persona vede l’email e i dati dell’area corrispondenti alla propria area geografica.

Passo 5: Lanciare la campagna

Una volta creato o personalizzato il modulo, lo vedrai nella galleria dei contenuti, ora con il tuo adattamento incluso.

Tre strade per attivarlo:

• Visualizzarlo in anteprima dalla galleria. Ti porta alla vista dell’utente finale e ti lascia percorrerlo come farà una persona del cliente.
• Creare una campagna direttamente dal modulo con il pulsante Crea campagna. La piattaforma carica il modulo nel topic della campagna in automatico.
• Aggiungerlo a una campagna esistente dalla configurazione normale delle campagne.

La configurazione della campagna (audience, date, reminder) resta la stessa che già conosci per il resto dei moduli interattivi. L’unica cosa che cambia è l’esperienza che riceve l’utente finale.

Una decisione commerciale, non solo tecnica

Se lavori come partner, c’è un punto utile da tenere in cima alla conversazione con un cliente. Il focus del lavoro si sta spostando dal contenuto al comportamento, e le diapositive HTML sono il pezzo che riapre quel discorso di vendita. Quando puoi sederti davanti a un CISO e mostrargli una demo navigabile in cui un utente identifica i segnali di phishing e riceve feedback ad ogni decisione, l’offerta smette di sembrare una libreria di corsi e prende la forma di un sistema di allenamento. La logica sottostante si collega con il modo in cui i nudge e i momenti educativi modellano il comportamento senza chiedere all’utente di ricordarsi un corso intero.

Quella differenza apre anche la conversazione su metriche più utili. La percentuale che ha completato il corso passa in secondo piano, e ciò che inizia a contare è quanti comportamenti sono migliorati dopo la formazione.

Per approfondire

• Workshop completo (35 minuti): la registrazione del workshop include una demo dal vivo del modulo di phishing con IA e i tre blocchi completi (strategia, personalizzazione passo dopo passo e creazione da zero con variabili). Workshop in spagnolo.
• Articolo di awareness: Il cambio di paradigma dietro le diapositive HTML. Pensato per presentarlo a un cliente che chiede perché questo formato.
• La piattaforma: la sezione moduli interattivi in SMARTFENSE spiega le capacità trasversali (lifecycle di campagna, metriche, normative) che si incrociano con questo tipo di contenuto.

Se la configuri per qualche cliente e vuoi che gli diamo un’occhiata prima di lanciarla, scrivici. I primi adattamenti tendono ad essere quelli che rendono di più se li perfezioniamo insieme.