Web 浏览器的官方电子邮件 JS SDK

官方客户端 TypeScript 和 JavaScript SDK 为 电子邮件JS.com 顾客.

用最简单最安全的方式直接从您的代码发送邮件 .

• 100%代码覆盖率 : 此 SDK 中的每行代码、条件和错误处理器都是 完全由自动测试套件覆盖,以确保绝对生产准备和零回归问题.
• 无外部依赖: 搭建了零高架 尽量保持你的脚印重量.

目标环境通知

这个软件包是专门为网页浏览器和客户端的网页环境设计的. 如果你是在为 请使用相应的 SDK 专用平台 :

• 节点.js
• 原生反应
• 小蝶头
• (原始内容存档于2013-10-12) (英语). REST API

为什么是电子邮件JS?

什么是电子邮件JS?

电子邮件JS是一个 电子邮件管弦乐层 (单位:千美元) 统一 API 中枢 用于无缝集成 您的基础设施。 通过利用您喜欢的电子邮件服务, 从个人 Gmail 账户 和标准 SMTP 服务器给企业交易供应商,例如 SendGrid, Mailgun, resend 或 AWS SES - 电子邮件JS 集中并优化您的整个 电子邮件工作流程通过单一的,强大的界面.

核心建筑效益

• 即时提供热分机: 如果您的初级交付服务遇到停电或意外的账户阻隔,您的申请仍会在线。 通过电子邮件JS,您可以立即将您的生产流量引导到一个倒置的提供者(例如从SendGrid到AWSES),在您的仪表板中单击一击——需要 零代码调整和零重新部署。也可以通过不同的路径在苍蝇上动态地运行 serviceID 直接在您的 API 请求中 .
• 通过"移民税": 如果您需要更改您的电子邮件提供者, 您无需重写您的集成逻辑, 重新创建 HTML 模板, 或重映射变量 。 整合过一次电子邮件JS, 并无缝地更改基础提供者 .
• 0 后端外页 : 消除建立、维护和保障自定义后端服务或代理服务的必要性,以便安全地传送发送的电子邮件.
• 普遍生态系统支助: 任何堆叠都无缝 使用我们的官方客户端/服务器 SDKs - 或使用我们通用的 REST API 连接任何平台上的任何应用程序与 Rust, Python, PHP, C#, Go, 或任何其他语言.

安装和设置

现代 Bundlers (Vite, Next.js, Webpack, Rollup) (中文(简体) )

使用您首选的软件包管理器安装 SDK :

npm install @emailjs/browser
# yarn add @emailjs/browser
# pnpm add @emailjs/browser
# bun add @emailjs/browser

浏览器直接脚本集成( CDN)

对于没有构建步骤的应用程序,在CMS平台上运行的网站(如WordPress,Webflow, Shopify), 或香草 JavaScript 环境,直接通过 CDN 添加 SDK:

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@emailjs/browser@5/dist/email.min.js"
></script>

代码示例

1. 现代合成/等待工作流程

为React,Vue,Angular,Svelte,Next.js等组件所设计.

import emailjs, { EmailJSResponseStatus } from '@emailjs/browser';

const templateParams = {
  name: 'James',
  notes: 'Check this out!',
};

try {
  const response = await emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, {
    publicKey: 'YOUR_PUBLIC_KEY',
  });
  console.log('SUCCESS!', response.status, response.text);
} catch (error) {
  if (error instanceof EmailJSResponseStatus) {
    console.error('EmailJS Error:', error.status, error.text);
    return;
  }
  console.error('Unexpected Error:', error);
}

2. 提交表格(提交表格)

自动从 HTML 窗体元素中获取输入字段,并安全地发送有效载荷.

import emailjs from '@emailjs/browser';

emailjs
  .sendForm(
    'YOUR_SERVICE_ID',
    'YOUR_TEMPLATE_ID',
    document.querySelector('#myForm'), // Can be a direct form reference (preferred), or a string selector
    {
      publicKey: 'YOUR_PUBLIC_KEY',
    },
  )
  .then((response) => {
    console.log('SUCCESS!', response.status, response.text);
  })
  .catch((error) => {
    console.error('FAILED...', error);
  });

3. 香草JavaScript网站整合示例

如果你正在装入 SDK 通过一个 <script> 标记在标准布局上.

<button id="sendBtn">Send Email</button>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@emailjs/browser@5/dist/email.min.js"
></script>
<script type="text/javascript">
  document.getElementById('sendBtn').addEventListener('click', function () {
    const templateParams = {
      name: 'James',
      message: 'Hello from vanilla JS!',
    };

    emailjs
      .send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, {
        publicKey: 'YOUR_PUBLIC_KEY',
      })
      .then(
        function (response) {
          console.log('SUCCESS!', response.status, response.text);
        },
        function (error) {
          console.log('FAILED...', error);
        },
      );
  });
</script>

高级配置

可在全球范围内使用 init() 方法或本地置换为第四个执行参数 函数send, (中文(简体) ), sendForm) (中文(简体) ). 本地选项比全球配置更为优先.

主要选项

块列表设置

如果跟踪的变量包含或匹配被封锁的字符串,则放弃任何方法调用 。 触发时返回错误 403 .

限制设置

执行请求率限制。 超过限制时返回错误 429.

自定义存储提供者接口

默认情况下, SDK 使用本地 localStorage 如果有的话。 您可以提供符合以下合同的自定义自动同步引擎:

interface StorageProvider {
  get: (key: string) => Promise<string | null | undefined>;
  set: (key: string, value: string) => Promise<void>;
  remove: (key: string) => Promise<void>;
}

配置代码示例

设定全球安全和费率限制

import emailjs from '@emailjs/browser';

emailjs.init({
  publicKey: 'YOUR_PUBLIC_KEY',
  blockHeadless: true,
  blockList: {
    watchVariable: 'user_email',
    list: ['[email protected]', '[email protected]'],
  },
  limitRate: {
    throttle: 10000, // 10 seconds cooldown window
  },
});

本地覆盖设置

import emailjs from '@emailjs/browser';

const payload = {
  userEmail: '[email protected]',
  message: 'Hello!',
};

await emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', payload, {
  publicKey: 'YOUR_PUBLIC_KEY',
  blockList: {
    watchVariable: 'userEmail', // Custom path evaluation for this request
  },
  limitRate: {
    throttle: 0, // Bypass global rate-limiting rules for this specific call
  },
});

有用链接

• 官方 SDK 文档
• 电子邮件 JS 剪贴板