Incorporare i moduli Fillio

Tre modi per aggiungere un modulo Fillio a qualsiasi sito web: Standard, Popup e Pagina intera.

Dove trovare il suo codice

Apra il modulo, vada alla scheda Condividi e scelga Incorpora. Fillio genera lo snippet con l'ID del suo modulo e le opzioni che ha scelto già inseriti: gli esempi qui sotto mostrano il risultato.

Modalità di incorporamento

Scelga la modalità più adatta al suo layout.

Standard

Incorporamento inline all'interno di una sezione di pagina

Popup

Si apre come overlay modale quando attivato

Pagina intera

Occupa un'intera pagina HTML

Incorporamento standard

Incolli il codice in qualsiasi pagina HTML. Il modulo viene visualizzato come iframe inline.

Codice di incorporamento

<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" loading="lazy"></iframe>
<script>var d=document,w="https://fillio.so/widgets/embed.js",v=function(){"undefined"!=typeof Fillio?Fillio.loadEmbeds():d.querySelectorAll("iframe[data-fillio-src]:not([src])").forEach((function(e){e.src=e.dataset.fillioSrc}))};if("undefined"!=typeof Fillio)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

Il ridimensionamento automatico arriva dallo script del widget incluso nello snippet. Lo mantenga e l'iframe crescerà e si ridurrà insieme al modulo, mentre chi risponde passa da una pagina all'altra.

Senza lo script

Se preferisce non caricare il widget, usi un semplice iframe con un'altezza fissa. Nulla si ridimensiona, quindi scelga un'altezza che contenga la sua pagina più lunga.

<iframe src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" style="border: 1px solid #e5e7eb; border-radius: 8px;"></iframe>

Opzioni

Aggiunga questi parametri all'URL di incorporamento per personalizzare il comportamento.

Parametro	Descrizione
?hideTitle=1	Nasconde il titolo del modulo all'interno dell'incorporamento
?transparentBackground=1	Rimuove lo sfondo bianco dal frame di incorporamento
?dynamicHeight=1	Ridimensiona l'iframe automaticamente per adattarsi all'altezza del modulo

Incorporamento popup

Attivi il modulo da qualsiasi pulsante o link. Richiede il caricamento dello script del widget Fillio.

1. Aggiungere lo script

<script async src="https://fillio.so/widgets/embed.js"></script>

2. Attivare con un pulsante

<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>

Qualsiasi elemento con data-fillio-open riceve lo stile predefinito dei pulsanti Fillio. Aggiunga una sua classe per sovrascriverlo.

Attributo	Descrizione
data-fillio-open	ID del modulo (obbligatorio)
data-fillio-width	Larghezza del popup in pixel
data-fillio-hide-title	Impostare a 1 per nascondere il titolo del modulo

3. Attivare con JavaScript

Fillio.openPopup('YOUR_FORM_ID', {
  width: 500,
  hideTitle: false,
  onOpen: function () {},
  onClose: function () {}
});

Chiuda un popup dal suo codice in qualsiasi momento.

Fillio.closePopup('YOUR_FORM_ID');

Aprire da un link

Un frammento di URL apre il popup non appena la pagina si carica, il che rende facile raggiungere il modulo da una voce di menu, da un messaggio o da un'altra pagina.

<a href="https://your-site.com/page#fillio-open=YOUR_FORM_ID&fillio-width=600">Open Form</a>

Comportamento del popup

Un popup è largo 500 px se non ne imposta la larghezza, e non supera mai il 90% della finestra in nessuna delle due direzioni. Un clic sullo sfondo o il tasto Esc lo chiude, e onOpen e onClose vengono eseguiti alle due estremità.

Incorporamento a pagina intera

Usi questo template HTML quando il modulo deve occupare l'intero viewport.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Form</title>
    <script async src="https://fillio.so/widgets/embed.js"></script>
    <style type="text/css">
      html { margin: 0; height: 100%; overflow: hidden; }
      iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; }
    </style>
  </head>
  <body>
    <iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="Form"></iframe>
  </body>
</html>

Opzioni

Aggiunga questi parametri all'URL di incorporamento per personalizzare il comportamento.

Parametro	Descrizione
?transparentBackground=1	Rimuove lo sfondo bianco dal frame di incorporamento

Suggerimento

Un modulo incorporato si comporta esattamente come quello ospitato: logica condizionale, pagine multiple e il tema del modulo funzionano tutti dentro l'iframe.