转盘抽奖模块
一个游戏化的促销转盘:一个标题、一个转动手势,以及一份配置好的固定奖励。它是工作室对"把这场促销游戏化"这一诉求给出的轻量方案——没有奖池,没有中奖概率,没有服务器端抽奖,只是围绕一个你早已确定好的链接,包裹出一次令人满意的揭晓体验。
工作原理
转盘抽奖是与手风琴模块使用同一套 :checked 复选框加 <label> 的 CSS 技巧构建的模块之一。一个隐藏的复选框搭配一个 <label> 充当点击目标,一条以 :checked 为选择器的 CSS 规则负责切换可见内容,全程不涉及任何 JavaScript。在支持动态 CSS 的地方,点击转盘图形(🎡)会勾选那个隐藏的复选框,从而触发一段 0.9 秒的旋转动画(一个旋转到 720 度的 @keyframes 规则),同时揭晓一个奖品面板:一个指向你配置的奖品链接、样式为按钮的链接,揭晓瞬间前面还会带上一个"🎉"。
在这层动态效果之下,已发送邮件的 HTML 也始终会渲染第二个控件:一个带有相同文案和目标地址、样式为按钮的普通链接。与投票或评分的降级按钮不同,这个按钮并不会被 CSS 隐藏在动态层级之后——它始终可见。支持 :checked 规则的客户端会同时显示转盘和这个按钮;Outlook 以及其他任何不支持该规则的客户端则只会单独显示这个按钮。收件人无需真的"转动"什么就能拿到奖品——点击其中任意一个都可以。
这个模块中不存在任何随机性。无论是转动转盘的收件人,还是使用普通降级按钮的客户端中的收件人,最终都会落到完全相同的配置链接上。"中奖"是被设计所保证的:转盘只是一个用来呈现单一奖励的表现形式——这份奖励你早已决定人人都能拿到——而不是一个真正的抽奖选择机制。如果你希望不同收件人看到不同的优惠,那属于为不同受众细分构建不同版本邮件的范畴(或者在奖品链接本身中使用合并标签),而不是这个模块本身具备的能力。
点击转盘抽奖模块时,它不会向 MailInApp 回传任何内容——不会有任何投票、提交或揭晓事件被记录下来。这意味着它永远不会出现在响应仪表盘、CSV 导出,或点击热力图中(点击热力图只追踪普通的 button/image/social/通用 element 链接,而转盘抽奖模块的按钮没有接入这套机制)。如果你需要知道究竟有多少人真正参与了转盘,可以把奖品链接指向一个你自己掌控的落地页,在那里进行统计。如果不需要转盘动画,也可以改用 button 模块上的点击热力图。
可配置字段:
- 标题 — 转盘上方的标题文字,以及它自身的颜色和字号。
- 按钮文案 — 同时用于始终可见的降级按钮和揭晓后的奖品按钮上的文字(默认"试试手气")。
- 奖品链接 — 按钮/揭晓内容指向的位置。留空时,已发送邮件的 HTML 会回退到该模块自身的托管实时预览 URL,而不是一个失效链接;实时预览本身只有在设置了这个字段时才会渲染出按钮(它没有自己的降级目标可以再退一步)。
- 卡片的背景色、内边距、边框和圆角半径。
- 按钮文字颜色和按钮背景色 — 分别默认使用项目的
$accent和$brand主题令牌,因此开箱即用就能匹配你的品牌。
转盘图形本身(锥形渐变圆盘和 🎡 表情符号)不可配置——只有周围的文案、链接和卡片样式可以调整。
示例
Subject
You've got a spin waiting
正在做限时促销的零售商可以在推广邮件中放入一个转盘抽奖模块,将奖品链接直接指向折扣码落地页或一个已预填好商品的购物车。关于用轻量游戏化手段提升普通促销邮件点击率的更广泛模式,参见互动与忠诚度。会员计划的"感谢你成为会员"邮件可以用它来打造一次"一键领取奖励"的时刻,而不是一个普通按钮,因为转盘动画给人的感觉更像一个事件,而不只是一个静态链接。由于其中并不存在真正的随机性,这个模块也很适合用在任何你只想营造游戏化机制带来的趣味感、而不希望不同收件人实际收到不同内容的场景——例如一个你希望所有人都能兑换的全站统一折扣码。
静态回退效果是什么样子
<div id="em-spin-1" style="margin:12px 0;text-align:center;background-color:transparent">
<p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
Spin to win!
</p>
<a href="https://acme.example.com/spin-reward"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
Try your luck
</a>
<!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
CSS-hidden everywhere else once this fallback link is visible -->
</div>
这个始终存在的按钮是一个指向所配置奖品链接(若未设置则指向实时预览 URL)的普通 <a href>——没有 /act 确认步骤,因为没有任何内容需要被记录。