Una guida passo passo per incorporare un flipbook interattivo su qualsiasi sito web in pochi minuti. Trovi i codici di incorporamento iframe, l'integrazione con WordPress, le configurazioni per Wix e Squarespace, consigli per il dimensionamento responsive, la risoluzione dei problemi più comuni e casi d'uso reali, dai ristoranti al settore immobiliare.
Se hai passato del tempo a progettare il catalogo, il depliant o la rivista perfetti, l'ultima cosa che vuoi è che finiscano in una cartella che nessuno apre. Incorporare un flipbook direttamente nel tuo sito risolve il problema all'istante. I visitatori sfogliano i tuoi contenuti direttamente nella pagina, senza scaricare nulla e senza lasciare il sito. E con Flipbooks AI, l'intero processo dal PDF al flipbook incorporato richiede meno di cinque minuti.
I PDF statici vanno bene per i download. Ma quando incorpori un flipbook interattivo nel tuo sito, cambi completamente l'esperienza. I visitatori interagiscono con i tuoi contenuti come farebbero con una rivista o un catalogo cartaceo, con sfoglio di pagina fluido, link cliccabili e piena adattabilità ai dispositivi mobili.
I numeri lo confermano. I contenuti interattivi superano costantemente i documenti statici:
| Formato | Tempo medio sulla pagina | Adatto ai dispositivi mobili | Link cliccabili | Nessun download necessario |
|---|---|---|---|---|
| Link a PDF statico | 45 secondi | Parzialmente | No | No |
| Visualizzatore PDF incorporato | 1,2 minuti | Scarso | No | Sì |
| Flipbook incorporato | 3,8 minuti | Sì | Sì | Sì |
Quando i visitatori restano più a lungo, leggono di più e si fidano di più del tuo marchio. Un flipbook incorporato è uno dei modi più semplici per migliorare sensibilmente questa esperienza.
Prima di incorporare qualsiasi cosa, ti servono tre elementi:
Tutto qui. Nessun plugin da installare. Non servono competenze di programmazione. Il codice di incorporamento che Flipbooks AI genera funziona su praticamente tutte le principali piattaforme di siti web.
💡 Consiglio utile: Ottimizza il tuo PDF prima di caricarlo. Comprimi i file grandi fino a meno di 50MB per una conversione più veloce. Usa esportazioni di alta qualità da Canva, InDesign o Illustrator per i migliori risultati visivi.
Questo è il flusso di lavoro principale. Una volta che hai questo codice, l'incorporamento su qualsiasi piattaforma richiede meno di due minuti.
La piattaforma supporta PDF di qualsiasi lunghezza. Che tu stia caricando un volantino di due pagine o un bilancio annuale di 200 pagine, la conversione gestisce tutto senza problemi.
Prima di copiare il codice di incorporamento, dedica qualche minuto a personalizzare l'aspetto:
La personalizzazione influisce su ciò che i visitatori vedono nel momento in cui il flipbook si carica nella tua pagina. Impostalo bene qui, prima di incorporare.
<iframe> generatoIl codice ha questo aspetto:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
Quel singolo blocco di codice è tutto ciò che ti serve. Il resto di questo articolo mostra esattamente dove incollarlo su ogni piattaforma principale.
WordPress alimenta oltre il 40% di internet, quindi iniziamo da questo.
Funziona nell'editor a blocchi standard di WordPress (Gutenberg):
<iframe> di incorporamento nel blocco✅ Buona pratica: imposta la larghezza dell'iframe su
100%e l'altezza su550pxo600pxper un risultato pulito e adattivo, che funziona sia su computer desktop sia su dispositivi mobili.
Se usi Elementor, Divi, Beaver Builder o un altro page builder:
Il flipbook si mostrerà in linea, con la larghezza della colonna o della sezione in cui lo hai inserito.
⚠️ Attenzione: alcuni plugin di sicurezza di WordPress bloccano gli iframe per impostazione predefinita. Se il flipbook non compare, controlla le impostazioni del plugin (Wordfence, iThemes Security) e inserisci in lista consentita il dominio di Flipbooks AI.
Wix gestisce gli iframe in modo leggermente diverso, quindi visualizza sempre in anteprima sia su computer desktop sia su dispositivi mobili prima di andare online.
💡 Consiglio utile: su Squarespace, usa una sezione a larghezza piena per il blocco codice, così il flipbook avrà il massimo spazio sullo schermo.
Per Webflow, aggiungi un componente HTML Embed alla tua tela e incolla il codice. Per i siti HTML statici, incolla l'iframe direttamente nell'HTML della pagina, nel punto in cui vuoi che compaia:
<section class="flipbook-wrapper">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
</section>
Racchiudere l'iframe in un <section> o in un <div> ti dà il controllo CSS su margini, spaziatura interna e colore di sfondo.
Non tutti gli scenari di incorporamento sono uguali. Ecco come si confrontano le opzioni principali:
| Tipo di incorporamento | Ideale per | Adattivo | Codice necessario | Difficoltà |
|---|---|---|---|---|
| iframe standard | La maggior parte dei siti | Sì (larghezza al 100%) | Sì (incolla) | Facile |
| Contenitore adattivo | Mantenere il rapporto d'aspetto | Sì (automatico) | Sì (2 righe di CSS) | Facile |
| Incorporamento a schermo intero | Pagine di destinazione, sezioni hero | Sì | Sì (piccole modifiche) | Medio |
| Popup o lightbox | Pagine prodotto, CTA | Sì | Sì (snippet JS) | Medio |
| Solo link diretto | Email, social, condivisione semplice | N/D | No | Nessuna |
Per la maggior parte dei siti, l'iframe adattivo standard è la scelta giusta. Imposta la larghezza su 100% e l'altezza su un valore fisso in pixel, come 600px. Questo garantisce un comportamento coerente su tutte le dimensioni dello schermo senza CSS aggiuntivo.
Scegliere la dimensione giusta fa la differenza tra un flipbook che sembra parte del tuo sito e uno che stona.
Impostazioni consigliate per i diversi contesti:
| Posizionamento | Larghezza | Altezza | Note |
|---|---|---|---|
| Sezione a larghezza piena | 100% | Da 600 a 700px | Funziona su tutte le dimensioni dello schermo |
| Layout a due colonne | 100% | 500px | Si adatta alla larghezza della colonna |
| Inline in un articolo del blog | 100% | 450px | Bilanciato all'interno dell'articolo |
| Hero o pagina di destinazione | 100% | 750px | Massimo impatto visivo |
| Widget nella barra laterale | 100% | 400px | Compatto ma leggibile |
✅ Buona pratica: verifica sempre il tuo flipbook incorporato su dispositivi mobili dopo la pubblicazione. Lo strumento Incorpora flipbook nel sito genera per impostazione predefinita codice ottimizzato per i dispositivi mobili, ma controlla il risultato reale sul telefono prima di andare online.
Anche un incorporamento semplice può presentare problemi. Ecco i più comuni e come risolverli.
Il flipbook non si vede affatto
Il flipbook compare ma mostra un errore
src dell'iframe sia corretto e non sia stato modificatoIl flipbook è troppo piccolo o tagliato
height nel codice di incorporamento100% se attualmente è un valore fisso in pixel più piccolo del contenitoreIl flipbook non scorre su dispositivi mobili
scrolling="no" al tag iframe per evitare conflitti di scorrimento sui browser mobili⚠️ Attenzione: non incollare mai il codice di incorporamento in un normale blocco di testo o in un campo paragrafo. Verrà mostrato come HTML grezzo invece di far comparire il flipbook. Usa sempre un blocco HTML, codice o incorporamento dedicato.
Poiché l'incorporamento richiede prima di tutto un flipbook, ecco il percorso più rapido dal nulla fino al flipbook incorporato nel tuo sito, usando Flipbooks AI.
Vai su flipbooksai.com/account e crea un account. Non serve una carta di credito per iniziare. Il piano gratuito ti permette di creare e incorporare flipbook subito.
Clicca su Crea nuovo flipbook, carica il tuo PDF e attendi la conversione. La piattaforma gestisce tutto in automatico, compresi il rendering delle pagine, l'ottimizzazione delle immagini e l'adattabilità ai dispositivi mobili.
Usa il pannello di personalizzazione per:
Clicca su Condividi, poi su Incorpora. Scegli le impostazioni di dimensione e copia il codice iframe generato. Lo strumento Incorpora flipbook nel sito rende tutto semplice, senza bisogno di conoscenze tecniche.
Segui i passaggi specifici per la piattaforma descritti sopra. Il tuo flipbook sarà online in meno di due minuti.
Funzioni disponibili per piano:
| Funzione | Free | Standard | Professional |
|---|---|---|---|
| Flipbook illimitati | No | Sì | Sì |
| Brand personalizzato | Limitato | Sì | Sì |
| Protezione con password | No | Sì | Sì |
| Dashboard delle statistiche | No | No | Sì |
| Moduli per la generazione di contatti | No | No | Sì |
| Download offline | No | Sì | Sì |
| Incorporamento di video e audio | No | Sì | Sì |
| Nessuna filigrana | No | Sì | Sì |
Esplora i piani tariffari per trovare quello più adatto a te.
La parte tecnica è la più semplice. Ecco dove i flipbook incorporati fanno davvero la differenza.
Ristoranti e ospitalità
Un ristorante può incorporare un flipbook del menu digitale direttamente nella pagina del menu. I clienti sfogliano la carta completa con foto, prezzi e descrizioni senza scaricare nulla. Aggiornare il menu significa caricare di nuovo un PDF, e il flipbook incorporato si aggiorna automaticamente.
Agenzie immobiliari
Gli agenti immobiliari traggono vantaggio dall'incorporare depliant degli immobili direttamente nelle pagine degli immobili. Gli acquirenti sfogliano planimetrie dettagliate, foto del quartiere e caratteristiche dell'immobile direttamente nel browser. È molto più coinvolgente di un semplice link per scaricare un PDF statico.
E-commerce e vendita al dettaglio
I rivenditori incorporano cataloghi prodotti nelle pagine di categoria o in quelle di destinazione delle campagne. Gli acquirenti sfogliano il catalogo completo con l'aspetto di una rivista cartacea. Per i marchi di moda, un lookbook interattivo incorporato nella homepage crea un impatto visivo immediato.
Aziende e servizi professionali
Le aziende condividono bilanci annuali e presentazioni commerciali incorporandoli nelle pagine dedicate a investitori o clienti. Appare più professionale di un link a un PDF e molto più coinvolgente di un muro di testo.
Istruzione e formazione
I team di formazione incorporano materiali didattici e manuali di formazione nei portali interni o nelle piattaforme LMS. I partecipanti accedono a contenuti formattati e con segnalibri, senza bisogno di software separati.
L'incorporamento è l'opzione più potente, ma Flipbooks AI ti offre diversi modi per condividere:
| Opzione | Caso d'uso migliore | Richiede l'accesso al sito |
|---|---|---|
| Codice di incorporamento (iframe) | Pagine del sito, pagine di destinazione | Sì |
| Link diretto | Email, social media, codici QR | No |
| Link protetto da password | Materiali riservati ai clienti | No |
| Link a schermo intero | Presentazioni, annunci | No |
| Versione scaricata offline | Eventi, assenza di connessione internet | No |
Ogni opzione rimanda allo stesso flipbook pubblicato. Aggiorna il tuo PDF una volta sola e ogni metodo di condivisione riflette la modifica all'istante.
Incorporare un flipbook nel tuo sito non richiede più un programmatore, un plugin o un pomeriggio di risoluzione dei problemi. Con un singolo codice iframe e due minuti di lavoro, i tuoi contenuti passano da un PDF statico a un'esperienza interattiva, adatta al telefono, con cui i visitatori vogliono davvero interagire.
Resta solo da farlo. Inizia gratis su Flipbooks AI, carica il tuo primo PDF e incorporalo nel tuo sito prima della prossima riunione.
Se vuoi vedere cosa è possibile oltre a semplici depliant e menu, esplora tutti gli strumenti per flipbook per trovare modelli pensati per il tuo caso d'uso specifico. Quando sei pronto a rimuovere le filigrane, aggiungere statistiche o attivare i moduli di contatto, consulta i piani tariffari per scegliere l'opzione giusta.
Scegli la tua lingua
