E-Mail-Anpassung

So funktioniert's

Das Login-Produkt bietet eine Reihe von Standardvorlagen für E-Mails, die Sie an Ihre Kunden senden:

• Registrierungsbestätigung
• Willkommen
• Bestätigung (mit einem Link und Code)
• Passwortänderung
• Änderung der E-Mail-Adresse
• Code für die Multi-Faktor-Authentifizierung (MFA)
• Änderungen der Einstellungen für die MFA
• Abonnement zu den Neuigkeiten

Die Vorlagen sind in HTML und CSS geschrieben.

Sie können:

• beliebige Änderungen an den Standardvorlagen vornehmen, um das Aussehen und den Inhalt der E-Mails anzupassen;
• Den Versand von E-Mails von Xsolla einrichten, indem Sie Ihren E-Mail-Dienst oder die SendGrid-APP für den Versand verwenden.

Für wen ist es

Partner, die bereits Login integriert haben und die Xsolla-Datenbank oder einen kundenseitigen Speicher nutzen.

Empfehlungen für das Erstellen von E-Mails

Es gibt keinen einheitlichen E-Mail-Entwicklungsstandard für E-Mail-Anwendungen, jede Anwendung zeigt die E-Mails anders an. Sie sollten ein einfaches und und kompaktes Design erstellen, um sicherzustellen, dass Ihre E-Mail in den verschiedenen E-Mail-Anwendungen und auf verschiedenen Geräten ähnlich angezeigt wird.

Allgemeine Struktur

JavaScript und CSS

Sie können keine Multimediainhalte über JavaScript in E-Mails einfügen. Verwenden Sie stattdessen GIF-Bilder, um E-Mails mit Animationen zu erstellen. Um ein Video zu einer E-Mail hinzuzufügen, verwenden Sie ein Bild samt Link, der zur URL mit dem Videoinhalt weiterleitet.

Manche E-Mail-Anwendungen verfügen über eingeschränkte Unterstützung für die CSS3 Features. Denken Sie daran, wenn Sie eine E-Mail-Vorlage erstellen.

Nutzen Sie nur Inline-Styles. Die meisten E-Mail-Programme schließen die im Tag style angegebenen Stile aus.

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

Erstellung durch unabhängige Blöcke

• Falsch angezeigte Blocks auf einem Gerät haben auf die übrigen Blocks keinen Einfluss.
• Sie können einfach Blocks in bestehende E-Mails einfügen und das Ergebnis schnell testen.
• Sie können eine Reihe von Blocks erstellen, die Sie schnell zu E-Mails für verschiedene Zwecke zusammensetzen können.

Arbeit mit Tabellen

E-Mail-Programme haben Probleme mit Blockelementen und der Eigenschaft position: absolute. Verwenden Sie deshalb das Tabellenlayout und vergeben Sie den Tabellenzellen die Attribute align und valign, um eine E-Mail mit Blöcken zu erstellen. Tabellen eignen sich besser für die Darstellung auf verschiedenen Bildschirmen.

Vermeiden Sie es, Zellen über die Attribute colspan und rowspan zu verbinden. Nutzen Sie stattdessen eingefügte Tabellen.

Größe und verwendete Einheiten

Damit der Inhalt auf großen und kleinen Bildschirmen ohne Bildlaufleiste korrekt angezeigt wird, geben Sie die folgenden Einstellungen für alle Container mit dem Inhalt an:

• Die Eigenschaft width: 100% sollte immer angegeben sein.
• Die Breitenbegrenzung für den größten Bildschirm. Die empfohlene Breite sollte 800px nicht überschreiten, da dieser Wert eine optimale Leserlichkeit verspricht.

Geben Sie die Eigenschaft line-height nicht in % oder em an, sondern nur in Pixel, damit E-Mails in allen E-Mail-Programmen und auf verschiedenen Bildschirmen gleich aussehen.

Arbeit mit Schriftarten

Nutzen Sie standardmäßige Schriftarten. Die meisten E-Mail-Programme unterstützen keine externen Schriftarten.

Standardmäßige Schriftarten:

• mit Serifen: Courier, Courier New, Georgia, Times, Times New Roman
• ohne Serifen: Arial, Black, Tahoma, Verdana, Trebuchet MS

Preheader

Codelänge

Arbeit mit Bildern

Beachten Sie beim Erstellen von E-Mails mit Bildern an Folgendes:

• Benutzer können die Darstellung von Bildern in den Einstellungen der E-Mail-Programme deaktivieren.
• Bilder verlängern mitunter die Ladezeiten.
• Die Bildqualität variiert mitunter auf verschiedenen Bildschirmen.

Verwenden Sie die Bildformate PNG oder JPEG anstelle des SVG-Formats, da letzteres von den meisten E-Mail-Programmen nicht unterstützt wird.

Bilder für 4K-Monitore sollten doppelt so groß sein wie die empfohlene Größe. Bei einem 400px breiten Bild müssen Sie sich beispielsweise die 800px breite Version desselben Bilds besorgen und der E-Mail hinzufügen.

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

Arbeit mit Links

Jeder Link sollte das Schema und den Host enthalten. Zum Beispiel: https://site.ru/path. Verwenden Sie keine relativen Links (/path) und Links ohne Schema (://site.ru/path). Derartigen Links kann automatisch das Schema file zugewiesen werden, woraufhin der Browser versucht, die Datei herunterzuladen, anstatt sie zu öffnen.

Damit E-Mails nicht im Spam-Ordner landen, geben Sie für alle Links das Attribut title an. Dieses Attribut hilft Menschen mit Behinderung, die auf zusätzliche Software angewiesen sind, auf Webinhalte zuzugreifen.

Sie sollten immer die Schriftfarbe für Links angeben. Wenn Sie die Farbe nicht angeben, verwendet das E-Mail-Programm seine eigene Farbe.

E-Mail-Adressen und Telefonnummern sind als Links einzufügen. Die Stile der Programme können die korrekte Anzeige einer Telefonnummer beeinflussen.

Um einen Link aus einer E-Mail in einem neuen Tab oder Fenster zu öffnen, geben Sie das Attribut target="_blank" an.

Sonstige Empfehlungen

Wie komme ich dazu

Die E-Mail, die Sie an den Kunden versenden, sollte einen erklärenden Text und einen Link zur Bestätigung der Aktionen des Benutzers enthalten. Für jedes Element der E-Mail können Sie Folgendes verwenden:

• Ihren eigenen Text, der in der gleichen Sprache verwendet wird, in der er geschrieben wurde;
• Xsolla Standardtexte, die in 20 Sprachen lokalisiert wurden.

Xsolla Texte werden in die E-Mail-Vorlage als Variablen (Platzhalter) eingefügt, zum Beispiel:

• {{subject}} – den Text der E-Mail-Kopfzeile.
• {{text}} – den Text der E-Mail.
• {{action_link}} – den Text mit den Links. Die Link-Adresse wird von Xsolla generiert.
• {{button}} – den Text der Schaltflächen.

Wenn Sie eine E-Mail generieren, wird anstatt von Platzhaltern der Text der entsprechenden Sprache eingefügt.

Die Sprache für die E-Mail wird anhand des Gebietsschemas des Benutzers ausgewählt. Folgende Methoden stehen zur Bestimmung des Gebietsschemas des Benutzers zur Verfügung:

• Bei der Integration über das Login-Widget können Sie das Gebietsschema des Benutzers von der Schnittstelle Ihrer Anwendung an das Widget übertragen, wenn es geöffnet wird. Das Widget überträgt dann das Gebietsschema an die Login-API-Methoden.
• Bei der Integration über die Login-API können Sie das Gebietsschema des Benutzers von der Schnittstelle Ihrer Anwendung an die Login-API-Methode übertragen, wenn die Methode aufgerufen wird.
• Wenn Sie das Gebietsschema des Benutzers nicht übertragen, wird die Sprache anhand der IP-Adresse oder der Sprache des Browsers bestimmt.

So passen Sie die E-Mail-Vorlage an:

1. Navigieren Sie im Kundenportal zu Ihr Projekt > Login.
2. Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
3. Scrollen Sie zum Block Anpassung, und wählen Sie E-Mail-Anpassung.

4. Wählen Sie die E-Mail-Vorlage aus der Drop-Down-Liste.
5. Wenn die Vorlage im Vorschau-Modus geöffnet wird, klicken Sie auf die Umschaltfläche (oben rechts), um zum HTML-Modus zu wechseln.
6. Ergänzen oder ändern Sie den HTML-Layout der E-Mail unter Berücksichtigung der Empfehlungen.
7. Um zu prüfen, wie das E-Mail angezeigt wird, wechseln Sie in den Vorschau-Modus.

8. Prüfen Sie die Gültigkeit des E-Mail-Codes.
9. Wenn nötig, bearbeiten Sie das Feld Sende E-Mails von: geben Sie den Namen des Absenders ein, der in der Kopfzeile der E-Mail angezeigt wird, und die E-Mail-Adresse des Absenders. Der Name Ihres Login-Projekts wird als Standardversandname angezeigt und als Standardadresse erscheint noreply@login.xsolla.com. Wenn Sie das Feld ausfüllen, können Sie beliebige Variablen des Formulars application.name verwenden. Zum Beispiel: {{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>

Weitere Informationen