投票模块
一个一键即可完成的调查问题:每个选项既是一个真实的邮件内控件,也是一个普通链接。投票在从 Gmail 网页版到最基本的纯文本客户端的任何地方都能正常工作,在大多数情况下都无需收件人离开收件箱。
工作原理
每个投票选项都会同时以两种形式渲染,而不是在构建时二选一。凡是支持邮件内表单提交的客户端(Gmail 网页版/安卓版、Yahoo 等),每个选项都是一个真实的 <form method="post">,直接提交到 MailInApp 的公开互动端点,因此点击即可投票,无需离开收件箱。这个表单被包裹在一个仅动态层级可见的容器中,并配有一条 CSS 规则,用于隐藏第二种形式:一个指向 /v/[token]/act 的普通 <a href> 链接,它会在一个托管页面上确认并记录同一次投票。
凡是这条 CSS 规则不被支持的地方(Outlook,或任何无法提交邮件内表单的客户端),那个隐藏的链接就会转为可见,并承担起投票的工作。普通链接是每个电子邮件客户端都能渲染并跟随访问的唯一通用基本元素。两条路径都会提交到同一个记录端点,并产生完全相同的事件,因此结果绝不会因收件人使用的客户端不同而产生分歧。
只有在实时页面上完成确认(或在邮件内提交后立即)才会记录一次投票——单纯的链接请求不会被记录。这一点很重要,因为企业安全扫描器和收件箱安全工具会在邮件一到达就预先抓取邮件中的每一个链接;如果一次普通的 GET 请求就会被计数,那么投票结果在被真人打开之前就会被机器人灌满。即使走的是链接路径,确认动作也是通过一次表单提交完成的,这也是为什么 /v/[token]/act 是"先确认、后记录"的两步流程,而不是"重定向即记录"。
收件人自己的投票会被去重。重复点击自己的链接(急切的连续两次点击、一次重试的页面加载)是一次空操作,而不会产生第二条记录,这是通过一个基于营销活动、模块和收件人生成的确定性 Firestore 文档 id 来强制实现的。匿名投票(没有收件人 token——例如来自一个导出的 HTML 文件、被粘贴进第三方 ESP 后产生的投票)不会按人去重;因为根本没有"人"可供关联。取而代之的是按 IP、按营销活动、按分钟进行限流,因为营销活动的 id 在邮件自身的源码中就是可见的,除此之外没有任何机制能阻止脚本提交任意数量的投票。
可配置字段:
- 问题——投票的提问文字,以及它自己的颜色和字号。
- 卡片的背景色、内边距、边框与圆角半径。
- 选项文字颜色和选项背景色——应用于每个选项按钮的共享样式覆盖项。
每个投票选项都是一个子节点,只带有一个标签字段——可以在树中自由添加、删除或重新排序选项。
如果项目配置了截止日期或响应数量上限(参见调查问卷生命周期)且已经达到,实时预览会把可互动的选项按钮替换为灰色的不可点击等效物,并附上一条"本调查已停止接收新响应"的提示。已发送的 HTML 本身永远不会显示这种状态——它在发送时就是静态的,检查只会在页面被打开时进行,而不是在邮件发送时进行。
示例
Subject
Quick one: what should we build next?
在产品通讯邮件中放入一个单一问题的投票("我们接下来该开发哪个功能?"),可以直接了解大家的兴趣,而不必承担一整份表单的开销。参见调查与 NPS 反馈了解直接从收件箱收集结构化反馈的更广泛模式。一封活动回顾邮件可以提出"你还会再来参加一次吗?"这样的问题,附上"是/否/也许"选项,直接为下一次活动的筹划提供依据。在 A/B 方案上举棋不定的团队,可以把投票当作一次轻量级的内部表决("Logo A 还是 Logo B?")发给相关干系人,结果会随着投票到来实时显示在结果页面上。
静态回退效果是什么样子
<div id="em-poll-1" style="margin:12px 0;background-color:transparent">
<p style="margin:0 0 10px;font-weight:600;font-size:16px;color:#111827">Which do you prefer?</p>
<div>
<span class="kn-fallback">
<a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=poll-1&blockType=poll&action=vote&option=Option+A"
style="display:inline-block;margin:0 6px 6px 0;padding:8px 14px;border:1px solid #d1d5db;border-radius:6px;background-color:#ffffff;color:#111827;font-size:14px;text-decoration:none">
Option A
</a>
</span>
</div>
</div>
这就是第二层级的链接路径:一个指向 /v/[token]/act 的普通 <a>,样式设计成与邮件内表单渲染出的按钮外观一致——只有在动态表单被 CSS 隐藏时才可见。