Démarrage rapide

La version courte pour celles et ceux qui veulent juste la liste de contrôle. Chaque point renvoie à l’étape correspondante du Tutoriel, qui l’explique avec des captures d’écran.

1. Compte et organisation

• Créez un compte sur app.frontmail.dev avec une adresse e-mail et un mot de passe, Google ou GitHub. Confirmez votre adresse e-mail – d’ici là, vous pouvez explorer, mais pas envoyer.
• Créez votre organisation : renseignez Nom de l’organisation, Pays de facturation (détermine la TVA et la devise) et Qu’allez-vous envoyer ? (Formulaire de contact, E-mails transactionnels ou Autre chose), puis cliquez sur Créer l’organisation.
• Vous démarrez avec le forfait Free et 300 requêtes pour ce mois-ci. Frontmail affiche votre première clé privée – une seule fois. Copiez-la dans votre gestionnaire de mots de passe ou dans les secrets de votre serveur ; vous n’en avez besoin que pour envoyer depuis un serveur. Cliquez ensuite sur Continuer la configuration.

2. Les six étapes de configuration

La page Premiers pas vous guide en six étapes. Vous pouvez passer n’importe laquelle d’entre elles (Passer cette étape, Passer la configuration) et y revenir plus tard.

1. Connecter un service d’envoi – Services d’envoi → Ajouter un service, choisissez un fournisseur, saisissez les identifiants (ou Se connecter avec votre compte pour Gmail / Outlook), puis Vérifier et enregistrer. → Étape 1 du tutoriel
2. Créer un modèle – Modèles → Depuis la galerie → Formulaire de contact → Utiliser ce modèle. À est prérempli avec votre adresse, Reply-To avec celle du visiteur. → Étape 2 du tutoriel (et étape 3 pour une réponse automatique)
3. Autoriser votre site – Sécurité → Sites autorisés → Ajouter un domaine, p. ex. example.com, *.example.com ou localhost:3000, puis Enregistrer. Recommandé : ajoutez les clés de votre propre widget Cloudflare Turnstile gratuit dans Protection contre les bots (Turnstile) et cliquez sur Activer le CAPTCHA pour tous les modèles. → Étape 4 du tutoriel
4. Envoyer un e-mail de test – dans l’éditeur, Envoyer un test. Gratuit, 20 par jour. → Étape 6 du tutoriel
5. L’ajouter à votre site – copiez le code de l’onglet Extraits de code du modèle (HTML / JS, React, Vue, Svelte, Node.js, cURL). → Étape 5 du tutoriel
6. Sécuriser et inviter – activez si vous le souhaitez la validation en deux étapes et invitez vos collègues (Équipe).

3. Envoyer depuis le code

L’onglet Extraits de code renseigne votre clé publique et vos identifiants. Le code navigateur utilise la clé publique (pk_…), les serveurs une clé privée (sk_…) :

Navigateur (npm)

npm install @frontmail/browser

import { init, send } from '@frontmail/browser';

init({ publicKey: 'pk_…' });

const result = await send('svc_…', 'tpl_…', {
  name: 'Jeanne Martin',
  email: 'jeanne@example.com',
  message: 'Bonjour, je souhaiterais un devis.',
});
console.log(result.status); // "queued" (ou "held" si vous n’avez plus de crédits)

Un modèle avec Exiger un CAPTCHA (Turnstile) a aussi besoin d’un jeton Turnstile – voir Créer le formulaire pour un formulaire complet avec sendForm().

Serveur (cURL)

curl https://api.frontmail.dev/v1/send \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer sk_…' \
  -d '{
    "service_id": "svc_…",
    "template_id": "tpl_…",
    "template_params": { "name": "Jeanne", "email": "jeanne@example.com", "message": "Bonjour !" }
  }'

Les requêtes avec une clé privée contournent les contrôles d’origine et de CAPTCHA. Voir la référence de l’API.

L’API répond 202 Accepted avec un message_id ; suivez l’e-mail dans Historique.

Attention

Ne mettez jamais la clé privée (sk_…) dans du code frontend. Voir Clés publiques et privées.

Vous préférez la version guidée ?Le tutoriel construit pas à pas un formulaire de contact avec réponse automatique, captures d’écran à l’appui.