Si vous souhaitez que vos membres reçoivent une carte de membre virtuelle, l'article suivant vous permettra d'en envoyer une avec chaque carte de membre virtuelle. courriel de bienvenue ou même notifications push.
Le code suivant suppose que vous avez une connaissance de base des structures HTML et CSS, et n'est destiné qu'à servir d'exemple. Le setup, le css et le HTML sont tous modifiables selon les besoins. Vous pouvez copier-coller ce qui suit dans votre email de bienvenue, ou dans un email de notification push qui est déclenché pour être envoyé lorsqu'un nouveau membre est ajouté:
<h2 style="text-align:center">Carte de profil d'utilisateur</h2>
<div class="card" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial;">
<img src="https://yourlogolink.com" alt="Logo du site" style="width:100%">
<h1>[MM_Member_Data name='firstName'] [MM_Member_Data name='lastName']</h1>
<p class="title" style="color: grey; font-size: 18px;">Niveau d'adhésion :<br>[MM_Member_Data name='membershipName']</p>
<p>Membre ID# : [MM_Member_Data name='id']</p>
<p>Membre depuis : [MM_Member_Data name='registrationDate']</p>
<p><a href="/fr/[MM_CorePage_Link type='myaccount' autoLogin='true']/" style="text-decoration: none; font-size: 22px; color: black;"><button style="border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px;">Voir le compte</button></a></p>
</div>
Le code ci-dessus permet d'ajouter l'image de votre logo, leur nom, leur niveau d'adhésion, leur numéro d'identification et leur date d'inscription. Il comprend également un bouton qui leur permet de se connecter automatiquement et de consulter leur compte.
Voici une capture d'écran de cet exemple dans l'e-mail du destinataire :
Remarque : Certaines visionneuses de courrier électronique peuvent ne pas afficher toutes les feuilles de style en cascade. Par exemple, certains systèmes de messagerie supprimeront l'ombre derrière la carte.
Cet exemple est constitué à partir de deux SmartTags™ différents. Les Données des membres SmartTag (MM_Member_Data ) est utilisé dans le code ci-dessus pour recueillir les informations telles que le nom, le niveau d'adhésion, le numéro d'identification et la date d'inscription. Le code Liens CorePage SmartTag (MM_CorePage_Link) est utilisé pour créer un lien au bas de la carte qui connectera automatiquement l'utilisateur à la page Mon compte de votre site.