互动模块

每个互动模块都自带三种输出层级(动态、静态和 Outlook),因此你在设计时完全不必考虑兼容性问题。本页快速概述每个模块的功能及其降级效果。层级系统本身的原理请参见降级机制如何工作。

每个模块还拥有自己的专属页面,包含完整的配置项和实例讲解,链接见下方各小节末尾。如果你要找的是图表、KPI 记分卡或仪表盘,请参见分析与图表模块。

轮播图

一个完全由 CSS 驱动的可滑动图片画廊,带导航圆点和箭头。

互动效果: 收件人可以在原地翻看每张幻灯片。每张幻灯片都可以带有说明文字和链接。
降级效果: 显示第一张幻灯片,并附带一个"查看全部 N 张幻灯片"的链接,指向托管的实时预览——在那里每张幻灯片都只需一次点击即可查看,不会被遗漏。

→ 完整指南与示例

手风琴

可展开的区块——非常适合常见问题、订单详情,或让长邮件保持易于浏览。

互动效果: 点击标题即可展开其内容。
降级效果: 所有条目均以展开状态呈现,不会遗漏任何内容。

→ 完整指南与示例

投票

一次点击即可完成的调查。每个选项都是一个链接,一经确认便会立即记录投票。

互动效果: 收件人无需离开收件箱即可投票;模块会确认其选择。
降级效果: 选项会渲染为按钮,通过托管页面记录投票。投票功能在所有电子邮件客户端中都可用,因为普通链接是唯一通用的基本元素。

结果会实时汇入你项目的分析数据。参见互动与分析。

→ 完整指南与示例

表单

工作室内置的完整多页调查构建器。你可以添加任意数量的问题类型,可选择将其分布到多个页面,并以按问题汇总的形式查看结果,而不是原始数据堆砌。

问题类型: 单行文本、多行文本、电子邮件、数字、电话、日期、下拉菜单、单个复选框——外加单选(选一项)、多选框(可选任意数量)、线性量表,以及星级评分。可自由组合;表单只是一个容纳你所添加类型的 form-field 子项的容器。(暂不支持文件上传类问题。)
单页表单的工作方式和以前完全一样:在支持邮件内表单提交的客户端中,收件人可以填写每个字段并在不离开收件箱的情况下提交;在其他客户端中,表单会渲染为一个行动号召按钮,点击后在托管页面上打开同一份表单。
多页调查: 在检查器中为任意问题设置页码,即可将表单拆分为多个页面——呈现"第 1 页,共 3 页"这样的进度提示,并支持"返回"导航。由于真正的表单分页无法用静态 HTML/CSS 表达,多页表单在邮件中始终只会渲染为一个开始调查按钮(可自定义其文案),点击后打开托管的调查向导;收件人一次回答一页,答案会在页面之间自动延续,即使使用"返回"也是如此。在最后一页提交之前,系统不会记录任何内容——中途放弃的调查不会留下部分响应。

无论单页还是多页,每次提交都会按收件人计入你的响应记录,并在"响应"页面上按问题汇总:参见调查问题汇总。

→ 完整指南与示例

倒计时

用于产品发布、促销和截止日期的实时跳动计时器。倒计时以服务器端渲染的动态 GIF 形式生成——这是唯一能在所有主流客户端中持续跳动的技术——并为只显示静态图像的客户端提供有意义的首帧画面。

→ 完整指南与示例

评分

一次点击即可完成的反馈问题——CSAT、CES 和 NPS 类调查背后的模块。与投票类似,每个选项都是一个会被记录的链接,因此评分在任何地方都可用:在收件箱中点击一次,在托管页面上确认。

显示样式: 星级(经典的 3 到 10 星一行)、数字量表(利克特量表风格的一行数字按钮,可自定义低/高两端标签——例如"非常不同意" → "非常同意"),或 NPS(固定的 0 到 10 一行,默认标签为"完全不可能" → "非常可能")。三者提交的都是同一个 rate 动作,因此切换样式不会影响已有的响应数据。
低分告警阈值: 在模块上设置"评分 ≤ N",即可在差评到达的那一刻立即标记出来——这正是 Webhook 的 lowScore 标记和应用内告警邮件背后的驱动机制。每个评分模块都可以设置各自的阈值,因为 1 到 5 分的 CSAT 问题和 0 到 10 分的 CES 问题需要不同的分界线。
追加问题: 当响应达到或低于你设置的阈值时,可以选择追加一个自由文本问题——例如"哪里出了问题?"。它只会出现在托管的实时预览中(邮件 HTML 无法实现条件分支),在评分提交后立即显示,并作为附加在同一收件人身上的普通答案计入你的响应记录。

响应会自动汇总为平均值、响应分布、(在相关时)NPS 分数,以及随时间变化的趋势——参见响应与 Webhook。

→ 完整指南与示例

转盘抽奖

一个分配奖励的游戏化促销转盘。在支持动态 CSS 的地方,转盘会在邮件中动画呈现;在其他地方,收件人则通过实时预览获得同等效果的一键揭晓体验,确保每位收件人都能中奖。

→ 完整指南与示例

测验

一个带评分的多题测验——工作室对潜客评分测验以及性格/知识测试类需求的解决方案。添加一个测验模块,然后向其中放入测验问题子项,每个问题都有各自的选项和正确答案。

互动效果: 在支持邮件内表单提交的客户端中,收件人可以直接在收件箱中回答所有问题并一次性提交。
降级效果: 在其他客户端中,一个链接会在托管的实时预览中打开同一份测验——这里没有像投票/评分那样"每个答案对应一个链接"的层级,因为多题组合无法枚举为普通的 GET 链接。
评分方式: 正确答案会在服务器端与模块配置的答案表进行核对——绝不信任客户端提交的数据——并根据收件人是否达到你设置的及格分数(正确率百分比),向其展示两条可配置结果消息中的一条。设置一个跳转链接,即可在测验结束后将收件人导向特定页面,例如为及格者展示优惠券页面。

每次提交都会作为一条普通事件计入互动与分析,其值包含计算出的分数和每道题的答案。

→ 完整指南与示例

刮刮卡

一张刮开即可揭晓奖品的卡片——游戏化促销揭晓机制的原理,与手风琴和转盘抽奖模块一样,构建在同一套 :checked CSS 技术之上。

互动效果: 点击刮开区域即可直接在收件箱中揭晓底下的奖品。
降级效果: 在不支持揭晓手势的地方,奖品会默认以未隐藏的状态呈现——与手风琴使用的"安全默认值"模式相同——因此不会有人被困在一张无法刮开的卡片前。

→ 完整指南与示例

商品

直接在邮件中完成销售:一张带立即购买按钮的商品卡片。它的结账方式字段决定点击后跳转到哪里。MailInApp 结账(Stripe)处理真实支付,无需搭建独立商店——先在设置 → 付款中连接你自己的 Stripe 账户,款项会直接结算到该账户;MailInApp 从不持有资金,也看不到卡片信息。链接到外部商店结账则会将买家直接带到你所连接的 Shopify/WooCommerce 商店的商品页面。

在 MailInApp 结账模式下:

订单履行: 数字商品(你在模块中填写的下载链接/代码,会在付款确认的瞬间自动通过邮件发送)或实体商品(Stripe Checkout 会收集收货地址;你需要在响应仪表盘的"订单"表格中将订单标记为已发货——MailInApp 本身不处理物流,但会在你标记发货的瞬间自动给买家发邮件)。
库存: 可选的库存上限。一旦已付款订单数达到该上限,模块会在托管的实时预览中显示已售罄而不是"立即购买"。已发送的邮件本身也会保持最新:设置了上限的商品,其库存提示("仅剩 3 件" / "已售罄")是一张小型的服务器端渲染图片,每次打开时都会刷新——与倒计时模块使用的技巧相同——因此在发送数天后也不会显示过时的库存状态。购买本身仍会在买家点击时进行权威核验,而不是信任徽章所显示的内容——如果一笔交易恰好在最后一件商品售出的瞬间成交,买家会自动获得退款并收到邮件通知,而不会被静默超卖。
互动效果: 与投票或评分不同,购买只能在 Stripe 自己的安全页面上完成,因此没有邮件内的动态层级——"立即购买"总是先打开托管的实时预览进行确认,然后再跳转到 Stripe。
降级效果: 同一张商品卡片和"立即购买"链接在所有电子邮件客户端中都可用,因为它和静态层级的其他内容一样,只是一个普通链接。

每笔完成的订单都会作为一条 purchase 事件出现在互动与分析中,并在项目的响应页面上生成一张专门的"订单"表格。参见订单、订单履行与退款了解每个阶段会发生什么——以及会给买家发送什么邮件——还有如何发起手动退款。需要直接向买家询问什么吗?可以直接从"订单"表格中联系他们。

链接到外部商店结账模式则跳过上述所有环节:"立即购买"会变成一个普通的、带点击追踪的链接(计入你的点击热力图,与任何按钮模块一样),直接指向你自己商店中的商品页面。由于 MailInApp 从不参与该笔支付,因此在 MailInApp 一侧没有订单、没有库存追踪,也没有订单履行步骤。如果你已连接 Shopify 或 WooCommerce 商店,导入已同步的商品即可自动为你填好这些内容。

→ 完整指南与示例

作业

带截止日期的家庭作业或课程任务——添加标题、说明、可选的分值,以及任意数量的资源链接。

截止日期: 在已发送的邮件中以实时跳动的倒计时图片呈现(与倒计时模块使用的同一种服务器端渲染 GIF 技术),并配有纯文本的截止日期说明,因此无论客户端是否渲染图片,截止时间都是准确的。
提交方式: 选择标记为已完成(一次点击的复选框,类似投票选项)、简短文本答案,或链接答案(例如共享文档的 URL)。标记为已完成是一个以链接优先的第二层级动作,与投票/评分选项相同;文本和链接答案则会打开托管的实时预览以输入回复,这与测验模块处理"普通链接无法承载的内容"时采用的模式相同。
降级效果: 在其他地方,始终显示一行静态的截止日期文字以及资源链接列表,两者都始终可见。

每次完成或提交都会作为一条普通事件计入——参见互动与分析——并在"响应"页面上汇总成一份成绩册(按学生与作业交叉呈现的表格,迟交会被标记出来):参见作业与成绩册。

→ 完整指南与示例

闪卡组

用于词汇或知识点操练的翻转卡片。添加一个闪卡组,然后向其中放入闪卡子项,每张卡片都有各自的正面(问题)和背面(答案)文字,并可在任意一面添加可选图片。

互动效果: 点击一张卡片即可将其原地翻转,与卡组中其他卡片互不影响。
降级效果: 在其他地方,正面和背面以静态方式堆叠显示,分别标注为"Q:"/"A:"——不会有任何内容被隐藏在不支持的手势背后。

闪卡组是一种学习辅助工具,而不是问题,因此它不会记录任何内容,也不会出现在响应仪表盘、CSV 导出或分析数据中。

→ 完整指南与示例

会议链接

线上或混合活动的入会信息:服务商标签(Zoom、Meet、Teams 或自定义)、入会链接、开始时间,以及可选的电话拨入信息。该标签仅用于展示——不涉及与任何这些服务商的账户集成,只是你粘贴的一个 URL——你还可以设置入会链接应在开始前多少分钟显示为"进行中"。

邮件中始终有效: 已发送邮件中的"加入"按钮始终是一个真实、可点击的链接——与倒计时和商品模块一样,遵循"发送时即为静态"的约定——旁边还有一个"距开始还有"/"正在进行"徽章,使用与倒计时模块相同的服务器生成 GIF 技术渲染。
在托管的实时预览中受限展示: 实时预览每次都会重新获取最新数据,因此在那里"加入"按钮是动态的——在配置的开放时间到来之前,会显示一个不可点击的"将在开始前 N 分钟开放"提示,时间一到就会切换为真实链接。
如果设置了电话拨入信息,会以纯文本形式显示在"加入"按钮旁边。

→ 完整指南与示例

活动场地

线下活动的位置信息:场地名称、地址、可选的照片,以及一个"获取路线"按钮。

获取路线会打开 Google Maps——无需 API 密钥,也没有地图缩略图集成,只是一个链接。它会使用你提供的最精确信息:优先使用你粘贴的 Google Maps 链接(从 Google Maps 分享一个地点并粘贴其 URL,maps.app.goo.gl/... 这类短链接同样有效),其次是你填写的经纬度,只有在两者都未设置时才会回退到对普通地址文本进行地理编码。
与图片或文本一样,是纯内容模块——没有需要回答的内容,因此它从不会出现在响应仪表盘或 CSV 导出中。路线链接仍会像其他任何链接一样被记录在模块级点击热力图中。
即使地址、地图链接和坐标都留空,模块仍会显示场地名称和照片,且不会出现失效的路线链接。

→ 完整指南与示例

添加到日历

一个一键"添加到我的日历"模块,也是解决跨时区邀请问题的实用方案。已发送的邮件无法检测收件人自己所在的时区(邮件中没有 JavaScript),因此该模块将活动的开始和结束时间编码为绝对时刻,而不是预先计算好的本地时间字符串。这样一来,每位与会者自己的日历应用都会自动以其本地时间正确显示。

需要填写标题、可选的描述、开始时间、结束时间(留空则默认为开始时间之后一小时),以及自由文本的地点——请根据你的活动场地或会议链接模块中的文字自行填写地点;两者不会自动关联。
会根据同一组信息渲染出三个链接:下载 .ics 文件(可直接在桌面和移动端日历应用中打开)、添加到 Google Calendar,以及添加到 Outlook.com——后两者是发送时生成的普通深层链接,无需服务器往返请求。

→ 完整指南与示例

RSVP

一个免费的"你会出席吗?"问题,支持容量和候补名单——相当于商品模块付费门票库存上限的免费 RSVP 版本,适用于只需要统计人数而不涉及收费的活动。

互动效果: "是/否"选项是一次点击的链接,与投票的单选投票形式完全相同。开启允许携带宾客后,会在"是"的回复中加入一个宾客人数选择器——选择宾客人数需要用到托管的实时预览,这与作业模块的文本/链接答案所遵循的"固定链接无法提供选择"的原理相同;不带宾客的"是"(0 位宾客)仍可以作为一次点击的普通链接使用。
容量与候补名单: 设置一个可选的上限(0 表示不限)。一旦已确认的 RSVP 加上宾客人数将超过该上限,后续的"是"回复会被记录为候补而非已确认,收件人看到的将是你配置的候补消息,而不是通用的感谢语。
降级效果: 在其他地方,显示一个指向托管实时预览的静态"在此回复"链接。

每一次 RSVP 都会在"响应"页面上汇总为已确认/已拒绝/候补人数,以及宾客总数,与其他模块的汇总信息并列显示。

→ 完整指南与示例

网络研讨会报名

一张经过设计的报名卡片,链接到你自己的某个直播场次——从检查器中选择一个场次,其标题/日期会自动填入,填入后仍可完全编辑。

报名按钮始终指向该场次当前的 /webinar/<liveSessionId> 页面,仅根据场次 ID 构建——发送时不做查找,因此即使邮件发出后场次详情发生变化,链接依然保持正确。
只有设置为公开报名的场次才会出现在选择器中——仅限订阅者的场次没有可供链接的公开页面。
降级效果: 无需降级——邮件、实时预览和画布渲染的都是同一张卡片,因为这里的内容都不依赖收件人或当前时间。

→ 完整指南与示例

积分榜

为体育队伍或俱乐部呈现的排名赛季表格:球队名称、赛/胜/平/负、得失分,以及积分,按积分排序,并标出前三名。与分析与图表模块页面上的所有模块不同,这个模块从不以图片形式渲染。在包括 Outlook 在内的所有电子邮件客户端中,整个模块都是一张真正的 HTML 表格,因为排序后的表格数据正是表格标记原本就擅长呈现的内容。

各行直接手动录入,一行一支队伍——目前还不支持实时数据源绑定,因此需要在每场比赛后手动更新模块(就像在 KPI 记分卡绑定数据源之前手动更新其数值一样)。
对于没有平局的运动(篮球、网球联赛),可以关闭显示平局列。积分始终是你自己填写的字段,而不是根据胜/平/负自动计算——不同联赛的计分方式各不相同(例如胜一场得 3 分、附加分等)。
设置高亮队伍,可按精确名称将某支队伍所在行加粗并着色——这在给家长的摘要邮件中很有用,方便一个家庭一眼就找到自家孩子所在的队伍。
与活动场地或添加到日历一样,是纯内容模块——没有需要回答的内容,因此它从不会出现在响应仪表盘或 CSV 导出中。

→ 完整指南与示例

输入元素

调色板的"输入"分区包含各类输入元素:文本、电子邮件、多行文本、下拉菜单、复选框、数字、电话、日期选择器、单选、多选框、线性量表和星级评分。将其中一个拖入表单,它就会成为该表单的一个字段;拖到其他任何位置,它都会被自动包裹进一个新表单——在邮件中,输入元素只能作为表单的一部分提交。同样这些类型也不必通过拖拽来添加:在"树"面板中点击表单上的 + 号,或在其空白画布占位符上点击,即可直接搜索并插入。

下拉菜单、单选和多选框都需要一份选项列表,在检查器中以行的形式添加/重新排序。单个复选框在勾选时提交 yes;多选框字段可以选择其中任意数量的选项,每个选项都会在结果中单独计数。
线性量表需要设置最大值,以及可选的低/高两端标签(例如"不太可能" → "非常可能")。星级评分需要设置最大星数。
在检查器中为任意字段设置页码,即可将其放置在多页调查的对应页面上。

无论是哪种类型,答案都会以字段名称为键计入你项目的分析数据——具体如何汇总,请参见调查问题汇总。

布局与内容模块

除互动模块外,工作室还提供每封邮件都需要的结构性模块:分区、分栏、标题、文本、图片、按钮、列表、分隔线、间距和社交链接。此外还有一个重复模块,会为所连接数据源的每一行渲染一次模板,适用于商品网格和摘要邮件。分栏是一种并排布局,可为每一栏单独设置宽度、内边距和垂直对齐方式,基于表格构建,因此在 Outlook 中也能正常显示。

所有承载文本的模块都支持合并标签。已经搭建好了某个内容,想把它和新内容并排放置?选中它,使用检查器中的 ⧉ 包裹为…(参见工作区),而不必手动在一个新的分栏模块中重新搭建。

按钮

按钮是用于简单行动号召的通用模块:一个文案、颜色,以及一个链接 URL。点击它总是只会跳转到该 URL——记录在项目的模块级点击热力图中(参见互动与分析),仅此而已。按钮并不知道链接的另一端是什么,因此它本身无法完成扣款、记录投票,或保存答案。

因此,只要实际动作发生在其他地方——比如"阅读这篇文章""访问我们的网站"之类,目标页面不是 MailInApp 已经提供专属模块的内容——按钮就是正确的选择。如果目标具体是你自己托管的网络研讨会报名页面,请改用网络研讨会报名模块——它同样是"链接到一个收集报名信息的页面"这一思路,只是与场次绑定,链接因此不会失效。

但当你希望点击本身就是那个动作时,按钮就不是正确的选择了。这种情况下,请使用下表中的专属模块来代替按钮——每一个都已经渲染好自己的行动号召元素,直接连接到正确的接口,结果会自动汇总到你的"响应"页面,无需任何额外配置:

| 想要... | 使用这个模块代替按钮 | | --- | --- | | 销售商品并扣款 | 商品——"立即购买"按钮,真实的 Stripe 结账(或直接链接到你的 Shopify/WooCommerce 结账页),库存追踪 | | 收集邮箱注册、自由文本回复,或任何调查答案 | 表单 | | 提出一次点击即可回答的多选或是/否问题 | 投票 | | 为免费活动统计人数,并支持容量/候补名单 | RSVP | | 推广你自己托管的某场网络研讨会 | 网络研讨会报名——即使场次详情之后发生变化,链接依然保持正确 | | 收集一次点击的 CSAT/NPS/CES 类评分 | 评分 | | 转动促销转盘或揭晓刮刮卡奖品 | 转盘抽奖或刮刮卡 |

经验法则:如果点击需要改变你这一侧的某些状态——一笔支付、一次投票、一条保存下来的答案——就使用上表中对应的模块。如果只是需要把某人送到某个地方,一个普通的按钮就完全够用,也没有其他需要配置的内容。

公式

数学与科学符号表示——分数、指数、下标、希腊字母、命名函数(\sin、\lim、\log 等)、集合/逻辑符号(\forall、\in、\cup、\neg 等)以及常见运算符——采用一种精简的类 LaTeX 语法书写(例如 \frac{-b \pm \sqrt{b^2-4ac}}{2a}),因为没有任何电子邮件客户端能够排版真正的数学公式。\left(/\right) 会按正常大小识别,不会自动缩放(这是一个小型位图渲染器,而不是真正的 TeX 引擎),\text{...} 则会在公式中间切回普通文字。

化学式拥有自己专属的 \ce{...} 宏,是一个类似 mhchem 的精简子集:\ce{H3O+} 或 \ce{2H2 + O2 -> 2H2O}。元素个数会自动加下标,末尾的离子电荷(+、2-、SO4^2- 等)会自动加上标,-> 会渲染为反应箭头,因此你不必为每个原子数和电荷手动书写 ^/_。

它会在服务器端渲染为图片,支持行内(较小,置于文本行内)或块级(较大,独占一行)两种显示模式。它无法识别的语法——完整的 LaTeX 文档、宏包、矩阵、表格——会原样渲染为普通文本,而不会导致发送失败。图片的替代文本始终携带原始符号表示,因此公式永远不会被困在一张没有文字对应内容的图片里。

→ 完整指南与示例

视频与音频

没有任何电子邮件客户端能够执行媒体播放,因此视频或音频模块在邮件中始终以静态预览图的形式发送(如果你设置了封面/预告图就使用它,否则使用普通占位图),点击后会打开该文件。在托管的实时预览中——一个真正的页面而非收件箱——同一个模块则会渲染为可正常使用的原生播放器:带有你设置的封面图的 <video>,或者(如果你设置了封面图)在控件上方叠放封面图的 <audio>。视频/音频文件本身仍然是一个你托管在别处的普通 URL;粘贴其链接即可。不过,封面/预告图是从媒体库中选取的,而不是手动输入:**选择图片…**会打开一个网格,展示你已经上传的所有内容,并附带一个上传按钮供你上传新图片。

→ 视频:完整指南与示例・音频:完整指南与示例

预制组件

调色板的"预制"分区包含各种现成的组合——页头、主视觉区、卡片、商品行、功能分栏、用户评价、优惠券和页脚。拖入其中一个,会为你插入一组已排列好的普通模块:插入之后它们不再具有任何特殊性,因此你可以自由地重新设计样式或结构。