Toimii è in soft launch — il servizio è attivo e le iscrizioni sono aperte. Provalo gratis →

Toimii è in soft launch, quindi queste guide descrivono un servizio a cui puoi già iscriverti e che puoi usare oggi. Qualche pezzo è ancora in arrivo: le app per iOS e Android arrivano entro la fine del 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.

<!-- Aggiungi questo ovunque nella tua pagina -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Funziona davvero?

Sì — è un normale elemento personalizzato: niente da installare, nessun wrapper da scrivere. React non richiede nessuna configurazione. Vue e Angular hanno bisogno ciascuno di una riga che dica al proprio compilatore che il tag non è suo — le trovi entrambe qui sotto.

Passo dopo passo

1
Carica lo script
Aggiungi il tag script alla shell HTML da cui viene servita la tua app — l'index.html da cui parte la build o il layout radice del tuo framework.
2
Inserisci l'elemento personalizzato
Metti il tag dove vuoi che compaia il modulo; JSX e i template Vue e Angular lo accettano così com'è. Copialo dalla pagina del tuo componente in Toimii — finisce con il codice proprio di quel componente.
3
Compila e distribuisci
Compila e distribuisci come al solito, poi invia un messaggio di prova dalla pagina pubblicata e non dal server di sviluppo — gli invii vengono accettati solo dal dominio che hai indicato in Toimii.

Trappole

  • Vue richiede che il tag sia contrassegnato come elemento personalizzato, altrimenti prova a risolverlo come componente Vue e segnala un avviso. isCustomElement accetta una funzione — verifica il prefisso toimii-, dato che il resto del tag cambia da un componente all'altro.
  • Angular richiede CUSTOM_ELEMENTS_SCHEMA in un array schemas — quello del componente standalone o, in un'app più vecchia, quello del suo NgModule. Senza, il compilatore segnala un errore sul tag che non conosce.

Domande frequenti

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

No. Lo script definisce l'elemento nel browser, quindi il tuo framework si limita a renderizzare il tag — e nella tua build non cambia nulla quando pubblichiamo una nuova versione.

Come dico a TypeScript dell'elemento personalizzato?

Dichiaralo in IntrinsicElements di JSX, con il tag che usa il tuo componente. React 19 ha spostato quel namespace e la forma corretta dipende dall'impostazione jsx del tuo tsconfig, quindi prendi quella attuale dalla guida all'aggiornamento di React. Il modulo funziona anche senza.

Come passo props o configurazione?

Non c'è niente da passare. Che cosa chiede il modulo e dove recapita gli invii si impostano in Toimii e vengono incorporati nel bundle che lo script carica — ecco perché il tag non ha attributi.

Funziona con Next.js o un altro framework React?

Sì. In Next.js, caricalo con next/script dal layout radice — il posto documentato per uno script che serve a tutto il sito. Un boundary "use client" è necessario solo se ci colleghi un handler load o error; il tag di per sé non ne ha bisogno.

E il server-side rendering?

L'elemento personalizzato viene renderizzato lato client, come qualsiasi web component. L'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.

Pronto a provare?

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

Nessuna carta di credito. Pronto in 2 minuti.