mailinapp
Documentation menu

Bloc Roue de la fortune

Une roue promotionnelle ludique : un titre, un geste de rotation, et une seule récompense configurée. C'est la réponse légère du studio à « gamifier cette promotion » — pas de réserve de lots, pas de probabilités, pas de tirage côté serveur, juste une révélation satisfaisante enveloppée autour d'un lien que vous contrôlez déjà.

Comment ça fonctionne

La roue de la fortune est l'un des blocs construits sur la même astuce CSS :checked de case à cocher et libellé que l'accordéon. Une case à cocher cachée associée à un <label> sert de cible tactile, et une règle CSS liée à :checked échange ce qui est visible, sans une seule ligne de JavaScript. Là où le CSS cinétique est respecté, toucher le graphique de la roue (🎡) coche la case cachée, ce qui déclenche une animation de rotation de 0,9 seconde (une rotation @keyframes jusqu'à 720 degrés) et révèle simultanément un panneau de lot : un lien stylé en bouton pointant vers votre URL de lot configurée, préfixé d'un « 🎉 » pour le moment de la révélation.

Sous ce niveau cinétique, le HTML envoyé rend aussi toujours un second contrôle : un simple lien stylé en bouton avec le même libellé et la même destination. Contrairement aux puces d'alternative du sondage ou de la notation, ce bouton n'est pas masqué par CSS derrière le niveau cinétique — il est toujours visible. Un client qui respecte :checked montre à la fois la roue et ce bouton en même temps ; Outlook et tout autre client incapable de respecter la règle montre simplement le bouton seul. Les destinataires n'ont jamais besoin de « faire tourner » quoi que ce soit pour accéder au lot — toucher l'un ou l'autre fonctionne.

Il n'y a aucun hasard nulle part dans ce bloc. Chaque destinataire qui fait tourner la roue — ou chaque destinataire dans un client qui montre le simple bouton d'alternative — atterrit sur exactement le même lien configuré. Le « gain » est garanti par conception : la roue est un dispositif de présentation pour une récompense unique que vous avez déjà décidé de donner à tout le monde, pas un mécanisme de sélection de lot. Si vous voulez que différents destinataires voient différentes offres, c'est une question de construction de versions séparées de l'email pour des segments d'audience séparés (ou d'utilisation de balises de fusion dans le lien du lot lui-même), pas une fonctionnalité du bloc.

La roue de la fortune ne renvoie rien à MailInApp quand elle est touchée — aucun vote, aucune soumission, aucun événement de révélation n'est enregistré nulle part. Cela signifie qu'elle n'apparaît jamais dans le tableau de bord des réponses, l'export CSV, ou la carte de chaleur des clics (qui ne suit que les liens simples des blocs button/image/social/élément générique, et le bouton de la roue de la fortune n'est pas câblé via ce mécanisme). Si vous avez besoin de savoir combien de personnes ont réellement interagi avec la roue, placez le lien du lot sur une page d'atterrissage que vous contrôlez et mesurez-le là. Autrement, utilisez la carte de chaleur des clics sur un bloc button à la place si vous n'avez pas besoin de l'animation de la roue.

Champs configurables :

  • Titre — l'intitulé au-dessus de la roue, plus sa propre couleur et sa propre taille de police.
  • Libellé du bouton — le texte à la fois sur le bouton d'alternative toujours visible et sur le bouton de lot révélé (par défaut « Try your luck »).
  • Lien du lot — vers où pointent le bouton/la révélation. Laissé vide, le HTML envoyé revient par défaut à l'URL de vue en direct hébergée propre du bloc plutôt qu'à un lien mort ; la vue en direct elle-même ne rend un bouton que lorsque ce champ est défini (elle n'a pas de destination de repli propre vers laquelle se rabattre).
  • Couleur de fond, marge intérieure, bordure et rayon de bordure sur la carte.
  • Couleur du texte du bouton et couleur de fond du bouton — reviennent par défaut aux jetons de thème $accent et $brand du projet respectivement, de sorte qu'ils correspondent à votre marque d'emblée.

Le graphique de la roue lui-même (le cercle en dégradé conique et l'emoji 🎡) n'est pas configurable — seuls le texte environnant, le lien et le style de la carte le sont.

Exemples

Subject

You've got a spin waiting

Un détaillant qui organise une vente flash peut déposer un bloc roue de la fortune dans un envoi promotionnel avec le lien du lot pointant directement vers une page d'atterrissage de code de réduction ou un panier prérempli. Voir Engagement et fidélisation pour le modèle plus large d'utilisation de la gamification légère pour améliorer le taux de clic d'un email promotionnel par ailleurs ordinaire. L'envoi « merci d'être membre » d'un programme de fidélité peut l'utiliser comme un moment « réclamez votre récompense » en un tap plutôt qu'un simple bouton, puisque l'animation de rotation se lit davantage comme un événement qu'un lien statique. Comme il n'y a pas de vraie randomisation, il fonctionne aussi bien partout où vous voulez le plaisir perçu d'un mécanisme gamifié sans réellement faire varier ce que reçoivent différents destinataires — par ex. un seul code de réduction valable sur tout le site que vous voulez que tout le monde utilise.

À quoi ressemble l'alternative statique

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

Le bouton toujours présent est un simple <a href> direct vers le lien de lot configuré (ou l'URL de la vue en direct si aucun n'a été défini) — pas d'étape de confirmation /act, puisque rien n'est enregistré.

Voir aussi