Bloque de gira y gana
Una rueda promocional gamificada: un título, un gesto de giro, y una única recompensa configurada. Es la respuesta ligera del estudio a "gamificar esta promoción" — sin bolsa de premios, sin probabilidades, sin sorteo del lado del servidor, solo una revelación satisfactoria envuelta alrededor de un enlace que ya controlas.
Cómo funciona
Gira y gana es uno de los bloques construidos sobre el mismo truco CSS de casilla oculta y etiqueta :checked que el acordeón. Una casilla oculta emparejada con una <label> actúa como objetivo de toque, y una regla CSS ligada a :checked intercambia lo que es visible, sin JavaScript en absoluto. Donde se respeta el CSS cinético, tocar el gráfico de la rueda (🎡) marca la casilla oculta, lo que activa una animación de giro de 0.9 segundos (una rotación @keyframes hasta 720 grados) y revela simultáneamente un panel de premio: un enlace con estilo de botón que apunta a la URL de premio que configuraste, precedido por un "🎉" para el momento de la revelación.
Debajo de esa capa cinética, el HTML enviado por correo también renderiza siempre un segundo control: un enlace simple con estilo de botón con la misma etiqueta y destino. A diferencia de los chips de alternativa de encuesta o calificación, este botón no está oculto por CSS detrás del nivel cinético — siempre es visible. Un cliente que respeta :checked muestra tanto la rueda como este botón a la vez; Outlook y cualquier otro cliente que no pueda respetar la regla simplemente muestra el botón por sí solo. Los destinatarios nunca tienen que "girar" nada para llegar al premio — tocar cualquiera de los dos funciona.
No hay ninguna aleatoriedad en ningún lugar de este bloque. Cada destinatario que gira — o cada destinatario en un cliente que muestra el botón de alternativa simple — llega exactamente al mismo enlace configurado. El "premio" está garantizado por diseño: la rueda es un recurso de presentación para una única recompensa que ya decidiste que todos reciben, no un mecanismo de selección de premios. Si quieres que distintos destinatarios vean ofertas distintas, eso es cuestión de construir versiones separadas del correo para segmentos de audiencia separados (o usar etiquetas de combinación en el propio enlace del premio), no una función del bloque.
Gira y gana no envía nada de vuelta a MailInApp cuando se toca — no se registra ningún voto, envío o evento de revelación en ningún lugar. Eso significa que nunca aparece en el panel de respuestas, la exportación CSV ni el mapa de calor de clics (que solo rastrea enlaces simples de button/image/social/element genérico, y el botón de gira y gana no está conectado a través de ese mecanismo). Si necesitas saber cuánta gente realmente interactuó con la rueda, coloca el enlace del premio en una página de destino que controles y mídelo ahí. Alternativamente, usa el mapa de calor de clics en un bloque button en su lugar si no necesitas la animación de la rueda.
Campos configurables:
- Título — el encabezado sobre la rueda, más su propio color y tamaño de fuente.
- Etiqueta del botón — el texto tanto en el botón de alternativa siempre visible como en el botón de premio revelado (por defecto "Prueba tu suerte").
- Enlace del premio — hacia dónde apunta el botón/la revelación. Si se deja en blanco, el HTML enviado por correo recurre a la propia URL de vista en vivo alojada del bloque en lugar de un enlace muerto; la vista en vivo en sí solo renderiza un botón cuando esto está definido (no tiene un destino de alternativa propio al cual recurrir).
- Color de fondo, relleno, borde y radio de borde de la tarjeta.
- Color del texto del botón y color de fondo del botón — toman por defecto los tokens de tema
$accenty$branddel proyecto respectivamente, así que coincide con tu marca desde el principio.
El gráfico de la rueda en sí (el círculo de gradiente cónico y el emoji 🎡) no es configurable — solo lo son el texto circundante, el enlace y el estilo de la tarjeta.
Ejemplos
Subject
You've got a spin waiting
Un minorista que realiza una venta relámpago puede colocar un bloque de gira y gana en un envío promocional con el enlace del premio apuntando directamente a una página de destino con código de descuento o a un carrito precargado. Mira Interacción y fidelización para el patrón más amplio de usar gamificación ligera para aumentar la tasa de clics en un correo promocional por lo demás ordinario. El envío de "gracias por ser miembro" de un programa de fidelización puede usarlo como un momento de "reclama tu recompensa" de un solo toque en lugar de un botón simple, ya que la animación de giro se percibe más como un evento que como un enlace estático. Como no hay aleatoriedad real, también funciona bien en cualquier lugar donde quieras la diversión percibida de una mecánica gamificada sin variar realmente lo que reciben distintos destinatarios — por ejemplo, un único código de descuento para todo el sitio que quieres que todos canjeen.
Cómo se ve la alternativa estática
<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>
El botón siempre presente es un simple <a href> directo hacia el enlace de premio configurado (o la URL de vista en vivo si no se definió ninguno) — sin paso de confirmación /act, ya que no se está registrando nada.