mailinapp
Documentation menu

Bloco Roleta premiada

Uma roleta promocional gamificada: um título, um gesto de girar, e um único prêmio configurado. É a resposta leve do estúdio para "gamificar esta promoção" — sem pool de prêmios, sem probabilidades, sem sorteio no servidor, apenas uma revelação satisfatória envolvendo um link que você já controla.

Como funciona

A roleta premiada é um dos blocos construídos sobre o mesmo truque de CSS de caixa de seleção e rótulo com :checked usado pelo acordeão. Uma caixa de seleção escondida emparelhada com um <label> funciona como alvo de toque, e uma regra CSS ligada a :checked troca o que fica visível, sem nenhum JavaScript. Onde o CSS cinético é respeitado, tocar no gráfico da roda (🎡) marca a caixa escondida, o que dispara uma animação de giro de 0,9 segundos (uma rotação @keyframes até 720 graus) e simultaneamente revela um painel de prêmio: um link estilizado como botão apontando para a URL de prêmio configurada, prefixado com "🎉" para o momento da revelação.

Por baixo dessa camada cinética, o HTML enviado por e-mail também sempre renderiza um segundo controle: um link simples estilizado como botão, com o mesmo rótulo e destino. Diferente dos chips de fallback da enquete ou da avaliação, esse botão não fica escondido por CSS atrás do nível cinético — ele está sempre visível. Um cliente que respeita :checked mostra a roda e esse botão ao mesmo tempo; o Outlook e qualquer outro cliente que não consiga respeitar a regra apenas mostra o botão sozinho. Os destinatários nunca precisam "girar" nada para chegar ao prêmio — tocar em qualquer um dos dois funciona.

Não há nenhuma aleatoriedade nesse bloco. Todo destinatário que gira — ou todo destinatário em um cliente que mostra o botão de fallback simples — chega exatamente ao mesmo link configurado. O "prêmio" é garantido por design: a roda é um recurso de apresentação para uma única recompensa que você já decidiu que todos recebem, não um mecanismo de seleção de prêmio. Se você quiser que destinatários diferentes vejam ofertas diferentes, isso é uma questão de construir versões separadas do e-mail para segmentos de audiência separados (ou usar tags de personalização no próprio link do prêmio), não um recurso do bloco.

A roleta premiada não envia nada de volta ao MailInApp quando é tocada — não há voto, envio ou evento de revelação registrado em nenhum lugar. Isso significa que ela nunca aparece no painel de respostas, na exportação de CSV ou no mapa de calor de cliques (que só rastreia links simples de bloco button/image/social/elemento genérico, e o botão da roleta premiada não está conectado a esse mecanismo). Se você precisar saber quantas pessoas de fato interagiram com a roda, coloque o link do prêmio em uma página de destino sob seu controle e meça por lá. Alternativamente, use o mapa de calor de cliques em um bloco button se você não precisar da animação da roda.

Campos configuráveis:

  • Título — o texto de destaque acima da roda, além de cor e tamanho de fonte próprios.
  • Rótulo do botão — o texto tanto no botão de fallback sempre visível quanto no botão de prêmio revelado (padrão "Try your luck").
  • Link do prêmio — para onde o botão/revelação aponta. Deixado em branco, o HTML enviado por e-mail recorre à própria URL de visualização ao vivo hospedada do bloco, em vez de um link morto; a própria visualização ao vivo só renderiza um botão quando isso está definido (ela não tem um destino de fallback próprio para recorrer).
  • Cor de fundo, preenchimento interno, borda e raio da borda no cartão.
  • Cor do texto do botão e cor de fundo do botão — o padrão é, respectivamente, os tokens de tema $accent e $brand do projeto, então já combina com sua marca de forma automática.

O gráfico da roda em si (o círculo com gradiente cônico e o emoji 🎡) não é configurável — apenas o texto ao redor, o link e o estilo do cartão são.

Exemplos

Subject

You've got a spin waiting

Um varejista rodando uma liquidação relâmpago pode inserir um bloco de roleta premiada em um envio promocional, com o link do prêmio apontando direto para uma página de destino de código de desconto ou um carrinho pré-preenchido. Veja Engajamento e fidelização para o padrão mais amplo de usar gamificação leve para elevar a taxa de cliques em um e-mail promocional que, de outra forma, seria comum. O envio "obrigado por ser membro" de um programa de fidelidade pode usá-la como um momento de um toque para "resgatar sua recompensa", em vez de um botão simples, já que a animação de giro é percebida mais como um evento do que como um link estático. Como não há aleatoriedade de verdade, ela também funciona bem em qualquer lugar onde você queira a diversão percebida de um mecanismo gamificado sem de fato variar o que destinatários diferentes recebem — por exemplo, um único código de desconto válido para todo o site que você quer que todos resgatem.

Como é o fallback estático

<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>

O botão sempre presente é um <a href> simples, direto para o link de prêmio configurado (ou a URL da visualização ao vivo, se nenhum foi definido) — sem etapa de confirmação em /act, já que nada está sendo registrado.

Veja também