Incorporare un flipbook nel tuo sito trasforma i PDF statici in esperienze interattive da sfogliare, che tengono i visitatori coinvolti molto più a lungo. Questo articolo ti guida passo dopo passo: prendi il codice di incorporamento, incollalo su WordPress, Wix, Squarespace o su qualsiasi sito HTML personalizzato, adattalo ai dispositivi mobili, risolvi i problemi più comuni e vai online in pochi minuti.
Incollare un link di download di un PDF nel footer di una pagina web non è una strategia per i contenuti. I visitatori lo ignorano, i browser mobili lo gestiscono male e non hai alcun dato su chi abbia davvero letto il documento. Incorporare un flipbook direttamente nella pagina risolve tutti e tre i problemi in un colpo solo: trasforma un file passivo in un’esperienza di lettura interattiva che resta dentro il tuo sito. Flipbooks AI rende tutto il processo possibile in pochi minuti, senza scrivere una sola riga di codice personalizzato.
Questo articolo spiega esattamente come funziona il codice di incorporamento, offre istruzioni passo dopo passo per creare e incorporare il tuo flipbook, mostra come farlo su WordPress, Wix, Squarespace e siti HTML personalizzati, illustra trucchi per le dimensioni adattive, presenta casi d’uso reali e risponde ai problemi più comuni che si presentano dopo aver incollato il codice.
Molti proprietari di siti sottovalutano quanto attrito crea un link a un PDF. Il visitatore clicca sul link, aspetta che il browser apra un visualizzatore, magari ottiene una finestra di download invece di un’anteprima in pagina, e poi deve orientarsi in un’interfaccia completamente diversa per leggere il contenuto. Su dispositivi mobili, l’esperienza è sistematicamente peggiore. Una parte consistente di questo pubblico chiude semplicemente la scheda.
I contenuti integrati, cioè quelli che vivono nella pagina senza richiedere un’app separata o un download, vengono letti molto più a lungo e più a fondo dei file collegati. Quando qualcuno deve lasciare il tuo sito per consultare un documento, perdi completamente il controllo dell’esperienza. Perdi anche la visibilità sul suo comportamento. Non puoi sapere se ha letto una pagina o tutte e venti, se si è fermato alla sezione dei prezzi o se se n’è andato subito.
Ogni visitatore che clicca su un link PDF e lascia il tuo sito è un visitatore di cui i dati di sessione, il comportamento di scorrimento e la probabilità di tornare scompaiono dalle tue statistiche. Un flipbook incorporato lo tiene sul tuo dominio. Il suo comportamento può essere tracciato. Se stai pagando per portare traffico a una pagina di destinazione e quella pagina rimanda a una brochure in PDF, ogni clic su quel PDF è un segnale di conversione perso.
Un flipbook incorporato si inserisce nel layout della tua pagina. Il visitatore non esce mai. Sfoglia le pagine senza plugin, app o download. Puoi vedere quali pagine ha raggiunto, quanto tempo ci ha passato e se ha completato un modulo di contatto. Questi dati sono disponibili con il piano Professional e cambiano completamente il modo in cui valuti le prestazioni dei tuoi contenuti.
| Formato | Esperienza su mobile | Statistiche | Resta nella pagina | Interattivo |
|---|---|---|---|---|
| Link di download PDF | Scarsa | Nessuna | No | No |
| Visualizzatore PDF incorporato | Variabile | Nessuna | Sì | No |
| Flipbook incorporato | Eccellente | Completa (piano Pro) | Sì | Sì |
| Galleria di immagini | Moderata | Parziali | Sì | Limitata |
Quando pubblichi un flipbook su Flipbooks AI, la piattaforma genera un frammento di incorporamento unico per quel documento. Il frammento è un breve blocco HTML che copi una volta sola e incolli dove vuoi che il flipbook compaia sul tuo sito.
Il tipo di incorporamento più comune usa un elemento iframe. Crea una finestra isolata dentro la tua pagina che carica il flipbook dai server di Flipbooks AI. La tua pagina gestisce il layout circostante e l’iframe gestisce tutto ciò che sta dentro il visualizzatore. Il codice si presenta così:
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Impostare width="100%" fa sì che l’iframe riempia il contenitore che lo ospita, che è l’impostazione predefinita corretta per quasi tutti i layout. Il valore height è quello che la maggior parte delle persone deve regolare in base al design della propria pagina e alle proporzioni del documento.
Alcune piattaforme e alcune configurazioni di sicurezza bloccano gli iframe semplici nei rispettivi editor di pagina, ma consentono gli incorporamenti JavaScript. Il pannello di condivisione di Flipbooks AI offre anche una versione con tag script del codice di incorporamento, che inserisce il visualizzatore in modo dinamico. Entrambe le versioni sono disponibili dal pannello Condividi di qualsiasi flipbook. Se il codice iframe è bloccato dal tuo CMS, passa alla versione con tag script.
💡 Verifica sempre l’incorporamento su un vero dispositivo mobile o con DevTools del browser subito dopo la pubblicazione. Ciò che appare corretto su un desktop da 1440px può traboccare o schiacciarsi su uno schermo di telefono da 375px se il contenitore padre ha una larghezza fissa in pixel.
Il processo qui sotto usa Flipbooks AI. Dal caricamento del PDF all’incorporamento online servono meno di cinque minuti.
Vai su flipbooksai.com e crea un account se non l’hai ancora fatto. Dalla dashboard, clicca su Nuovo flipbook e carica il tuo PDF. La conversione avviene automaticamente. In pochi secondi hai un flipbook con sfoglio di pagina che conserva per intero il contenuto del documento.
A questo punto puoi personalizzare il flipbook prima di incorporarlo:
Nessuna di queste personalizzazioni è obbligatoria prima dell’incorporamento. Tutto ciò che modifichi qui si riflette automaticamente nell’incorporamento online, anche se il codice è già sul tuo sito.
Dall’editor del flipbook, apri la scheda Design. Tra le opzioni disponibili ci sono:
Qui puoi anche attivare i moduli di contatto se sei sul piano Professional. Il modulo compare quando il lettore raggiunge una pagina specifica che hai indicato, raccoglie nome ed email e registra automaticamente le risposte nella tua dashboard delle statistiche.
Apri Condividi dal menu azioni del tuo flipbook. Seleziona la scheda Incorpora. Vedrai il codice iframe già generato per quel documento specifico. Clicca su Copia. Il frammento completo è ora negli appunti, pronto da incollare dove vuoi.
Puoi regolare le dimensioni predefinite di visualizzazione direttamente da questo pannello prima di copiare, se conosci già la misura che l’incorporamento deve avere sulla tua pagina.
Apri l’editor del tuo sito, vai alla pagina dove deve comparire il flipbook e incolla il codice di incorporamento in un blocco HTML, in una sezione di codice personalizzato o in un editor di testo in modalità sorgente/HTML. Salva la pagina e pubblicala. Il flipbook è online.
Il codice di incorporamento è lo stesso su tutte le piattaforme. L’unica variabile è come si accede all’editor HTML in ciascuna di esse.
WordPress usa per impostazione predefinita l’editor a blocchi Gutenberg. Per incorporare un flipbook:
Se usi l’Editor classico, passa alla scheda Testo (non Visuale) e incolla il codice direttamente nel corpo del testo, nel punto esatto in cui vuoi che il flipbook compaia.
✅ Usa il blocco HTML personalizzato, non il blocco Incorpora. Il blocco Incorpora è pensato per URL di social media e servizi video, non per il codice iframe personalizzato.
⚠️ Il piano gratuito di Squarespace limita i blocchi di codice personalizzato. Se il blocco Codice è grigio o bloccato, ti servirà un piano Business o superiore per usarlo.
In Webflow, trascina un elemento Embed dal pannello dei componenti sulla tela e incolla al suo interno il codice. In qualsiasi sito HTML personalizzato, incolla il frammento direttamente nel <body> della pagina, dove vuoi che il flipbook venga visualizzato. Su entrambe le piattaforme non serve alcuna configurazione aggiuntiva.
| Piattaforma | Dove trovare l’editor HTML | Tipo di blocco o elemento |
|---|---|---|
| WordPress | Editor a blocchi Gutenberg | Blocco HTML personalizzato |
| Wix | Pannello Aggiungi, sezione Incorpora | Widget Incorporamenti personalizzati |
| Squarespace | Menu dei blocchi di sezione | Blocco Codice |
| Webflow | Pannello dei componenti | Elemento Embed |
| HTML personalizzato | Direttamente nel codice sorgente della pagina | Incolla dentro il tag body |
| Shopify | Editor del codice del tema | Sezione Liquid o blocco HTML |
Ottenere le dimensioni giuste è il punto in cui sbaglia la maggior parte delle prime incorporazioni. Il flipbook si carica correttamente, ma risulta troppo piccolo per essere letto oppure esce dai bordi su mobile.
Impostare width="100%" è quasi sempre la scelta giusta. Dice all’iframe di riempire qualsiasi contenitore lo ospiti, il che significa che si adatta automaticamente a layout con barra laterale, sezioni a tutta larghezza e colonne strette su mobile.
L’altezza è diversa. Per impostazione predefinita, l’altezza di un iframe non si adegua automaticamente. Un’altezza fissa come height="600" funziona bene su desktop, ma può lasciare troppo spazio vuoto o tagliare il flipbook sugli schermi piccoli. Le opzioni pratiche sono:
padding-bottom: 56.25% e imposta l’iframe a riempimento assoluto al suo interno. In questo modo l’altezza si adatta proporzionalmente alla larghezza su tutte le dimensioni dello schermo.Per il comportamento più affidabile su mobile, usa la tecnica del padding con rapporto d’aspetto:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Questo contenitore produce un visualizzatore 16:9 che si adatta perfettamente a ogni larghezza di schermo, da 320px a 2560px.
L’incorporamento funziona meglio in alcuni contesti rispetto ad altri. Questi sono i casi d’uso che producono costantemente i risultati più forti.
I rivenditori incorporano cataloghi stagionali, lookbook di prodotti e brochure di collezioni direttamente nelle pagine di categoria o nelle pagine di destinazione. Un visitatore che naviga un sito di arredamento può sfogliare l’intera collezione primaverile senza mai lasciare la pagina del prodotto. Il Creatore di cataloghi digitali gratis e il Creatore di flipbook di cataloghi di Flipbooks AI sono pensati proprio per questo flusso di lavoro, con modelli ottimizzati per le impaginazioni di fotografie di prodotto.
Un link alla carta in PDF nascosto nel footer è una delle scelte più sistematicamente sbagliate nel web design per l’ospitalità. Incorporare il menù direttamente nella homepage o in una pagina dedicata fa sì che i visitatori lo vedano nel momento in cui arrivano, senza clic o download aggiuntivi. Il Creatore di flipbook per menù di ristoranti e il Creatore di flipbook di menù producono modelli pensati intorno alla fotografia del cibo e a impaginazioni chiare dei prezzi.
Designer, fotografi e marchi di moda incorporano portfolio in flipbook e lookbook editoriali nelle loro pagine di contatto o di lavori. L’effetto di sfoglio interattivo fa sembrare la presentazione curata e intenzionale, in un modo che una semplice griglia di immagini statiche non riesce a replicare. Il Creatore di lookbook interattivi e il Creatore di portfolio digitali offrono modelli pronti per i professionisti creativi.
Gli agenti immobiliari incorporano brochure degli immobili direttamente nelle pagine degli immobili, così i potenziali acquirenti possono sfogliare planimetrie e fotografie senza scaricare nulla. I team di marketing aziendali incorporano relazioni annuali e presentazioni per gli investitori nelle loro pagine di relazioni con gli investitori, dando un’impressione più professionale di un link a un PDF. Il Creatore di brochure immobiliari e il Creatore di relazioni annuali interattive producono flipbook pronti alla pubblicazione per entrambi i casi d’uso.
| Caso d’uso | Strumento consigliato | Pagina migliore per l’incorporamento |
|---|---|---|
| Catalogo di prodotti | Creatore di cataloghi digitali gratis | Pagina prodotti o negozio |
| Menù del ristorante | Creatore di flipbook per menù di ristoranti | Pagina del menù o homepage |
| Lookbook di moda | Creatore di flipbook di lookbook | Pagina delle collezioni |
| Portfolio creativo | Creatore di portfolio digitali | Pagina dei lavori o chi siamo |
| Brochure immobiliare | Creatore di brochure immobiliari | Pagina dell’immobile in vendita |
| Relazione annuale | Creatore di relazioni annuali interattive | Pagina delle relazioni con gli investitori |
| Programma di un evento | Creatore di flipbook di programmi eventi | Pagina dei dettagli dell’evento |
| Manuale di formazione | Flipbook per manuali di formazione | Pagina delle risorse o delle risorse umane |
La causa più comune è un errore di contenuto misto. Se il tuo sito usa HTTPS e l’URL dell’incorporamento inizia con HTTP, il browser lo blocca senza mostrare alcun messaggio di errore. Tutti gli URL di incorporamento di Flipbooks AI usano HTTPS, quindi il problema si presenta solo se hai modificato a mano l’attributo src dopo aver copiato il codice. Controlla che l’URL inizi con https://.
Un’altra causa frequente è il blocco degli iframe imposto da un plugin di sicurezza di WordPress. Plugin come Wordfence o iThemes Security possono limitare per impostazione predefinita gli iframe provenienti da fonti esterne. Controlla le impostazioni della Content Security Policy oppure aggiungi Flipbooks AI come fonte attendibile nel pannello di configurazione del plugin.
Se l’incorporamento sembra corretto su desktop ma è rotto su mobile, il contenitore padre probabilmente ha una larghezza fissa in pixel. Apri DevTools del browser, ispeziona l’elemento che avvolge l’iframe e cambia la sua larghezza da un valore fisso in pixel a 100%. Poi verifica che anche l’iframe stesso abbia width="100%".
💡 Usa la vista responsive di DevTools del browser per simulare le dimensioni dello schermo del telefono prima di pubblicare. Richiede trenta secondi e individua subito i problemi di dimensione.
L’attributo frameborder="0" nell’iframe rimuove il bordo predefinito del browser. Se intorno all’incorporamento compare ancora spazio, il problema di solito è un margine o un padding impostato sul contenitore padre nel CSS della pagina. Usa DevTools per individuare l’elemento e impostare margin: 0; padding: 0; direttamente su di esso.
Incorporare il flipbook è l’ultimo passo, ma la piattaforma ti dà un controllo notevole su ciò che accade dentro il lettore una volta che è online sul tuo sito.
| Funzione | Piano gratuito | Piano Standard | Piano Professional |
|---|---|---|---|
| Flipbook al mese | Limitati | Illimitati | Illimitati |
| Filigrana sul visualizzatore | Sì | No | No |
| Personalizzazione del brand | No | Sì | Sì |
| Protezione con password | No | Sì | Sì |
| Incorporamento sul sito | Sì | Sì | Sì |
| Statistiche | No | Base | Completa |
| Moduli di contatto | No | No | Sì |
| Download offline | No | No | Sì |
| Video e audio nel flipbook | No | Sì | Sì |
| Visualizzatore adattivo per mobile | Sì | Sì | Sì |
Tutti i piani supportano l’incorporamento sul tuo sito. La differenza sta nell’aspetto dell’esperienza e nei dati che raccogli. Il piano Standard rimuove le filigrane e aggiunge la personalizzazione completa del brand. Il piano Professional aggiunge la dashboard delle statistiche e le funzioni di raccolta contatti che trasformano il flipbook incorporato da semplice vetrina a strumento di conversione misurabile.
Trova tutti i dettagli su flipbooksai.com/pricing per scegliere il piano giusto.
Incorporare un flipbook è uno dei cambiamenti più rapidi e di maggiore impatto che puoi fare a una pagina ricca di contenuti. La configurazione richiede pochi minuti, il risultato funziona su ogni dispositivo e piattaforma, e l’esperienza del visitatore è nettamente migliore di un link a un PDF.
Inizia gratis su Flipbooks AI, carica il tuo primo PDF e incorporalo nel tuo sito già oggi. Se hai già in mente un caso d’uso preciso, sfoglia l’intero elenco degli strumenti per trovare il modello pensato per il tuo tipo di contenuto. Quando sarai pronto ad aggiungere statistiche, raccolta contatti e personalizzazione del brand, confronta i piani e scegli quello che fa per te.
Scegli la tua lingua
