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.

Ajoutez un formulaire de contact à votre site statique : Astro, Hugo, 11ty, Jekyll

Un seul extrait dans votre modèle de mise en page. Fonctionne avec Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown et tous les autres générateurs de sites statiques.

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

Est-ce que ça fonctionne vraiment ?

Oui — et les sites statiques représentent le cas le plus simple. Pas de sandbox de plugin, pas d'éditeur qui supprime les scripts, pas de niveau de forfait. Les deux lignes s'insèrent dans votre modèle de mise en page de la même façon qu'elles s'intégreraient dans n'importe quel fichier HTML.

Étape par étape

Ouvrez votre modèle de mise en page

Ouvrez le modèle de mise en page qui englobe chaque page — _layouts/default.html dans Jekyll, src/layouts/Base.astro dans Astro, layouts/partials/footer.html dans Hugo, _includes/layout.njk dans 11ty.

Collez le code d'intégration

Collez les deux lignes de votre Tableau de bord Toimii à l'intérieur de <body>. Pour n'afficher le formulaire que sur certaines pages, conditionnez l'élément personnalisé avec le système de templates de votre générateur (indicateur en front matter, vérification du slug de page, etc.) ; la balise script peut rester dans la mise en page.

Lancez le serveur de développement

Lancez votre serveur de développement (npm run dev / hugo server / jekyll serve). Le formulaire s'affiche immédiatement — aucune configuration supplémentaire, aucun plugin, aucun @types.

Compilez et déployez

Compilez et déployez comme d'habitude (Netlify, Vercel, GitHub Pages, S3 + CloudFront, ou tout autre hébergeur). Le formulaire continue de fonctionner — le CDN de Toimii prend en charge le reste.

Pièges courants

La plupart des moteurs de rendu Markdown pour sites statiques suppriment le HTML brut par défaut. Dans Jekyll / 11ty / Hugo, activez le HTML brut ou collez l'intégration dans un fichier de mise en page plutôt que dans un fichier de contenu.
Le rechargement à chaud réinjecte parfois le script plusieurs fois pendant le développement. Il s'agit d'un comportement propre à l'environnement de développement ; les builds de production n'émettent la balise qu'une seule fois par page.
Certains hébergeurs ajoutent des en-têtes Content-Security-Policy restrictifs (Netlify et Vercel permettent de les personnaliser). Autorisez cdn.toimii.io et api.toimii.io dans script-src et connect-src.
Ne placez pas l'extrait dans <head>. L'élément personnalisé est une balise de niveau <body> — vous pouvez conserver le script dans <head> si nécessaire (avec async), mais la balise doit se trouver dans <body>.

Questions fréquentes

Comment l'ajouter dans Astro ?

Insérez la balise script dans votre composant de mise en page de base (par ex. src/layouts/Base.astro) et utilisez l'élément personnalisé dans n'importe quel fichier .astro. Astro restitue les éléments inconnus en HTML brut — aucune directive client n'est nécessaire pour la balise elle-même.

Comment l'ajouter dans Hugo ?

Ajoutez l'extrait à votre fichier layouts/partials/footer.html (ou à l'endroit où vous chargez vos scripts personnalisés) et utilisez l'élément personnalisé dans vos fichiers de contenu, modèles de mise en page ou shortcodes.

Comment l'ajouter dans 11ty (Eleventy) ?

Ajoutez l'extrait à votre mise en page de base (_includes/layout.njk par défaut dans Eleventy). Il s'applique à chaque page qui étend la mise en page. Activez le rechargement à chaud ; vous verrez le formulaire dès que le serveur de développement aura reconstruit.

Comment l'ajouter dans Jekyll / GitHub Pages ?

Ajoutez l'extrait à _layouts/default.html (ou à la mise en page de votre choix). Utilisez l'élément personnalisé dans n'importe quel article Markdown en activant le HTML dans le moteur de rendu Markdown.

Cela va-t-il ralentir mon build ?

Non. Le script se charge à l'exécution, pas au moment du build — votre build émet la balise script et le navigateur récupère le composant réel lorsqu'un visiteur accède à la page. Astro, Hugo, 11ty, Jekyll : tous non affectés.

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

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

React / Vue / Angular

Utilisez l'élément personnalisé directement dans JSX, les templates Vue ou les composants Angular. Aucun composant d'encapsulation, aucun package supplémentaire.

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.