Pular para o conteúdo principal

​
O que é Resend?

Resend é uma API de e-mail criada para desenvolvedores. Ela foca em alta entregabilidade, facilidade de integração e uma experiência simples para desenvolvedores no envio de e-mails transacionais e de marketing.

​
Tutorial passo a passo

Este tutorial orienta você na criação de um CRM totalmente funcional em menos de uma hora — com coleta de leads, confirmação por e-mail, inscrição na newsletter e um painel interno de administração. Você usará:
  • Lovable: para gerar o front-end e a lógica de backend.
  • Supabase: para armazenamento seguro de dados e autenticação.
  • Resend: para automatizar e acompanhar e-mails transacionais + de marketing.
Vamos começar.
1

Crie uma landing page com formulário de contato

Use a IA da Lovable para gerar rapidamente uma landing page para seu produto ou serviço.Instruções:
1

Novo Projeto Lovable

Crie um novo projeto Lovable.
2

Prompt de IA:

Crie uma landing page SaaS com um formulário de contato que colete nome, e-mail e mensagem.
Projeto de Landing Page Lovable Pn
3

Inspecione o código gerado

Inspecione o código gerado ou use a ferramenta de seleção para ajustar elementos.
4

Adicione validação de entrada

Adicione validação dos campos e um campo message para melhorar a experiência do usuário.Formulário de Email Resend Pn
2

Armazene envios de formulário no Supabase

Supabase atua como seu banco de dados de back-end seguro.
1

Conta Supabase

Crie uma conta gratuita no Supabase e um novo projeto.
2

Chave de API

No Lovable, conecte seu projeto do Supabase usando a chave de API.Supabase Resend Email Pn
3

Crie uma tabela `contacts` com:

  • id: UUID, chave primária
  • name: text
  • email: text
  • message: text
  • created_at: timestamp
4

Lógica de envio

Modifique a lógica de envio do formulário para inserir dados no Supabase.
5

RLS

Aplique o Row-Level Security (RLS) do Supabase para restringir o acesso somente a usuários autenticados.
3

Enviar e-mails de confirmação com o Resend

Configure o Resend para enviar e-mails de confirmação automáticos sempre que um lead enviar o formulário.
1

Cadastre-se no Resend

Cadastre-se no Resend e verifique seu domínio personalizado.
  • Você será solicitado a atualizar seus registros DNS (TXT, MX).
  • Use subdomínios como updates.domain.com para gerenciar melhor a reputação de e-mail.
2

Chave de API

Integre a chave de API no Lovable por meio das configurações de ambiente ou de uma função de backend.
3

SDK

Use o SDK do Resend para enviar um e-mail de confirmação ao enviar o formulário.Confirmation Email Submission Resend Pn
4

Opcional: React Email

Use o React Email (também do Resend) para personalizar a aparência e o estilo dos seus e-mails com componentes reutilizáveis.Customize Email Resend Pn
4

Crie um painel administrativo seguro

Permita que somente usuários autenticados visualizem e gerenciem leads.
1

Rota de admin

Crie uma rota /admin no Lovable.
2

Autenticação Supabase

Habilite a autenticação Supabase com login por e-mail e senha.
3

Contatos

Exiba a tabela contacts com as colunas:
  • Nome
  • E-mail
  • Pré-visualização da mensagem
  • Data de envio
4

Detalhes completos do contato

Adicione um painel de detalhes (por exemplo, um painel deslizante) exibindo os detalhes completos do contato ao clicar em uma linha.Crm Resend Email Pn
5

Lógica de redirecionamento

Adicione lógica de redirecionamento para que usuários não autenticados sejam redirecionados para /login.
5

Ativar respostas de e-mail personalizadas enviadas pelo administrador

Permita que sua equipe envie acompanhamentos personalizados.
1

Painel de detalhes do contato

No painel de detalhes do contato, adicione um campo de texto e modelos predefinidos (por exemplo, “Obrigado por se cadastrar!”).
2

Adicionar botão de envio

Adicione um botão de envio integrado ao Resend.
3

Armazenar mensagens enviadas

Armazene cada mensagem enviada em uma tabela sent_emails no Supabase:
  • contact_id
  • subject
  • body
  • sent_at
Isso cria um registro pesquisável de todos os acompanhamentos.
6

Adicionar um formulário de assinatura de newsletter

Use o recurso Audiences da Resend para gerenciar assinantes e enviar campanhas de email.Subscription Newsletter Resend Pn
1

Adicionar novo formulário

Adicione um novo formulário na sua landing page para inscrição na newsletter.
2

Contato no Resend

Quando o formulário for enviado:
  • Crie um contato no Resend via API
  • (Opcional) Armazene o contato localmente no Supabase também
3

Design

Use a interface de campanhas (broadcast) de email da Resend para criar e enviar newsletters.
  • Lógica de cancelamento de inscrição integrada
  • Insights de desempenho (taxas de abertura, status de entrega)
4

Verificação de conformidade!

Para fins de conformidade (por exemplo, com o GDPR), considere implementar um fluxo de double opt-in.
7

Bônus: conectando o Resend ao Supabase Auth

Enviar e-mails em lote GDPR Resend PnQuer melhorar a autenticação por e-mail padrão do Supabase (que limita o envio a 4 e-mails por hora)?
1

Resend Supabase

Vá para a integração do Resend com o Supabase.
2

Autenticação

Autentique-se com seu projeto Supabase.
3

Configuração de domínio

Escolha seu domínio e o nome/e-mail do remetente.
4

SMTP

O Resend configura automaticamente o SMTP e substitui o sistema de e-mail padrão do Supabase.
5

Personalização

Agora você pode personalizar os modelos de e-mail de autenticação no painel do Supabase.
8

Ajustes finais e boas práticas

Audience Resend Pn
  • Tratamento de erros: o Lovable pode mostrar erros de build que são falsos positivos. Sempre teste sua funcionalidade em produção.
  • Reversão com Supabase: ao reverter código no Lovable, lembre-se de excluir manualmente as políticas ou migrações associadas do Supabase — elas não são revertidas automaticamente.
  • Dicas de entregabilidade:
    • Use subdomínios para isolar a reputação de envio.
    • Sempre inclua uma versão em texto simples do seu e-mail.
    • Monitore o desempenho dos e-mails com o painel de insights do Resend.
9

Tudo pronto! 🎉

Em menos de uma hora, você criou um CRM moderno com:
  • Uma landing page e formulário de contato
  • Armazenamento de leads em banco de dados
  • Confirmações de e-mail automatizadas
  • Painel administrativo para gerenciamento de leads
  • Respostas de e-mail personalizadas
  • Envio de newsletters
  • Autenticação e verificação de e-mail

​
Quer ir além?

  • Adicione suporte para e-mails agendados via cron jobs do Supabase
  • Crie fluxos de automação para disparar e-mails de acordo com os estágios do lead
  • Ajuste o estilo da sua interface para aumentar a confiança na marca e a conversão

​
FAQ sobre a integração com Resend

Resend é uma API de e-mail criada para desenvolvedores. Ela é focada em alta entrega, facilidade de integração e uma experiência simples e direta para desenvolvedores ao enviar e-mails transacionais e de marketing.
Não. Você pode concluir toda a configuração de CRM usando o plano gratuito do Resend, que permite enviar e-mails a partir de um domínio verificado e até 3.000 contatos para e-mails de marketing.
Acesse Resend → Domains → Adicione o seu domínio. Você receberá registros DNS (TXT, MX) para adicionar no seu provedor de DNS (por exemplo, Cloudflare, Namecheap). Depois de adicioná-los, clique em Verify.
Use um subdomínio como updates.seudominio.com para isolar a reputação do seu e-mail.
Existem alguns motivos comuns:
  • Você não verificou o seu domínio
  • Seu e-mail não tem uma versão em texto simples
  • Você está enviando de um remetente genérico como onboarding@resend.dev
  • Você não está seguindo boas práticas (por exemplo, falta de links de descadastro em e-mails de marketing)
Use o painel Deliverability Insights do Resend para obter dicas práticas.
Sim. Use o React Email — uma biblioteca de código aberto criada pela equipe do Resend — para criar e-mails estilizados e responsivos com componentes React.
O Resend oferece suporte a ambos:
  • E-mails transacionais (confirmação, redefinição, notificações) usando a API ou SDK.
  • E-mails de marketing via o recurso Broadcast e Audiences.
Você pode criar, pré-visualizar e acompanhar campanhas pelo painel.
Use Audiences:
  • Adicione contatos manualmente, via CSV ou de forma programática usando a API.
  • Cada Audience tem um ID exclusivo que você pode usar para associar inscrições.
  • Usuários podem se descadastrar automaticamente pelo link de descadastro nativo do Resend.
Não por padrão, mas você pode implementar manualmente:
  1. No envio do formulário, envie um e-mail inicial de confirmação.
  2. Peça para os usuários clicarem em um link.
  3. No clique, confirme a inscrição e adicione-os à sua Audience no Resend.
Ainda não. O Resend atualmente não oferece suporte a campanhas de gotejamento (drip) ou sequências automatizadas.
Solução alternativa:Use Supabase Cron Jobs para agendar tarefas que disparem e-mails do Resend em intervalos definidos.
Use a integração oficial do Supabase criada pelo Resend:
  1. Autentique com o seu projeto Supabase.
  2. Informe um domínio e o nome do remetente.
  3. O Resend configura automaticamente os e-mails de autenticação do Supabase para usar a sua conta Resend.
O Resend processa descadastros automaticamente:
  • Você deve incluir um link de descadastro em e-mails de broadcast.
  • Quando um usuário se descadastra, ele é removido da Audience selecionada.
  • Isso é obrigatório para conformidade com normas de e-mail (por exemplo, CAN-SPAM, GDPR).