> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Intégration de Resend
> Découvrez comment intégrer Resend à votre application Lovable
## Qu’est-ce que Resend ?
[Resend](https://resend.com/emails) est une API d’e‑mail conçue pour les développeurs. Elle met l’accent sur une haute délivrabilité, une intégration simple et une expérience développeur soignée pour l’envoi d’e‑mails transactionnels et marketing.
## Tutoriel pas à pas
Ce tutoriel vous guide, étape par étape, pour créer un CRM entièrement fonctionnel en moins d’une heure — avec collecte de leads, confirmation par e-mail, inscription à une newsletter et tableau de bord administrateur interne. Vous utiliserez :
* **Lovable** : pour générer l’interface (front-end) et la logique back-end.
* **Supabase** : pour un stockage de données sécurisé et l’authentification.
* **Resend** : pour automatiser et suivre les e-mails transactionnels + marketing.
Commençons.
Utilisez l’IA de Lovable pour générer rapidement une landing page pour votre produit ou service.
**Instructions :**
Créez un nouveau projet Lovable.
Créez une landing page SaaS avec un formulaire de contact qui recueille le nom, l’e-mail et le message.
Inspectez le code généré ou utilisez l’outil de sélection pour ajuster les éléments.
Ajoutez une validation des saisies et un champ `message` pour améliorer l’expérience utilisateur.
Supabase fait office de base de données backend sécurisée.
Créez un compte Supabase gratuit et un nouveau projet.
Dans Lovable, connectez votre projet Supabase à l’aide de la clé API.
* `id` : UUID, clé primaire
* `name` : texte
* `email` : texte
* `message` : texte
* `created_at` : horodatage
Modifiez la logique de soumission du formulaire pour insérer les données dans Supabase.
Appliquez la Row-Level Security (RLS) de Supabase pour limiter l’accès aux seuls utilisateurs authentifiés.
Configurez [Resend]() pour envoyer des emails de confirmation automatisés à chaque fois qu’un prospect envoie le formulaire.
Inscrivez-vous sur [Resend](https://resend.com) et validez votre domaine personnalisé.
* Il vous sera demandé de mettre à jour vos enregistrements DNS (TXT, MX).
* Utilisez des sous-domaines comme `updates.domain.com` pour mieux gérer la réputation de vos emails.
Intégrez la clé API à Lovable via les paramètres d’environnement ou une fonction backend.
Utilisez le SDK de Resend pour envoyer un email de confirmation lors de la soumission du formulaire.
Utilisez [React Email](https://react.email) (également par Resend) pour personnaliser l’apparence de vos emails avec des composants réutilisables.
Autoriser uniquement les utilisateurs authentifiés à afficher et à gérer les prospects.
Créez une route `/admin` dans Lovable.
Activez l’authentification Supabase avec connexion par e‑mail/mot de passe.
Affichez la table `contacts` avec les colonnes :
* Nom
* E-mail
* Aperçu du message
* Date de soumission
Ajoutez un panneau de détail (par exemple, un panneau coulissant) affichant l’intégralité des informations du contact lorsqu’une ligne est cliquée.
Ajoutez une logique de redirection pour que les utilisateurs non authentifiés soient redirigés vers `/login`.
Permettez à votre équipe d’envoyer des relances personnalisées.
Dans le panneau de détails du contact, ajoutez un **champ de texte** et des **modèles prédéfinis** (par ex. « Merci pour votre inscription ! »).
Ajoutez un **bouton d’envoi** connecté à Resend.
Stockez chaque message envoyé dans une table `sent_emails` sur Supabase :
* `contact_id`
* `subject`
* `body`
* `sent_at`
Cela vous donne un journal consultable de toutes les relances.
Utilise les **Audiences** de Resend pour gérer tes abonnés et envoyer des emails de masse.
Ajoute un nouveau formulaire sur ta landing page pour l’inscription à la newsletter.
Lorsqu’il est soumis :
* Crée un contact Resend via l’API
* (Facultatif) Stocke aussi le contact localement dans Supabase
Utilise l’interface de diffusion d’emails de Resend pour concevoir et envoyer des newsletters.
* Logique de désinscription intégrée
* Indicateurs de performance (taux d’ouverture, statut de livraison des emails)
Pour la conformité (par ex. RGPD), envisage de mettre en place un processus de **double opt-in**.
Vous voulez améliorer l’authentification par e-mail par défaut de Supabase (qui limite à 4 e-mails par heure) ?
Accédez à l’[intégration Supabase de Resend](https://resend.com/integrations/supabase).
Authentifiez-vous avec votre projet Supabase.
Choisissez votre domaine et le nom ainsi que l’adresse e-mail de l’expéditeur.
Resend configure automatiquement SMTP et remplace le système d’e-mails par défaut de Supabase.
Vous pouvez maintenant personnaliser les modèles d’e-mails d’authentification depuis le tableau de bord Supabase.
* **Gestion des erreurs** : Lovable peut parfois afficher des erreurs de build qui sont en fait des faux positifs. Teste toujours ta fonctionnalité en conditions réelles.
* **Retour arrière avec Supabase** : Si tu reviens à une version précédente du code dans Lovable, pense à supprimer manuellement les policies ou migrations Supabase associées — elles ne sont pas annulées automatiquement.
* **Conseils pour la délivrabilité** :
* Utilise des sous-domaines pour isoler ta réputation.
* Inclue toujours une version en texte brut de ton email.
* Surveille les performances de tes emails avec le tableau de bord d’insights de Resend.
En moins d’une heure, vous avez créé un CRM moderne avec :
* Une landing page et un formulaire de contact
* Le stockage des prospects dans une base de données
* Des confirmations par e-mail automatisées
* Un tableau de bord d’administration pour la gestion des prospects
* Des réponses par e-mail personnalisées
* Des campagnes de newsletter
* L’authentification et la vérification de l’adresse e-mail
## Vous voulez aller plus loin ?
* Ajoutez la prise en charge des **e-mails programmés** via des tâches cron Supabase
* Créez des **workflows d'automatisation** pour déclencher des e-mails en fonction des étapes de vos leads
* Soignez le design de votre interface pour renforcer la confiance dans votre marque et améliorer vos taux de conversion
## FAQ sur l’intégration de Resend
Resend est une API d’email conçue pour les développeurs. Elle met l’accent sur une haute délivrabilité, une intégration simple et une expérience développeur fluide pour l’envoi d’emails transactionnels et marketing.
Non. Vous pouvez réaliser l’intégralité de la configuration CRM avec le **niveau gratuit de Resend**, qui permet d’envoyer des emails depuis un domaine vérifié et de gérer jusqu’à 3 000 contacts pour les emails marketing.
Allez dans Resend → **Domains** → ajoutez votre domaine. Des enregistrements DNS (TXT, MX) à ajouter via votre fournisseur DNS (par exemple Cloudflare, Namecheap) vous seront fournis. Une fois ajoutés, cliquez sur **Verify**.
Utilisez un sous-domaine comme `updates.yourdomain.com` pour isoler votre réputation d’envoi.
Il existe quelques raisons fréquentes :
* Vous n’avez pas vérifié votre domaine
* Votre email ne comporte pas de version en texte brut
* Vous envoyez depuis une adresse générique comme `onboarding@resend.dev`
* Vous ne suivez pas les bonnes pratiques (par exemple, absence de lien de désinscription dans les emails marketing)
Utilisez le panneau **Deliverability Insights** de Resend pour obtenir des recommandations exploitables.
Oui. Utilisez [React Email](https://react.email/) — une bibliothèque open source créée par l’équipe Resend — pour concevoir des emails stylés et responsives avec des composants React.
Resend prend en charge **les deux** :
* Les **emails transactionnels** (confirmation, réinitialisation, notifications) via l’API ou le SDK.
* Les **emails marketing** via la fonctionnalité **Broadcast** et les **Audiences**.
Vous pouvez créer, prévisualiser et suivre vos campagnes depuis le tableau de bord.
Utilisez les **Audiences** :
* Ajoutez des contacts manuellement, via un fichier CSV ou par programmation avec l’API.
* Chaque Audience possède un ID unique que vous pouvez utiliser pour associer les abonnements.
* Les utilisateurs peuvent se désabonner automatiquement via le lien de désinscription intégré de Resend.
Pas par défaut, mais vous pouvez l’implémenter manuellement :
1. À la soumission du formulaire, envoyez un email de confirmation initial.
2. Demandez aux utilisateurs de cliquer sur un lien.
3. Au clic, confirmez leur abonnement et ajoutez-les à votre Audience Resend.
Pas encore. Resend ne prend actuellement pas en charge les campagnes drip ni les séquences automatisées.
Contournement :
Utilisez les **Supabase Cron Jobs** pour planifier des tâches qui déclenchent des emails Resend à intervalles définis.
Utilisez l’intégration officielle Supabase proposée par Resend :
1. Authentifiez-vous auprès de votre projet Supabase.
2. Indiquez un domaine et un nom d’expéditeur.
3. Resend configure automatiquement les emails d’authentification Supabase pour utiliser votre compte Resend.
Resend gère automatiquement les désabonnements :
* Vous devez inclure un lien de désabonnement dans les emails de type broadcast.
* Lorsqu’un utilisateur se désabonne, il est retiré de l’Audience sélectionnée.
* C’est obligatoire pour respecter la conformité email (par exemple, CAN-SPAM, RGPD).
Vous voulez améliorer l’authentification par e-mail par défaut de Supabase (qui limite à 4 e-mails par heure) ?
* **Gestion des erreurs** : Lovable peut parfois afficher des erreurs de build qui sont en fait des faux positifs. Teste toujours ta fonctionnalité en conditions réelles.
* **Retour arrière avec Supabase** : Si tu reviens à une version précédente du code dans Lovable, pense à supprimer manuellement les policies ou migrations Supabase associées — elles ne sont pas annulées automatiquement.
* **Conseils pour la délivrabilité** :
* Utilise des sous-domaines pour isoler ta réputation.
* Inclue toujours une version en texte brut de ton email.
* Surveille les performances de tes emails avec le tableau de bord d’insights de Resend.