Toimii a fait son lancement en douceur — le service est en ligne et les inscriptions sont ouvertes. Essayer gratuitement →

Toimii est en lancement en douceur : ces guides décrivent donc un service auquel vous pouvez vous inscrire et que vous pouvez utiliser dès aujourd'hui. Quelques éléments sont encore en route — les applications iOS et Android arrivent plus tard en 2026.

Intégrer un formulaire de contact dans React, Vue ou Angular

Les web components font partie du DOM. Insérez la balise directement dans JSX, les templates Vue ou les composants Angular — aucun encapsulage nécessaire.

<!-- Ajoutez ceci n'importe où sur votre page -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Est-ce que ça fonctionne vraiment ?

Oui — c'est un élément personnalisé standard : rien à installer, aucun composant d'encapsulation à écrire. React ne demande aucune configuration. Vue et Angular ont chacun besoin d'une ligne indiquant à leur compilateur que la balise n'est pas la leur — les deux ci-dessous.

Étape par étape

1
Charger le script
Ajoutez la balise script dans le shell HTML depuis lequel votre application est servie — l'index.html dont part votre build, ou la mise en page racine de votre framework.
2
Insérer l'élément personnalisé
Placez la balise à l'endroit où vous voulez le formulaire ; JSX ainsi que les templates Vue et Angular la prennent telle quelle. Copiez-la depuis la page de votre composant dans Toimii — elle se termine par le code propre à ce composant.
3
Compiler et déployer
Compilez et déployez comme d'habitude, puis envoyez-vous un message de test depuis la page publiée plutôt que depuis le serveur de développement — les soumissions ne sont acceptées que depuis le domaine que vous avez indiqué dans Toimii.

Pièges

  • Vue exige que la balise soit signalée comme élément personnalisé, sinon il tente de la résoudre comme un composant Vue et émet un avertissement. isCustomElement prend une fonction — testez le préfixe toimii-, car le reste de la balise varie d'un composant à l'autre.
  • Angular nécessite CUSTOM_ELEMENTS_SCHEMA dans un tableau schemas — celui du composant standalone, ou celui de son NgModule dans une application plus ancienne. Sans cela, le compilateur génère une erreur sur la balise qu'il ne connaît pas.

Questions fréquentes

Ai-je besoin d'un composant d'encapsulation React/Vue/Angular ?

Non. Le script définit l'élément dans le navigateur : votre framework n'a donc qu'à restituer la balise — et rien ne change dans votre build lorsque nous publions une nouvelle version.

Comment indiquer à TypeScript l'existence de l'élément personnalisé ?

Déclarez-le dans l'interface IntrinsicElements de JSX, avec la balise qu'utilise votre propre composant. React 19 a déplacé cet espace de noms et la forme correcte dépend du réglage jsx de votre tsconfig : reprenez la forme actuelle dans le guide de mise à niveau de React. Le formulaire fonctionne sans cela.

Comment passer des props ou une configuration ?

Il n'y a rien à passer. Ce que le formulaire demande et l'endroit où il envoie les messages se définissent dans Toimii et sont intégrés au bundle que charge le script — c'est pourquoi la balise ne porte aucun attribut.

Fonctionne-t-il avec Next.js ou un autre framework React ?

Oui. Avec Next.js, chargez-le avec next/script depuis la mise en page racine — l'endroit documenté pour un script dont tout le site a besoin. Une limite "use client" n'est nécessaire que si vous y attachez un gestionnaire load ou error ; la balise elle-même n'en a pas besoin.

Qu'en est-il du rendu côté serveur ?

L'élément personnalisé s'affiche côté client, comme tout web component. Le rendu côté serveur émet la balise, le navigateur enregistre l'élément au chargement du script, puis le formulaire apparaît. Un bref espace vide peut surgir, généralement imperceptible.

Intégration sur une autre plateforme ?

Les deux mêmes lignes de code, décortiquées pour chaque plateforme.

Prêt à l'essayer ?

Essai gratuit de 30 jours. Sans carte bancaire. Prêt en quelques minutes.

Sans carte bancaire. Prêt en 2 minutes.