Ces guides décrivent Toimii une fois le service en ligne. Le tableau de bord et la facturation ne sont pas encore disponibles — Toimii sera lancé 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.

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

Est-ce que ça fonctionne vraiment ?

Oui. Les web components font partie du standard DOM — React, Vue et Angular restituent tous les balises inconnues en HTML brut et laissent le navigateur prendre le relais. Aucun npm install, aucun composant d'encapsulation, aucune couche de compatibilité.

Étape par étape

Charger le script

Ajoutez la balise script dans le shell HTML de votre application — public/index.html pour CRA, app/layout.tsx avec next/script pour Next.js, ou index.html dans Vite. Vous pouvez également le charger dynamiquement dans un hook useEffect / onMounted.

Insérer l'élément personnalisé

Utilisez la balise de l'élément personnalisé directement dans JSX (<toimii-contact />), les templates Vue (<toimii-contact />) ou les templates Angular. Le navigateur enregistre l'élément au chargement du script.

Informer votre framework

Utilisateurs de TypeScript — déclarez la balise dans un fichier global.d.ts pour que le compilateur l'accepte. Utilisateurs de Vue — signalez les éléments personnalisés dans vite.config.js. Utilisateurs d'Angular — ajoutez CUSTOM_ELEMENTS_SCHEMA. Chacune de ces modifications se fait en une seule ligne.

Compiler et exécuter

Lancez votre serveur de développement et le formulaire s'affiche. Aucun encapsulage, aucun package @types, aucune étape de compilation supplémentaire.

Pièges courants

Dans React, vous ne pouvez pas passer de props complexes (objets, fonctions) en tant qu'attributs JSX — le composant recevra la chaîne "[object Object]". Utilisez une ref + element.config = {...} après le montage.
Le mode strict de React 18+ monte les composants deux fois en développement. Les web components avec des effets de bord sur connectedCallback peuvent se déclencher deux fois. Les composants de Toimii gèrent ce cas — mais si vous créez les vôtres autour d'eux, soyez vigilant.
Vue 3 nécessite que vous signaliez les éléments personnalisés pour éviter qu'il tente de les résoudre comme des composants Vue. Dans vite.config.js, ajoutez compilerOptions.isCustomElement pour correspondre à /^toimii-/.
Angular nécessite CUSTOM_ELEMENTS_SCHEMA dans le tableau schemas de votre module. Sans cela, le compilateur génère une erreur sur la balise inconnue.

Questions fréquentes

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

Non. Les web components font partie du standard DOM — React, Vue et Angular restituent tous les balises inconnues en HTML brut et laissent le navigateur prendre le relais. Aucun package npm, aucun @types, rien à installer.

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

Oui. Ajoutez ceci dans un fichier global.d.ts : declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Le formulaire fonctionne sans cela — TypeScript cesse simplement de se plaindre.

Comment passer des props ou une configuration ?

Passez-les comme des attributs HTML classiques. Les web components lisent les attributs du DOM de la même façon que React lit les props du JSX. Pour les valeurs dynamiques, utilisez une ref et définissez les propriétés de manière impérative si nécessaire.

Fonctionne-t-il avec Next.js, Remix ou SvelteKit ?

Oui. Avec Next.js, ajoutez la balise script dans app/layout.tsx (avec le composant next/script) ou dans pages/_document.tsx. L'élément personnalisé s'affiche côté client — encapsulez-le dans une limite "use client" si vous utilisez l'App Router.

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 mêmes deux lignes de code, décortiquées pour chaque plateforme.

WordPress

Bloc HTML personnalisé, Block Editor ou Classic Editor. Aucun plugin à installer. Une condition — votre rôle utilisateur doit posséder la capacité unfiltered_html.

Lire le guide complet

Squarespace

Ajoutez un bloc Code sur n'importe quelle page. Nécessite le plan Core (renommé en 2025, anciennement Business) ou supérieur.

Lire le guide complet

Webflow

L'élément Code Embed accepte jusqu'à 50 000 caractères. Le code personnalisé nécessite le plan Basic ou supérieur. Publiez pour prévisualiser.

Lire le guide complet

Wix

Wix isole le widget Intégrer dans un iframe sandbox, nous utilisons donc une méthode fractionnée — le script dans Paramètres → Code personnalisé, la balise via Intégrer un widget. Guide transparent.

Lire le guide complet

Shopify

Ajoutez une section Liquid personnalisée à n'importe quel thème — aucune installation d'application requise. Évitez les pages de paiement, sauf si vous êtes sur Shopify Plus.

Lire le guide complet

Sites statiques

Astro, Hugo, 11ty, Jekyll — deux lignes dans votre modèle de mise en page. Les builds restent rapides.

Lire le guide complet

HTML / Personnalisé

Une simple page HTML suffit. Ouvrez-la dans n'importe quel éditeur de texte, collez, enregistrez, mettez en ligne. Trois étapes et c'est en ligne.

Lire le guide complet

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.