Customisation d’e-mail

Comment ça marche

Le produit Login fournit un ensemble de modèles standard pour les e-mails que vous envoyez aux utilisateurs :

• Confirmation d’inscription
• Bienvenue
• Confirmation (avec un lien et un code)
• Changement de mot de passe
• Changement d’adresse e-mail
• Code d’autorisation multifacteur (MFA)
• Changement des paramètres MFA
• Abonnement aux nouvelles

Les modèles sont écrits en HTML et CSS.

Vous pouvez :

• apporter des modifications aux modèles standard pour personnaliser l’aspect et le contenu des e-mails ;
• configurer l’envoi des e-mails depuis Xsolla en utilisant votre service de messagerie ou en envoyant des e-mails à l’aide de l’application SendGrid.

Qui peut l'utiliser

Les partenaires qui ont déjà intégré Login et utilisent la base de données Xsolla ou un stockage personnalisé.

Recommandations pour le développement des e-mails

Il n’existe pas de norme de développement unifiée pour les applications de messagerie, et chaque application peut afficher les e-mails différemment. Créez donc un design simple et concis pour vous assurer que vos e-mails s’affichent de la même manière sur diverses applications de messagerie et appareils.

Structure générale

JavaScript et CSS

JavaScript ne permet pas d’ajouter du contenu multimédia aux e-mails. Pour ajouter de l’animation aux e-mails, utilisez des images GIF. Pour ajouter une vidéo, utilisez une image comme lien qui redirige à votre URL avec le contenu de la vidéo.

Certaines applications de messagerie ont une prise en charge limitée des fonctions CSS3. Gardez cela à l’esprit lorsque vous créez un modèle d’e-mail.

N’utilisez que des styles en ligne. La plupart des applications de messagerie excluent les styles écrits dans la balise style.

<div style="text-align: center;"></div>

Développement par blocs indépendants

• Les blocs qui s’affichent mal sur un appareil n’affectent pas les autres blocs.
• Vous avez la flexibilité d’ajuster les blocs dans les e-mails existants et de tester rapidement le résultat.
• Vous pouvez créer une collection de blocs et composer rapidement des e-mails à des fins différentes.

Utilisation des tableaux

Les applications de messagerie ne fonctionnent pas correctement avec les éléments de bloc et la propriété position: absolute. Pour développer un e-mail avec des blocs, utilisez la disposition en tableau et spécifiez les attributs align et valign pour les cellules du tableau. Les tableaux s’adaptent mieux aux différents écrans.

Essayez d’éviter la fusion de cellules via les attributs colspan et rowspan. Utilisez plutôt des tableaux insérés.

Taille et unités utilisées

Pour que le contenu s’affiche correctement sans barre de défilement sur les grands et les petits écrans, spécifiez les paramètres suivants pour tous les conteneurs contenant le contenu :

• La propriété width: 100% doit toujours être spécifiée.
• La limite de la largeur pour le plus grand écran. La largeur recommandée ne doit pas dépasser 800px, car cette valeur convient mieux à la lecture.

Ne spécifiez pas la propriété line-height dans % ou em. Utilisez uniquement des pixels pour que les e-mails aient la même apparence dans toutes les applications de messagerie et sur différents écrans.

Utilisation des polices

Utilisez des polices standard. La plupart des applications de messagerie ne prennent pas en charge les polices externes.

Polices standard :

• avec empattements : Courier, Courier New, Georgia, Times, Times New Roman
• sans empattements : Arial, Black, Tahoma, Verdana, Trebuchet MS

Pré-en-tête

Longueur du code

Utilisation des images

Lorsque vous développez des e-mails contenant des images, gardez en tête que :

• Les utilisateurs peuvent désactiver les images dans les paramètres de l’application de messagerie.
• Le chargement des images peut prendre trop de temps.
• La qualité des images peut varier d’un écran à l’autre.

Utilisez les formats d’image PNG ou JPEG au lieu du format SVG qui n’est pas pris en charge par la plupart des applications de messagerie.

Pour l’affichage sur des écrans avec une résolution 4K, utilisez une image qui est 2 fois plus grande que la taille requise. Par exemple, selon vos exigences, l’image doit avoir une taille de 400px, obtenez une version de cette image en 800px de large et ajoutez-la à l’e-mail comme suit :

<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

Utilisation des liens

Tout lien doit inclure le schéma et l’hôte. Par exemple, https://site.ru/path. N’utilisez pas de liens relatifs (/path) ni de liens sans schéma (://site.ru/path). Ces types de lien peuvent obtenir automatiquement le schéma file et le navigateur pourrait essayer de télécharger le lien au lieu de l’ouvrir.

Pour éviter qu’un e-mail n’atterrisse dans le dossier spam, spécifiez l’attribut title pour tous les liens. Cet attribut est essentiel pour les personnes handicapées qui dépendent de logiciels d’assistance pour accéder au contenu en ligne.

Vous devez toujours spécifier la couleur de la police pour les liens. Si vous ne le faites pas, l’application de messagerie utilisera sa propre couleur.

Ajoutez une adresse e-mail et un numéro de téléphone sous forme de liens. Notez que les styles des applications peuvent affecter l’affichage correct d’un numéro de téléphone.

Pour ouvrir un lien depuis un e-mail dans un nouvel onglet ou une nouvelle fenêtre, spécifiez l’attribut target="_blank".

Autres recommandations

Comment configurer

L’e-mail que vous envoyez à l’utilisateur doit contenir un texte explicatif et un lien permettant à l’utilisateur de confirmer ses actions. Pour chaque élément de l’e-mail, vous pouvez utiliser :

• votre propre texte, qui sera affiché dans la langue dans laquelle il a été écrit ;
• les textes standard de Xsolla, localisés dans 20 langues.

Les textes Xsolla sont insérés dans le modèle d’e-mail en tant que variables (espaces réservés), par exemple :

• {{subject}} — texte de l’en-tête de l’e-mail.
• {{text}} — texte du corps de l’e-mail.
• {{action_link}} — texte du lien. L’adresse du lien est générée par Xsolla.
• {{button}} — texte du bouton.

Lors de la génération d’un e-mail, le texte de la langue correspondante est utilisé à la place des espaces réservés.

La langue de l’e-mail est sélectionnée en fonction des paramètres régionaux de l’utilisateur. Vous pouvez déterminer les paramètres régionaux de l’utilisateur de l’une des manières suivantes :

• Lors de l’intégration via le widget Login, passez la région de l’utilisateur déterminée par l’interface de votre application au widget lorsqu’il est ouvert. Le widget passe ensuite la région aux méthodes Login API.
• Lors de l’intégration via Login API, passez la région de l’utilisateur déterminée par l’interface de votre application à la méthode Login API lorsque celle-ci est appelée.
• Si vous ne passez pas la région de l’utilisateur, la langue est déterminée en fonction de l’adresse IP ou de la langue du navigateur.

Pour customiser le modèle d’e-mail :

1. Accédez à votre Compte éditeur et ouvrez votre projet > Login.
2. Dans le volet du projet de connexion, cliquez sur Configure.
3. Accédez au bloc Customization et sélectionnez la section Email customization.

4. Sélectionnez le modèle d'e-mail dans la liste déroulante.
5. Si le modèle s'ouvre en mode Preview, cliquez sur la bascule (en haut à droite) pour passer en mode HTML.
6. Ajoutez ou modifiez la mise en page HTML de l'e-mail, en tenant compte des recommandations.
7. Pour vérifier comment l'e-mail sera affiché, passez en mode Preview.

8. Vérifiez la validité du code e-mail.
9. Si nécessaire, modifiez le champ Send emails from : spécifiez le nom de l'expéditeur, qui sera affiché dans l'en-tête de l'e-mail, et l'adresse e-mail de l'expéditeur. Par défaut, le nom de votre projet de connexion est utilisé comme nom d'expéditeur, et l'adresse e-mail est noreply@login.xsolla.com. Lorsque vous remplissez le champ, vous pouvez utiliser n'importe quelle variable commune au format application.name. Par exemple, {{application.name}} <>.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{subject}}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
                <table align="center"
                       background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
                  <tbody>
                    <tr>
                      <td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                              <div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
                                {{subject}}
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center"
                       background="rgba(44,72,98,0.7)"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background: rgba(44,72,98,0.7); width:100%;">    
                  <!-- Block with the email text -->            
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Poursuivre la lecture