Skip to main content

Resend 集成

了解如何将 Resend 与您的 Lovable 应用程序集成。

什么是 Resend​

Resend 是一个为开发者构建的电子邮件 API。它专注于高送达率、易于集成，以及简洁的开发者体验，用于发送交易型电子邮件和营销电子邮件。

逐步教程​

本教程将引导您在不到一小时内构建一个功能齐全的 CRM 系统——包括潜在客户收集、电子邮件确认、新闻通讯订阅以及内部管理仪表盘。您将使用：

  • Lovable：用于生成前端和后端逻辑。
  • Supabase：用于安全的 数据存储和身份验证。
  • Resend：用于自动化和跟踪交易型 + 营销电子邮件。

让我们开始吧。

1. 使用联系表单创建着陆页​

使用 Lovable 的 AI 快速生成产品或服务的着陆页。

说明：

  1. 新建 Lovable 项目 - 创建一个新的 Lovable 项目。
  2. 提示： 创建一个带有联系表单的 SaaS 着陆页，用于收集姓名、电子邮件和消息。
lovable
  1. 检查生成的代码 - 检查生成的代码或使用选择工具来微调元素。
  2. 添加输入验证 - 添加输入验证和一个 message 字段，以提升用户体验。
lovable

2. 将表单提交存储到 Supabase​

Supabase 作为您的安全后端数据库。

  1. Supabase 账户 - 创建一个免费的 Supabase 账户并新建一个项目。
  2. API 密钥 - 在 Lovable 中，使用 API 密钥连接您的 Supabase 项目。
lovable
  1. 创建一个 contacts 表，包括以下字段：
    • id：UUID，主键
    • name：文本
    • email：文本
    • message：文本
    • created_at：时间戳
  2. 提交逻辑 - 修改表单提交逻辑，以将数据插入 Supabase。
  3. RLS - 应用 Supabase 的行级安全 (RLS)，以限制仅认证用户访问。

3. 通过 Resend 发送确认电子邮件​

设置 Resend，以便每次潜在客户提交表单时自动发送确认电子邮件。

  1. 在 Resend 注册 - 在 Resend 注册并验证您的自定义域名。
    • 系统会要求您更新 DNS 记录 (TXT、MX)。
    • 使用子域名（如 updates.domain.com）来更好地管理电子邮件声誉。
  2. API 密钥 - 通过环境设置或后端函数在 Lovable 中集成 API 密钥。
  3. SDK - 使用 Resend 的 SDK 在表单提交时发送确认电子邮件。
lovable
  1. 可选：React Email - 使用 React Email（同样由 Resend 提供）来定制电子邮件的外观和感觉，利用可重用组件。
lovable

4. 构建安全的管理仪表盘​

仅允许认证用户查看和管理潜在客户。

  1. 管理路由 - 在 Lovable 中创建 /admin 路由。
  2. Supabase 身份验证 - 启用 Supabase 的电子邮件/密码登录身份验证。
  3. 联系人 - 显示 contacts 表中的列：
    • 姓名
    • 电子邮件
    • 消息预览
    • 提交日期
  4. 完整联系人详情 - 当点击一行时，添加一个详情面板（例如，滑动面板）来显示完整的联系人详情。
lovable
  1. 重定向逻辑 - 添加重定向逻辑，以便未认证用户被路由到 /login。

5. 启用管理员自定义电子邮件回复​

允许您的团队发送个性化的后续电子邮件。

  1. 联系人详情面板 - 在联系人详情面板中，添加一个文本字段和预定义模板（例如，“感谢您注册！”）。

  2. 添加发送按钮 - 添加一个发送按钮，并将其连接到 Resend。

  3. 存储已发送消息 - 将每条已发送消息存储到 Supabase 中的 sent_emails 表：

    • contact_id
    • subject
    • body
    • sent_at

    这为您提供了一个可搜索的后续电子邮件日志。

6. 添加新闻通讯订阅表单​

使用 Resend 的受众群来管理订阅者和发送广播电子邮件。

lovable
  1. 添加新表单 - 在您的着陆页上添加一个新的新闻通讯订阅表单。
  2. Resend 联系人 - 提交表单时：
    • 通过 API 创建一个 Resend 联系人
    • （可选）同时在 Supabase 中本地存储该联系人
  3. 设计 - 使用 Resend 的广播电子邮件 UI 来设计和发送新闻通讯。
    • 内置退订逻辑
    • 性能洞察（打开率、送达状态）
  4. 合规性检查！ - 为了合规性（例如 GDPR），考虑实现双重确认流程。

7. 奖励：将 Resend 连接到 Supabase Auth​

lovable

想要改进 Supabase 的默认电子邮件身份验证（它限制为每小时 4 封电子邮件）？

  1. Resend 与 Supabase - 转到 Resend 的 Supabase 集成。
  2. 身份验证 - 使用您的 Supabase 项目进行身份验证。
  3. 域名设置 - 选择您的域名和发件人名称/电子邮件。
  4. SMTP - Resend 会自动设置 SMTP 并替换 Supabase 的默认电子邮件系统。
  5. 自定义 - 现在，您可以在 Supabase 仪表盘中自定义身份验证电子邮件模板。

8. 最终调整与最佳实践​

lovable
  • 错误处理：Lovable 可能会显示一些假阳性构建错误。请始终在实际环境中测试您的功能。
  • 使用 Supabase 回滚：如果在 Lovable 中回滚代码，请记住要手动删除相关的 Supabase 策略或迁移——它们不会自动回滚。
  • 送达率提示：
    • 使用子域名来隔离声誉。
    • 始终在电子邮件中包含纯文本版本。
    • 使用 Resend 的洞察仪表盘监控电子邮件性能。

9. 完成！ 🎉​

在不到一小时内，您已经构建了一个现代 CRM 系统，包括：

  • 着陆页和联系表单
  • 基于数据库的潜在客户存储
  • 自动电子邮件确认
  • 用于潜在客户管理的管理仪表盘
  • 自定义电子邮件回复
  • 新闻通讯广播
  • 身份验证和电子邮件验证

想更进一步？​

  • 添加对定时电子邮件的支持，通过 Supabase 定时任务
  • 构建自动化流程，根据潜在客户阶段触发电子邮件
  • 为您的 UI 设计添加样式，以提升品牌信任和转化率

Resend 集成常见问题​

什么是 Resend？

Resend 是一个为开发者构建的电子邮件 API。它专注于高送达率、易于集成以及干净的开发者体验，用于发送交易型电子邮件和营销电子邮件。

我需要付费的 Resend 计划来跟随这个教程吗？

不需要。您可以使用Resend 的免费层完成整个 CRM 设置，它支持从验证域名发送电子邮件，并最多支持 3,000 个营销电子邮件联系人。

如何在 Resend 中验证域名？

转到 Resend → Domains → 添加您的域名。您将获得 DNS 记录 (TXT、MX)，通过您的 DNS 提供商（例如 Cloudflare、Namecheap）添加这些记录。添加后，点击Verify。

使用子域名如 updates.yourdomain.com 来隔离您的电子邮件声誉。

为什么我的 Resend 电子邮件被归入垃圾邮件？

有几个常见原因：

  • 您尚未验证您的域名
  • 您的电子邮件缺少纯文本版本
  • 您从通用发件人（如 onboarding@resend.dev）发送
  • 您没有遵循最佳实践（例如，营销电子邮件缺少退订链接）

使用 Resend 的送达率洞察面板获取可操作的提示。

我可以自定义发送的电子邮件设计吗？

可以。使用 React Email——一个由 Resend 团队提供的开源库——通过 React 组件设计样式化、响应式的电子邮件。

Resend 支持营销电子邮件还是只支持交易型电子邮件？

Resend 支持两者：

  • 交易型电子邮件（确认、重置、通知），使用 API 或 SDK。
  • 营销电子邮件，通过广播功能和受众群。

您可以在仪表盘中创建、预览和跟踪活动。

如何在 Resend 中管理新闻通讯订阅者？

使用受众群：

  • 通过手动、CSV 或使用 API 编程方式添加联系人。
  • 每个受众群都有一个唯一的 ID，可用于关联订阅。
  • 用户可以通过 Resend 的内置退订链接自动退订。
我可以为新闻通讯设置双重确认吗？

默认情况下不行，但您可以手动实现：

  1. 提交表单时，发送初始确认电子邮件。
  2. 要求用户点击链接。
  3. 点击后，确认他们的订阅并将他们添加到 Resend 受众群。
我可以在 Resend 中设置或自动化电子邮件流程吗？

目前不行。Resend 还不支持滴灌活动或自动化序列。

解决方法：使用Supabase 定时任务来调度任务，在设定间隔触发 Resend 电子邮件。

如何将 Resend 连接到 Supabase Auth？

使用 Resend 的官方 Supabase 集成：

  1. 使用您的 Supabase 项目进行身份验证。
  2. 提供一个域名和发件人名称。
  3. Resend 会自动配置您的 Supabase 身份验证电子邮件，以使用您的 Resend 账户。
Resend 如何处理退订？

Resend 会自动处理退订：

  • 您必须在广播电子邮件中包含退订链接。
  • 当用户退订时，他们会从选定的受众群中移除。
  • 这对于电子邮件合规性是必需的（例如，CAN-SPAM、GDPR）。