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.

Hinweis
In allen oben erwähnten Fällen (Registrierungsbestätigung, Willkommensnachricht, usw.) sendet Xsolla E-Mails an Ihre Benutzer. Sie können diese Feature nicht deaktivieren.
Achtung
E-Mails lassen sich erst anpassen, wenn Sie die Produktlizenzvereinbarung unterschrieben haben. Wechseln Sie dafür im Kundenportal zum Abschnitt Vereinbarungen.

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.

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

Erstellung durch unabhängige Blöcke

Wir empfehlen Ihnen, die wirksamste E-Mail-Entwicklungsmethode über unabhängige Blocks zu verwenden. Dieser Ansatz hat folgende Vorteile:

  • 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

Die meisten E-Mail-Programme zeigen einen Preheader als E-Mail-Vorschau an. Deshalb sollten Sie immer einen Preheader hinzufügen. Er motiviert Benutzer, empfangene E-Mails zu öffnen. In manchen E-Mail-Programmen wird der Betreff der E-Mail abgeschnitten bzw. unvollständig angezeigt, ein Preheader hilft daher den Benutzern, den Inhalt der E-Mail zu verstehen.

Codelänge

Reduzieren Sie die Codelänge, damit E-Mails korrekt angezeigt werden. Gmail und Yahoo haben z. B. Probleme, E-Mails anzuzeigen, die größer als 100 kB sind.

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.

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

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

Weitere Empfehlungen für die Erstellung adaptiver E-Mails.

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.

Um die E-Mail-Vorlage zu personalisieren:

  1. In Ihrem Kundenportal öffnen Sie Ihr Projekt > Login.
  2. Klicken Sie auf Konfigurieren Im Panel des Login-Projekts.
  3. Auf der Navigationsseite wechseln Sie zum Block Anpassung und wählen Sie E-Mail-Anpassung.

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

  1. Prüfen Sie die Gültigkeit des E-Mail-Codes.
  2. 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}} <support@yourcompany.com>.

Hinweis
Nicht personalisierte E-Mails verwenden Standardvorlagen von Xsolla.

Beispiel einer E-Mail-Vorlage

Copy
Full screen
Small screen
<!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>

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!

Weitere Informationen

Letztmalig aktualisiert: 8. August 2022

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!