Exemples

Le dépôt public des SDK frontmail-dev/frontmail-js contient un exemple exécutable pour chaque SDK dans le répertoire examples/. Chacun est un formulaire de contact avec erreurs de validation, gestion de l’état « retenu » et Turnstile – le même parcours que le tutoriel du formulaire de contact.

Exemple	Stack	Montre
examples/vanilla	HTML simple + @frontmail/browser (CDN)	sendForm, Turnstile, pièce jointe, interrogation de getStatus
examples/react	Vite + React + @frontmail/react	FrontmailProvider, FrontmailForm, useSendEmail, paramètres typés
examples/react-native	Expo + React Native + @frontmail/react-native	FrontmailProvider, useSendEmail, TurnstileWebView, limitRate avec AsyncStorage
examples/vue	Vite + Vue 3 + @frontmail/vue	plugin, <FrontmailForm>, useSendEmail
examples/svelte	Vite + Svelte 5 + @frontmail/svelte	createFrontmail, use:frontmailForm
examples/node	Node.js + @frontmail/node	send, sendBatch, history, clés d’idempotence

Lancer un exemple

git clone https://github.com/frontmail-dev/frontmail-js.git
cd frontmail-js
corepack enable                 # pnpm 10
pnpm install
pnpm build                      # compile les SDK utilisés par les exemples
echo "VITE_FRONTMAIL_PUBLIC_KEY=pk_…" > examples/react/.env.local   # + ID du service et ID du modèle
pnpm --filter @frontmail/example-react dev

Le README de chaque exemple liste les paramètres de modèle attendus. Le moyen le plus rapide d’obtenir un modèle correspondant est le Formulaire de contact de la galerie.

Applications natives : Android (Kotlin), iOS (Swift) et Flutter

Les SDK natifs ont leurs propres dépôts publics et n’ont pas encore de projet d’exemple. La page de chaque SDK décrit pas à pas le même parcours de formulaire de contact – installation, envoi, état retenu, statut de distribution et Turnstile dans une WebView – avec du code à coller dans votre application :

SDK	Dépôt	Montre
Android (Kotlin) – dev.frontmail:frontmail	frontmail-dev/frontmail-kotlin	send depuis viewModelScope, AcceptedStatus.HELD, getStatus, Turnstile dans une WebView
iOS et plateformes Apple (Swift) – paquet Frontmail	frontmail-dev/frontmail-swift	send avec async/await, .held, statut de distribution, Turnstile dans une WKWebView (SwiftUI + UIKit)
Flutter & Dart – frontmail sur pub.dev	frontmail-dev/frontmail-flutter	send, DeliveryStatus.held, statut de distribution, Turnstile dans webview_flutter (un widget de formulaire complet)

Tous nécessitent l’activation d’Autoriser les applications mobiles et n’acceptent que la clé publique. Les applications multiplateformes peuvent utiliser @frontmail/react-native et le projet examples/react-native ci-dessus.

Extraits de code du tableau de bord

Chaque page de modèle du tableau de bord comporte un onglet Extraits de code qui génère du code prêt à coller pour JavaScript natif, React, Vue, Svelte, Node et cURL, avec vos identifiants et tous les paramètres du modèle (types et valeurs d’exemple compris) déjà renseignés.

Remarques par framework

• Next.js / Nuxt / SvelteKit : envoyez depuis des composants client avec la clé publique, ou depuis des server actions / routes API avec la clé privée et @frontmail/node.
• Générateurs de sites statiques (Astro, Hugo, Eleventy, Jekyll) : utilisez la version CDN et sendForm.
• WordPress et outils no-code : collez l’extrait CDN dans un bloc HTML personnalisé.
• Applications mobiles : utilisez les SDK natifs pour Android (Kotlin), iOS (Swift) et Flutter, ou @frontmail/react-native, avec la clé publique, et activez Autoriser les applications mobiles, ou appelez l’API REST depuis votre backend avec une clé privée. Ne mettez jamais de clé privée dans une application.