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

Incorpora un modulo di contatto in React, Vue o Angular

I web component fanno parte del DOM. Inserisci il tag direttamente in JSX, nei template Vue o nei componenti Angular — nessun wrapper necessario.

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

Funziona davvero?

Sì. I web component fanno parte dello standard DOM — React, Vue e Angular renderizzano tutti i tag sconosciuti come HTML normale e lasciano fare al browser. Nessun npm install, nessun componente wrapper, nessuno shim di compatibilità.

Passo dopo passo

Carica lo script

Aggiungi il tag script alla shell HTML della tua app — public/index.html in CRA, app/layout.tsx con next/script in Next.js, o index.html in Vite. Oppure caricalo dinamicamente in un hook useEffect / onMounted.

Inserisci l'elemento personalizzato

Usa il tag dell'elemento personalizzato direttamente in JSX (<toimii-contact />), nei template Vue (<toimii-contact />) o nei template Angular. Il browser registra l'elemento quando lo script si carica.

Comunica al tuo framework il nuovo elemento

Utenti TypeScript — dichiara il tag in un file global.d.ts in modo che il compilatore lo accetti. Utenti Vue — contrassegna gli elementi personalizzati in vite.config.js. Utenti Angular — aggiungi CUSTOM_ELEMENTS_SCHEMA. Ognuno è una modifica di una sola riga.

Compila e avvia

Avvia il server di sviluppo e il modulo viene renderizzato. Nessun wrapper, nessun pacchetto @types, nessun passaggio di build aggiuntivo.

Trappole comuni

In React, non puoi passare props complesse (oggetti, funzioni) come attributi JSX — il componente riceverà la stringa "[object Object]". Usa un ref + element.config = {...} dopo il mount.
Lo Strict Mode in React 18+ monta i componenti due volte in sviluppo. I web component con effetti collaterali in connectedCallback potrebbero attivarsi due volte. I componenti di Toimii gestiscono questo — ma se scrivi wrapper personalizzati, tienilo a mente.
Vue 3 richiede di contrassegnare gli elementi personalizzati in modo che non tenti di risolverli come componenti Vue. In vite.config.js, aggiungi compilerOptions.isCustomElement per abbinare /^toimii-/.
Angular richiede CUSTOM_ELEMENTS_SCHEMA nell'array schemas del tuo modulo. Senza di esso, il compilatore segnala un errore sul tag sconosciuto.

Domande frequenti

Ho bisogno di un componente wrapper per React/Vue/Angular?

No. I web component fanno parte dello standard DOM — React, Vue e Angular renderizzano tutti i tag sconosciuti come HTML normale e lasciano fare al browser. Nessun pacchetto npm, nessun @types, niente da installare.

Come dico a TypeScript dell'elemento personalizzato?

Sì. Aggiungi questo a un file global.d.ts: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Il modulo funziona senza — TypeScript smette solo di lamentarsi.

Come passo props o configurazione?

Passali come normali attributi HTML. I web component leggono gli attributi dal DOM nello stesso modo in cui React legge i props dal JSX. Per valori dinamici, usa un ref e imposta le proprietà in modo imperativo se necessario.

Funziona con Next.js, Remix o SvelteKit?

Sì. In Next.js, aggiungi il tag script in app/layout.tsx (con il componente next/script) o in pages/_document.tsx. L'elemento personalizzato viene renderizzato lato client — wrappalo in un boundary "use client" se sei nell'App Router.

E il server-side rendering?

L'elemento personalizzato viene renderizzato lato client, come qualsiasi web component. Il SSR emette il tag, il browser registra l'elemento quando lo script si carica, poi appare il modulo. C'è un breve flash di spazio vuoto — di solito impercettibile.

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

Siti statici

Astro, Hugo, 11ty, Jekyll — le stesse due righe nel template del layout. Le build rimangono veloci.

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

Pronto a provare?

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

Nessuna carta di credito. Pronto in 2 minuti.