Integração com Resend
Aprenda como integrar o Resend com sua aplicação Lovable
O que é o Resend
Resend é uma API de email construída para desenvolvedores. Ela foca em alta entregabilidade, facilidade de integração e uma experiência limpa para desenvolvedores ao enviar emails transacionais e de marketing.Tutorial passo a passo
Este tutorial te guia através da construção de um CRM totalmente funcional em menos de uma hora—completo com coleta de leads, confirmação por email, assinatura de newsletter e um painel administrativo interno. Você usará:- Lovable: para gerar o front end e a lógica do backend.
- Supabase: para armazenamento seguro de dados e autenticação.
- Resend: para automatizar e rastrear emails transacionais + de marketing.
1
Criar uma Landing Page com Formulário de Contato
Use a IA do 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:
Crie uma landing page SaaS com um formulário de contato coletando nome, email e mensagem.
3
Inspecionar o código gerado
Inspecione o código gerado ou use a ferramenta de seleção para ajustar elementos.
4
Adicionar validação de entrada
Adicione validação de entrada e um campo 
message para melhor experiência do usuário.2
Armazenar Envios de Formulário no Supabase
O Supabase atua como seu banco de dados backend seguro.
1
Conta Supabase
Crie uma conta gratuita no Supabase e um novo projeto.
2
Chave da API
No Lovable, conecte seu projeto Supabase usando a chave da API.
3
Criar uma tabela `contacts` com:
id: UUID, chave primárianame: textoemail: textomessage: textocreated_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 apenas a usuários autenticados.
3
Enviar Emails de Confirmação via Resend
Configure o Resend para enviar emails de confirmação automatizados toda vez 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.compara gerenciar melhor a reputação do email.
2
Chave da API
Integre a chave da API no Lovable via configurações de ambiente ou função backend.
3
SDK
Use o SDK do Resend para enviar um email de confirmação no envio do formulário.
4
Opcional: React Email
Use o React Email (também do Resend) para personalizar a aparência dos seus emails com componentes reutilizáveis.
4
Construir um Dashboard Admin Seguro
Permita que apenas usuários autenticados visualizem e gerenciem leads.
1
Rota admin
Crie uma rota
/admin no Lovable.2
Autenticação Supabase
Habilite a autenticação Supabase com login por email/senha.
3
Contatos
Exiba a tabela
contacts com colunas:- Nome
- Prévia da mensagem
- Data de envio
4
Detalhe completo do contato
Adicione um painel de detalhes (ex: um painel deslizante) mostrando detalhes completos do contato quando uma linha for clicada.
5
Lógica de redirecionamento
Adicione lógica de redirecionamento para que usuários não autenticados sejam direcionados para
/login.5
Habilitar Respostas de Email Personalizadas do Admin
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 (ex: “Obrigado por se inscrever!”).
2
Adicionar botão de envio
Adicione um botão de envio conectado ao Resend.
3
Armazenar mensagens enviadas
Armazene cada mensagem enviada em uma tabela
sent_emails no Supabase:contact_idsubjectbodysent_at
6
Adicionar um Formulário de Inscrição na Newsletter
Use as Audiences do Resend para gerenciar assinantes e enviar emails de transmissão.
1
Adicionar novo formulário
Adicione um novo formulário na sua landing page para inscrição na newsletter.
2
Contato Resend
Quando enviado:
- Crie um contato Resend via API
- (Opcional) Armazene o contato localmente no Supabase também
3
Design
Use a interface de email de transmissão do Resend para projetar e enviar newsletters.
- Lógica de cancelamento de inscrição integrada
- Insights de performance (taxas de abertura, status de entrega)
4
Verificação de conformidade!
Para conformidade (ex: GDPR), considere implementar um fluxo de dupla confirmação.
7
BÔNUS: Conectando Resend ao Supabase Auth
Quer melhorar o email auth padrão do Supabase (que te limita a 4 emails/hora)?1
Resend supabase
Vá para integração Supabase do Resend.
2
Autenticação
Autentique com seu projeto Supabase.
3
Configuração de domínio
Escolha seu domínio e nome/email do remetente.
4
SMTP
O Resend configura automaticamente o SMTP e substitui o sistema de email padrão do Supabase.
5
Personalização
Agora você pode personalizar templates de email de autenticação no dashboard do Supabase.
8
Toques Finais e Melhores Práticas
- Tratamento de Erros: O Lovable pode mostrar erros de build que são falsos positivos. Sempre teste sua funcionalidade ao vivo.
- Revertendo com Supabase: Se reverter código no Lovable, lembre-se de deletar manualmente políticas ou migrações associadas do Supabase—elas não são revertidas automaticamente.
- Dicas de Entregabilidade:
- Use subdomínios para isolar reputação.
- Sempre inclua uma versão em texto simples do seu email.
- Monitore a performance de email com o dashboard de insights do Resend.
9
Você Terminou! 🎉
Em menos de uma hora, você construiu um CRM moderno com:
- Uma landing page e formulário de contato
- Armazenamento de leads baseado em banco de dados
- Confirmações de email automatizadas
- Dashboard admin para gerenciamento de leads
- Respostas de email personalizadas
- Transmissões de newsletter
- Autenticação e verificação de email
Quer ir mais longe?
- Adicione suporte para emails agendados via cron jobs do Supabase
- Construa fluxos de automação para disparar emails baseados nos estágios dos leads
- Estilize sua UI para melhor confiança da marca e conversão
FAQ de Integração com Resend
O que é o Resend?
O que é o Resend?
Resend é uma API de email construída para desenvolvedores. Ela foca em alta entregabilidade, facilidade de integração e uma experiência limpa para desenvolvedores ao enviar emails transacionais e de marketing.
Preciso de um plano pago do Resend para seguir este tutorial?
Preciso de um plano pago do Resend para seguir este tutorial?
Não. Você pode completar toda a configuração do CRM usando o plano gratuito do Resend, que suporta o envio de emails de um domínio verificado e até 3.000 contatos para emails de marketing.
Como verifico um domínio no Resend?
Como verifico um domínio no Resend?
Vá para Resend → Domains → Adicione seu domínio. Você receberá registros DNS (TXT, MX) para adicionar através do seu provedor de DNS (ex: Cloudflare, Namecheap). Uma vez adicionados, clique em Verify.
Use um subdomínio como
updates.seudominio.com para isolar sua reputação de email.Por que meus emails do Resend estão indo para spam?
Por que meus emails do Resend estão indo para spam?
Existem algumas razões comuns:
- Você não verificou seu domínio
- Seu email não possui uma versão em texto simples
- Você está enviando de um remetente genérico como
onboarding@resend.dev - Você não está seguindo as melhores práticas (ex: links de descadastro ausentes em emails de marketing)
Posso personalizar o design dos emails que envio?
Posso personalizar o design dos emails que envio?
Sim. Use React Email—uma biblioteca open-source da equipe do Resend—para projetar emails estilizados e responsivos com componentes React.
O Resend suporta emails de marketing ou apenas transacionais?
O Resend suporta emails de marketing ou apenas transacionais?
O Resend suporta ambos:
- Emails transacionais (confirmação, redefinição, notificações) usando a API ou SDK.
- Emails de marketing através do recurso Broadcast e Audiences.
Como gerencio assinantes de newsletter no Resend?
Como gerencio assinantes de newsletter no Resend?
Posso configurar double opt-in para newsletters?
Posso configurar double opt-in para newsletters?
Posso agendar ou automatizar fluxos de email no Resend?
Posso agendar ou automatizar fluxos de email no Resend?
Ainda não. O Resend atualmente não suporta campanhas de gotejamento ou sequências automatizadas.
Solução alternativa:Use Supabase Cron Jobs para agendar tarefas que disparam emails do Resend em intervalos definidos.
Como conecto o Resend ao Supabase Auth?
Como conecto o Resend ao Supabase Auth?
Use a Integração oficial do Supabase pelo Resend:
- Autentique com seu projeto Supabase.
- Forneça um domínio e nome do remetente.
- O Resend configura automaticamente seus emails de autenticação do Supabase para usar sua conta Resend.
Como o Resend lida com descadastramentos?
Como o Resend lida com descadastramentos?
O Resend processa automaticamente os descadastramentos:
- Você deve incluir um link de descadastro em emails de broadcast.
- Quando um usuário se descadastra, ele é removido da audience selecionada.
- Isso é obrigatório para conformidade de email (ex: CAN-SPAM, GDPR).