> ## 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.

# Integrazione di Resend

> Scopri come integrare Resend nella tua applicazione Lovable

<div id="what-is-resend">
  ## Che cos'è Resend?
</div>

[Resend](https://resend.com/emails) è un'API per email pensata per gli sviluppatori. È focalizzata su un'elevata affidabilità di recapito, sulla facilità di integrazione e su un'esperienza per sviluppatori semplice e lineare per l'invio di email transazionali e di marketing.

<div id="step-by-step-tutorial">
  ## Tutorial passo dopo passo
</div>

<iframe width="100%" height="315" src="https://www.youtube.com/embed/5ZL744_Wxjo?si=qrKlOL_1fAnz7rgc" title="Lettore video di YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

Questo tutorial ti guida nella creazione di un CRM completamente funzionante in meno di un'ora, con acquisizione dei lead, conferma via email, iscrizione alla newsletter e una dashboard amministrativa interna. Utilizzerai:

* **Lovable**: per generare il front end e la logica del backend.
* **Supabase**: per l'archiviazione sicura dei dati e l'autenticazione.
* **Resend**: per automatizzare e monitorare le email transazionali e di marketing.

Iniziamo.

<Steps>
  <Step title="Crea una landing page con un form di contatto">
    Usa l'AI di Lovable per generare rapidamente una landing page per il tuo prodotto o servizio.

    **Istruzioni:**

    <Steps>
      <Step title="Nuovo progetto Lovable">
        Crea un nuovo progetto Lovable.
      </Step>

      <Step title="Istruzione:">
        <Info>
          Crea una landing page SaaS con un modulo di contatto che raccolga nome, email e messaggio.
        </Info>

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/landing-page-lovable-project.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=5846c08eb44420537b1d4cd76eccfc4d" alt="Landing Page Progetto Lovable Pn" width="1888" height="929" data-path="images/landing-page-lovable-project.png" />
      </Step>

      <Step title="Esamina il codice generato">
        Esamina il codice generato oppure usa lo strumento di selezione per apportare modifiche agli elementi.
      </Step>

      <Step title="Aggiungi la validazione degli input">
        Aggiungi la validazione degli input e un campo `message` per migliorare l'esperienza utente.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/email-resend-form.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=dd4374f24288b7b63113b85a41342d51" alt="Modulo Email Resend Pn" width="1882" height="935" data-path="images/email-resend-form.png" />
      </Step>
    </Steps>
  </Step>

  <Step title="Salvare gli invii del form in Supabase">
    Supabase è il tuo database backend sicuro.

    <Steps>
      <Step title="Account Supabase">
        Crea un account Supabase gratuito e un nuovo progetto.
      </Step>

      <Step title="Chiave API">
        In Lovable, collega il tuo progetto Supabase tramite la chiave API.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/supabase-resend-email.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=bfcfb309ad7382c5dadfaca8a3d8b62e" alt="Supabase Resend Email Pn" width="1509" height="775" data-path="images/supabase-resend-email.png" />
      </Step>

      <Step title="Crea una tabella `contacts` con:">
        * `id`: UUID, chiave primaria
        * `name`: text
        * `email`: text
        * `message`: text
        * `created_at`: timestamp
      </Step>

      <Step title="Logica di invio">
        Modifica la logica di invio del modulo per inserire i dati in Supabase.
      </Step>

      <Step title="RLS">
        Applica la Row-Level Security (RLS) di Supabase in modo da limitare l'accesso ai soli utenti autenticati.
      </Step>
    </Steps>
  </Step>

  <Step title="Inviare email di conferma con Resend">
    Configura [Resend]() per inviare email di conferma automatiche ogni volta che un lead invia il modulo.

    <Steps>
      <Step title="Registrati su Resend">
        Registrati su [Resend](https://resend.com) e verifica il tuo dominio personalizzato.

        * Ti verrà chiesto di aggiornare i record DNS (TXT, MX).
        * Usa sottodomini come `updates.domain.com` per gestire meglio la reputazione delle email.
      </Step>

      <Step title="Chiave API">
        Integra la chiave API in Lovable tramite le impostazioni delle variabili di ambiente o una funzione backend.
      </Step>

      <Step title="SDK">
        Usa l'SDK di Resend per inviare un'email di conferma all'invio del modulo.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/confirmation-email-submission-resend.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=7f497a71fa1d45b928b0a344150be03d" alt="Invio email di conferma Resend Pn" width="1499" height="769" data-path="images/confirmation-email-submission-resend.png" />
      </Step>

      <Step title="Opzionale: React Email">
        Usa [React Email](https://react.email) (sempre di Resend) per personalizzare l'aspetto delle tue email con componenti riutilizzabili.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/customize-email-resend.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=65049aae334657f7a5c8c818df90f073" alt="Personalizza email Resend Pn" width="1501" height="772" data-path="images/customize-email-resend.png" />
      </Step>
    </Steps>
  </Step>

  <Step title="Crea un pannello di amministrazione sicuro">
    Consenti solo agli utenti autenticati di visualizzare e gestire i lead.

    <Steps>
      <Step title="Route di amministrazione">
        Crea una route `/admin` in Lovable.
      </Step>

      <Step title="Autenticazione Supabase">
        Abilita l'autenticazione Supabase con accesso con email e password.
      </Step>

      <Step title="Contatti">
        Mostra la tabella `contacts` con le seguenti colonne:

        * Nome
        * Email
        * Anteprima del messaggio
        * Data di invio
      </Step>

      <Step title="Dettaglio completo del contatto">
        Aggiungi un pannello dei dettagli (ad esempio, un pannello a scorrimento) che mostri tutti i dettagli del contatto quando si fa clic su una riga.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/crm-resend-email.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=cd2a6a56099376bde8a464496d61d8fd" alt="Crm Resend Email Pn" width="972" height="683" data-path="images/crm-resend-email.png" />
      </Step>

      <Step title="Logica di reindirizzamento">
        Aggiungi la logica di reindirizzamento in modo che gli utenti non autenticati vengano reindirizzati a `/login`.
      </Step>
    </Steps>
  </Step>

  <Step title="Abilita risposte email personalizzate da parte dell’amministratore">
    Consenti al tuo team di inviare follow-up personalizzati.

    <Steps>
      <Step title="Pannello dettagli contatto">
        Nel pannello dei dettagli del contatto, aggiungi un **campo di testo** e **modelli predefiniti** (ad esempio, "Grazie per esserti registrato!").
      </Step>

      <Step title="Aggiungi pulsante di invio">
        Aggiungi un **pulsante di invio** collegato a Resend.
      </Step>

      <Step title="Archivia i messaggi inviati">
        Archivia ogni messaggio inviato in una tabella `sent_emails` in Supabase:

        * `contact_id`
        * `subject`
        * `body`
        * `sent_at`

        In questo modo avrai un registro ricercabile di tutti i follow-up.
      </Step>
    </Steps>
  </Step>

  <Step title="Aggiungi un modulo di iscrizione alla newsletter">
    Usa **Audiences** di Resend per gestire gli iscritti e inviare email broadcast.

    <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/subscription-newsletter-resend.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=9e0da4ae15c51b0b0ad8e76b25550f81" alt="Subscription Newsletter Resend Pn" width="538" height="678" data-path="images/subscription-newsletter-resend.png" />

    <Steps>
      <Step title="Aggiungi un nuovo form">
        Aggiungi un nuovo modulo sulla tua landing page per l'iscrizione alla newsletter.
      </Step>

      <Step title="Contatto Resend">
        Al momento dell'invio:

        * Crea un contatto Resend tramite l'API
        * (Opzionale) Salva anche il contatto localmente in Supabase
      </Step>

      <Step title="Design">
        Usa l'interfaccia per email broadcast di Resend per progettare e inviare newsletter.

        * Logica integrata di annullamento dell'iscrizione
        * Dati sulle prestazioni (tassi di apertura, stato di consegna)
      </Step>

      <Step title="Verifica di conformità!">
        Per essere conforme alle normative (ad es. GDPR), valuta l'implementazione di un flusso di **double opt-in**.
      </Step>
    </Steps>
  </Step>

  <Step title="BONUS: Collegare Resend a Supabase Auth">
    <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/send-batch-emails-gdpr-resend.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=076678596badb62963bde9998b7dc940" alt="Send Batch Emails Gdpr Resend Pn" width="687" height="772" data-path="images/send-batch-emails-gdpr-resend.png" />

    Vuoi migliorare il sistema di autenticazione via email predefinito di Supabase (che ti limita a 4 email/ora)?

    <Steps>
      <Step title="Resend Supabase">
        Vai all’[integrazione Supabase di Resend](https://resend.com/integrations/supabase).
      </Step>

      <Step title="Autenticazione">
        Collega il tuo Progetto Supabase.
      </Step>

      <Step title="Configurazione del dominio">
        Scegli il tuo dominio e il nome/indirizzo email del mittente.
      </Step>

      <Step title="SMTP">
        Resend configura automaticamente l’SMTP e sostituisce il sistema email predefinito di Supabase.
      </Step>

      <Step title="Personalizzazione">
        Ora puoi personalizzare i modelli delle email di autenticazione dalla dashboard di Supabase.
      </Step>
    </Steps>
  </Step>

  <Step title="Ritocchi finali e buone pratiche">
    <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/audience-resend.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=cedef9668d164fadb1ef1375cff459e1" alt="Audience Resend Pn" width="1200" height="766" data-path="images/audience-resend.png" />

    * **Gestione degli errori**: Lovable potrebbe mostrare errori di build che sono falsi positivi. Verifica sempre dal vivo la funzionalità.
    * **Ripristino con Supabase**: Se ripristini il codice in Lovable, ricordati di eliminare manualmente le policy o le migrazioni associate in Supabase: non vengono annullate automaticamente.
    * **Suggerimenti per la deliverability delle email**:
      * Usa sottodomini per isolare la reputazione del mittente.
      * Includi sempre una versione in testo semplice della tua email.
      * Monitora le prestazioni delle email tramite la dashboard degli insight di Resend.
  </Step>

  <Step title="Tutto fatto! 🎉">
    In meno di un'ora, hai costruito un CRM moderno con:

    * Una landing page e un modulo di contatto
    * Archiviazione dei lead tramite database
    * Conferme email automatizzate
    * Dashboard di amministrazione per la gestione dei lead
    * Risposte email personalizzate
    * Invio di newsletter
    * Autenticazione e verifica dell'email
  </Step>
</Steps>

<div id="want-to-go-further">
  ## Vuoi fare un passo in più?
</div>

* Aggiungi il supporto per l’invio programmato di **email** tramite cron job di Supabase
* Crea **flussi di automazione** per inviare email in base alle fasi dei lead
* Personalizza la tua interfaccia utente per aumentare la fiducia nel brand e le conversioni

<div id="resend-integration-faq">
  ## Domande frequenti sull'integrazione con Resend
</div>

<AccordionGroup>
  <Accordion title="Che cos'è Resend?">
    Resend è un'API email pensata per gli sviluppatori. È focalizzata su un elevato tasso di recapito, sulla facilità di integrazione e su un'esperienza di sviluppo pulita per l'invio di email transazionali e di marketing.
  </Accordion>

  <Accordion title="Ho bisogno di un piano a pagamento di Resend per seguire questo tutorial?">
    No. Puoi completare l'intera configurazione del CRM utilizzando il **piano gratuito di Resend**, che supporta l'invio di email da un dominio verificato e fino a 3.000 contatti per le email di marketing.
  </Accordion>

  <Accordion title="Come faccio a verificare un dominio in Resend?">
    Vai su Resend → **Domains** → aggiungi il tuo dominio. Ti verranno forniti record DNS (TXT, MX) da aggiungere tramite il tuo provider DNS (ad esempio Cloudflare, Namecheap). Una volta aggiunti, fai clic su **Verify**.

    <Tip>
      Usa un sottodominio come `updates.yourdomain.com` per isolare la reputazione del tuo dominio email.
    </Tip>
  </Accordion>

  <Accordion title="Perché le mie email inviate con Resend finiscono nello spam?">
    Ci sono alcuni motivi comuni:

    * Non hai verificato il tuo dominio
    * L'email non ha una versione in testo semplice
    * Stai inviando da un mittente generico come `onboarding@resend.dev`
    * Non stai seguendo le best practice (ad esempio, mancano i link di cancellazione nelle email di marketing)

    Usa il pannello **Deliverability Insights** di Resend per ottenere suggerimenti pratici.
  </Accordion>

  <Accordion title="Posso personalizzare il design delle email che invio?">
    Sì. Usa [React Email](https://react.email/) — una libreria open-source del team di Resend — per progettare email stilizzate e responsive usando componenti React.
  </Accordion>

  <Accordion title="Resend supporta le email di marketing o solo quelle transazionali?">
    Resend supporta **entrambe**:

    * **Email transazionali** (conferma, reset, notifiche) usando l'API o l'SDK.
    * **Email di marketing** tramite la funzionalità **Broadcast** e le **Audiences**.

    Puoi creare, visualizzare in anteprima e tracciare le campagne dalla dashboard.
  </Accordion>

  <Accordion title="Come gestisco gli iscritti alla newsletter in Resend?">
    Usa le **Audiences**:

    * Aggiungi contatti manualmente, tramite CSV o in modo programmatico usando l'API.
    * Ogni Audience ha un ID univoco che puoi usare per associare le iscrizioni.
    * Gli utenti possono cancellarsi automaticamente tramite il link di disiscrizione integrato di Resend.
  </Accordion>

  <Accordion title="Posso configurare il double opt-in per le newsletter?">
    Non in modo predefinito, ma puoi implementarlo manualmente:

    1. All'invio del modulo, invia un'email di conferma iniziale.
    2. Chiedi agli utenti di fare clic su un link.
    3. Al clic, conferma la loro iscrizione e aggiungili alla tua Audience in Resend.
  </Accordion>

  <Accordion title="Posso programmare o automatizzare i flussi di email in Resend?">
    Non ancora. Al momento Resend non supporta campagne drip o sequenze automatizzate.

    <Tip>
      Soluzione alternativa:

      Usa i **Supabase Cron Jobs** per programmare attività che attivano email di Resend a intervalli prestabiliti.
    </Tip>
  </Accordion>

  <Accordion title="Come collego Resend a Supabase Auth?">
    Usa l'integrazione ufficiale Supabase di Resend:

    1. Autenticati con il tuo Progetto Supabase.
    2. Fornisci un dominio e un nome mittente.
    3. Resend configura automaticamente le email di autenticazione di Supabase per usare il tuo account Resend.
  </Accordion>

  <Accordion title="Come gestisce Resend le disiscrizioni?">
    Resend elabora automaticamente le disiscrizioni:

    * Devi includere un link di disiscrizione nelle email inviate tramite Broadcast.
    * Quando un utente si disiscrive, viene rimosso dall'Audience selezionata.
    * Questo è richiesto per la conformità alle normative sulle email (ad esempio, CAN-SPAM, GDPR).
  </Accordion>
</AccordionGroup>