Crei i tuoi moduli in uno strumento specializzato. Ora devi metterli sul tuo sito. Non puoi copiare e incollare il codice se il tuo sito usa un'altra piattaforma. Lo incorpori. Un modulo incorporato appare sul tuo sito ma vive altrove.
In questo articolo vedi come incorporare i moduli, come funzionano gli iframe, la sicurezza tra domini e i problemi più comuni dei moduli incorporati.
Che cos'è un modulo incorporato?
Un modulo incorporato è un modulo che vive su un server ma appare su un altro sito. Il modulo è ospitato su wemasy.it ma viene mostrato sul tuo sito con un iframe come <iframe src="https://wemasy.com/form/abc123"></iframe>.
L'iframe crea una finestra su un'altra pagina. Quella pagina contiene il modulo. Per l'utente sembra che il modulo sia sul tuo sito. Tecnicamente è una pagina separata dentro un contenitore.
Come funzionano gli iframe
Un iframe è un frame in linea. Carica una pagina completamente separata dentro la tua pagina. Quella pagina ha il suo HTML, il suo CSS e il suo JavaScript. È isolata in una sandbox, cioè non può accedere alla tua pagina e viceversa.
Gli iframe offrono isolamento di sicurezza: lo strumento dei moduli non può accedere ai dati della tua pagina, la tua pagina non può accedere ai dati del modulo e, se il modulo va in crash, la tua pagina no. Però gli iframe hanno degli svantaggi: comunicazione diretta limitata tra pagina e modulo, possibile impatto sulla SEO (Google potrebbe non indicizzare il contenuto del modulo), tempi di caricamento più lenti e nessun supporto ai cookie tra domini diversi.
Incorporare un modulo con un iframe
La maggior parte dei creatori di moduli fornisce un codice da incorporare come <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Copia e incolla questo codice nell'HTML del tuo sito per mostrare il modulo dentro il contenitore. Un problema comune è che l'altezza fissa crea problemi di scorrimento. Se il modulo è più lungo dell'altezza che hai impostato, il modulo scorre dentro l'iframe (brutta esperienza). Dovresti conoscere l'altezza esatta del modulo, ma i moduli si allungano e si accorciano in base alla logica condizionale, quindi l'altezza non è fissa. La soluzione è usare iframe che si ridimensionano da soli con postMessage per far comunicare iframe e pagina principale. Quando il modulo cambia dimensione, dice alla pagina principale di ridimensionare l'iframe. Il JavaScript della pagina principale ascolta i messaggi dell'iframe con window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Il modulo dentro l'iframe invia un messaggio con la sua altezza con parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, così l'iframe si espande da solo per adattarsi al contenuto del modulo.
Sicurezza tra domini
Gli iframe sono isolati in una sandbox per sicurezza. Il modulo non può accedere ai dati della tua pagina. La tua pagina non può accedere ai dati del modulo. È un bene.
Fai attenzione all'attributo sandbox su <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. L'attributo sandbox limita ciò che l'iframe può fare. Allow-same-origin permette all'iframe di accedere a cookie e session storage, allow-scripts permette l'esecuzione di JavaScript e allow-forms permette l'invio del modulo. Attiva solo i permessi della sandbox che ti servono davvero: il valore predefinito (tutti i permessi negati) è il più sicuro ma rompe la maggior parte dei moduli.
Invio del modulo con i moduli incorporati
Quando l'utente invia un modulo dentro un iframe, l'invio avviene dentro l'iframe e il modulo manda i dati al server del creatore di moduli (non al tuo). Il tuo server non vede mai i dati del modulo: lo strumento li conserva e tu li recuperi dopo con un'API o con una notifica email. Se ti serve più controllo, devi intercettare l'invio. Per farlo lo strumento dei moduli deve inviare un postMessage alla pagina principale con window.parent.postMessage({ type: 'submit', data: formData }, origin);, e poi la pagina principale può fare qualcosa con i dati (inviarli al tuo server, mostrare una pagina di ringraziamento personalizzata e così via).
Il mobile e i moduli incorporati
Sul telefono gli iframe possono essere un problema. Il modulo è più piccolo e più difficile da usare. L'iframe potrebbe non ridimensionarsi bene se non supporta il ridimensionamento automatico.
Un approccio migliore sul telefono è rimandare a un modulo a pagina intera invece di incorporare un iframe. Rileva la dimensione dello schermo e mostra un pulsante con il link sul telefono, ma incorpora il modulo sul computer con if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Impatto sulle prestazioni dei moduli incorporati
Gli iframe aggiungono lavoro. Ogni iframe è una richiesta HTTP separata. Carica il suo HTML, il suo CSS e il suo JavaScript. Questo rallenta la tua pagina.
Carica l'iframe in modo differito, cioè non caricarlo finché l'utente non scorre vicino al modulo, con <iframe data-src="https://..." style="display: none"></iframe> e window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. L'iframe si carica solo quando l'utente sta per vederlo.
Quando usare moduli incorporati e quando le alternative
Usa i moduli incorporati quando non puoi personalizzare il tuo sito (per esempio su un creatore di siti chiuso e ospitato) o quando vuoi tenere lo strumento dei moduli separato dal tuo sito.
Usa i moduli nativi quando controlli il tuo sito e vuoi le prestazioni. Un modulo costruito con la tua tecnologia si carica più in fretta e si integra meglio.
Usa i moduli ospitati (autonomi) quando vuoi la semplicità. Un modulo sul dominio del creatore è il più facile da impostare ma sembra meno professionale.
Come WEMASY gestisce i moduli incorporati
I moduli WEMASY si possono incorporare in siti esterni con gli iframe, con supporto al ridimensionamento automatico. I moduli sono ottimizzati per tutte le dimensioni di schermo. Puoi ricevere gli invii nella tua dashboard WEMASY, via email o con i webhook.
Scopri le opzioni di incorporamento nel tuo piano WEMASY.