Queste guide descrivono Toimii dopo il lancio. Il pannello e la fatturazione non sono ancora disponibili — Toimii sarà disponibile nel 2026.

Aggiungi un modulo di contatto al tuo sito statico: Astro, Hugo, 11ty, Jekyll

Un unico codice nel template del layout. Funziona con Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown e qualsiasi altro generatore di siti statici.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Funziona davvero?

Sì — e i siti statici sono il caso più semplice. Nessun sandbox di plugin, nessun editor che elimina gli script, nessun piano richiesto. Le due righe vanno nel template del layout nello stesso modo in cui andrebbero in qualsiasi file HTML.

Passo dopo passo

Apri il template del layout

Apri il template del layout che avvolge ogni pagina — _layouts/default.html in Jekyll, src/layouts/Base.astro in Astro, layouts/partials/footer.html in Hugo, _includes/layout.njk in 11ty.

Incolla il codice di incorporamento

Incolla le due righe dal tuo pannello Toimii dentro <body>. Per mostrare il modulo solo su certe pagine, condiziona l'elemento personalizzato con il sistema di templating del tuo generatore (flag front matter, controllo slug pagina, ecc.); il tag script può restare nel layout.

Avvia il server di sviluppo

Avvia il server di sviluppo (npm run dev / hugo server / jekyll serve). Il modulo viene renderizzato immediatamente — nessuna configurazione aggiuntiva, nessun plugin, nessun @types.

Compila e distribuisci

Compila e distribuisci come al solito (Netlify, Vercel, GitHub Pages, S3 + CloudFront, dovunque ospiti il tuo sito). Il modulo continua a funzionare — il CDN di Toimii fa il resto.

Trappole comuni

La maggior parte dei renderer Markdown per siti statici elimina l'HTML grezzo per impostazione predefinita. In Jekyll / 11ty / Hugo, abilita l'HTML grezzo oppure incolla l'incorporamento in un file di layout invece che in un file di contenuto.
Il hot-reload a volte re-inietta lo script più volte durante lo sviluppo. È una particolarità solo in sviluppo; le build di produzione emettono il tag una volta per pagina.
Alcuni host aggiungono intestazioni Content-Security-Policy aggressive (Netlify e Vercel ti permettono di personalizzarle). Autorizza cdn.toimii.io e api.toimii.io in script-src e connect-src.
Non mettere il codice in <head>. L'elemento personalizzato è un tag a livello body — tieni lo script in <head> se vuoi (con async), ma il tag deve stare in <body>.

Domande frequenti

Come lo aggiungo in Astro?

Inserisci il tag script nel tuo componente Layout base (es. src/layouts/Base.astro) e usa l'elemento personalizzato in qualsiasi file .astro. Astro renderizza gli elementi sconosciuti come HTML normale — non è necessaria nessuna direttiva client per il tag stesso.

Come lo aggiungo in Hugo?

Aggiungi il codice al tuo layouts/partials/footer.html (o dovunque carichi script personalizzati) e usa l'elemento personalizzato nei file di contenuto, nei template di layout o negli shortcode.

Come lo aggiungo in 11ty (Eleventy)?

Aggiungi il codice al tuo layout base (_includes/layout.njk nelle impostazioni predefinite di Eleventy). Si applica a ogni pagina che estende il layout. Tieni attivo il hot-reload; vedrai il modulo non appena il server di sviluppo ricostruisce.

Come lo aggiungo in Jekyll / GitHub Pages?

Aggiungi il codice a _layouts/default.html (o al layout che preferisci). Usa l'elemento personalizzato in qualsiasi post Markdown abilitando html nel renderer Markdown.

Rallenta la mia build?

No. Lo script si carica a runtime, non durante la build — la tua build emette il tag script e il browser recupera il componente effettivo quando un visitatore apre la pagina. Astro, Hugo, 11ty, Jekyll: tutti invariati.

Stai incorporando su una piattaforma diversa?

Le stesse due righe di codice, spiegate per ogni piattaforma.

WordPress

Blocco HTML personalizzato, Block Editor o Classico. Nessuna installazione di plugin. Una cosa da sapere — il tuo ruolo utente deve avere la capacità unfiltered_html.

Leggi la guida completa

Squarespace

Inserisci un Blocco Codice su qualsiasi pagina. Richiede il piano Core (rinominato nel 2025 da Business) o superiore.

Leggi la guida completa

Webflow

L'elemento Code Embed può contenere fino a 50.000 caratteri. Il codice personalizzato richiede il piano Basic o superiore. Pubblica per vedere il risultato.

Leggi la guida completa

Wix

Wix esegue il widget Embed in un iframe sandbox, quindi usiamo un metodo diviso — script in Impostazioni → Codice personalizzato, tag tramite Incorpora un widget. Guida onesta.

Leggi la guida completa

Shopify

Aggiungi una sezione Custom Liquid a qualsiasi tema — nessuna app da installare. Le pagine di checkout richiedono Shopify Plus.

Leggi la guida completa

HTML / Personalizzato

Basta una pagina HTML semplice. Aprila in un editor di testo, incolla, salva, carica. Tre passi e sei online.

Leggi la guida completa

React / Vue / Angular

Usa l'elemento personalizzato direttamente in JSX, nei template Vue o nei componenti Angular. Nessun componente wrapper, nessun pacchetto aggiuntivo.

Leggi la guida completa

Pronto a provare?

30 giorni di prova gratuita. Nessuna carta di credito. Pronto in pochi minuti.

Nessuna carta di credito. Pronto in 2 minuti.