mailinapp
Documentation menu

刮刮卡模块

一张刮开即可揭晓奖品的卡片,构建在与手风琴和转盘抽奖模块相同的 :checked CSS 技术之上。一个隐藏的复选框、一个样式化为刮开表面的可点击标签,以及一条 CSS 规则在勾选的瞬间切换可见内容——全程不涉及任何 JavaScript。

工作原理

在支持动态 CSS 的地方,该模块会渲染一个刮开表面——一个带有斜纹灰色条纹背景和"刮开这里"提示文字的 <label>——覆盖在奖品之上。点击它会勾选与之关联的隐藏复选框,从而触发一条 CSS 规则,隐藏刮开表面并显示底下的奖品,整个过程都在收件箱内完成。这里没有拖动手势或渐进式刮开动画,只是简单的一次点击揭晓——与转盘抽奖的转盘、手风琴的展开/收起使用的是同一种交互方式。

这个模块的降级方式格外值得一提:与转盘抽奖和测验那种始终显示一个独立可用控件的方式不同,刮刮卡依赖样式本身内置的"安全默认值"。刮开表面自身的内联样式是 display:none;只有当一条 <style> 规则(仅作用于支持动态 CSS 的客户端)明确将其强制设为 display:block 时,它才会显示出来。在 Outlook 以及其他不支持这条样式表的客户端中,该表面根本不会出现,而奖品元素(本身没有任何隐藏样式)则默认可见。因此不存在"未刮开"这种死路:一个客户端要么展示刮开手势(点击后显示奖品),要么完全跳过这个手势、直接展示奖品。不会有人被困在一张无法刮开的卡片前。

与转盘抽奖一样,刮刮卡在刮开时不会向 MailInApp 回传任何内容——没有揭晓事件、投票或提交会被记录。它不会出现在响应仪表盘、CSV 导出,或点击热力图中。如果模块配置了可选的奖品链接,点击已揭晓的奖品只会像任何普通的 <a href> 一样跳转。它不会像 button/image/social 模块的链接那样经过 MailInApp 的点击追踪跳转,因此刮刮卡的奖品点击也不会出现在点击热力图中。

可配置字段:

  • 标题——卡片上方的标题文字,以及它自己的颜色和字号。
  • 奖品文字——刮开表面之下所揭晓的内容(默认为"🎉 20% off your next order!")。
  • 奖品链接(可选)——如果设置,揭晓后的奖品会渲染为一个指向该 URL 的真实按钮样式链接;如果留空,则渲染为纯粹的加粗文字,因为没有可跳转的目标。
  • 卡片的背景色、内边距、边框、圆角半径。
  • 奖品文字颜色和奖品背景色——与大多数颜色覆盖字段不同,这两者刻意没有内置默认值,因为该模块会渲染两种视觉上不同的奖品样式(设置了链接时是白字配色底的按钮,未设置时是无背景的深色文字),一个写死的默认值会让其中一种样式变得不可见。只有当字段留空时,每种样式才会各自回退到自己合理的默认值。

示例

Subject

Scratch off to reveal your discount

留存邮件可以用刮刮卡作为转盘抽奖的轻量替代方案,用于揭晓一份确定发放的折扣——更多这类轻量化游戏化玩法参见互动与忠诚度。生日或纪念日邮件可以把个性化优惠码作为奖品文字来揭晓(可以结合合并标签为每位收件人生成个性化的代码,因为奖品文字本身就是可配置的文案)。一封"抽奖结果揭晓"的活动收尾邮件可以用它来揭晓某位特定收件人是否中奖,并将奖品链接指向领奖页面。

静态回退效果是什么样子

<div id="em-scratch-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">
    Scratch to reveal your prize!
  </p>
  <!-- scratch surface (checkbox + label, display:none by default) omitted:
       only shown where a kinetic-tier <style> rule forces it visible -->
  <div class="sc-prize" style="margin-top:10px">
    <a href="https://acme.example.com/claim"
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      🎉 20% off your next order!
    </a>
  </div>
</div>

奖品所在的 <div> 本身没有任何隐藏样式,因此除非动态样式表主动将其隐藏,否则它始终无条件可见——揭晓手势只是叠加在一个本就可见的奖品之上的附加效果。

相关内容