Mails aus Operator mit HTML ansprechender gestalten

Enreach Info
Enreach Info
  • Aktualisiert

Liebe Wholesale-Partner,

Sie haben sich schon lange gewünscht, die von Operator versendeten E-Mails ansprechender gestalten zu können. Das ist ab sofort möglich. Professionellen und modernen Layouts steht damit nichts mehr im Wege.

Aktuell besteht kein dringender Handlungsbedarf, HTML-Mails zu konfigurieren. Sie können die neuen Möglichkeiten jedoch ab sofort nutzen.

Im Folgenden geben wir Ihnen eine kurze Einführung mit Beispielen.

Übersicht

Das Grundprinzip besteht darin, einen HTML-Header-Block und einen HTML-Footer-Block einzufügen.

Beispiel

Die Willkommens-E-Mail für einen neuen Operator-Benutzer könnte zum Beispiel so aussehen:

htmlemail_1.png

Der Text der Systemnachricht bleibt unverändert, wird jedoch in ein ansprechenderes Layout eingebettet.


Wie funktioniert es konkret?

Um dieses Layout zu erreichen, sind nur zwei Schritte erforderlich:

  1. Definieren Sie die HTML-Header- und HTML-Footer-Blöcke.
  2. Verwenden Sie diese Blöcke anschließend mit [email_header] und [email_footer] in einer Systemnachricht.

1. HTML Header und Footer definieren

Den HTML-Code hinterlegen Sie in Operator unter Menü / Tools / Systemnachrichten konfigurieren. Auf dieser Seite finden Sie oben rechts die neue Schaltfläche Header & Footers. Dort gelangen Sie zu einem Dialog, in dem Sie HTML- bzw. E-Mail-Header, -Footer und den bereits verwendeten FOOTER-Text verwalten können:
 

htmlemail_2.png

 

Vollständige HTML-Code-Beispiele finden Sie in den letzten beiden Kapiteln dieser Anleitung.

2. HTML-Blöcke in die Systemnachricht einbinden

Wenn Sie eine Systemnachricht mit HTML verwenden möchten, fügen Sie am Anfang und am Ende der Nachricht [email_header] bzw. [email_footer] ein. Öffnen Sie zum Beispiel die Nachricht für einen neuen Benutzer und passen Sie sie wie folgt an:

[email_header]

Sehr geehrte/r Teilnehmerin/Teilnehmer,

für Sie wurde ein Benutzer-Account im Operator Portal (https://operator-demo.enreach.de) angelegt.

Benutzername: [username]

Klicken Sie bitte auf diesen Link, um im Operator Portal ihr Kennwort festzulegen: [RESET_LINK]



[email_footer]

 

Oben rechts finden Sie die Schaltfläche Vorschau. Probieren Sie sie gerne aus. Um die Vorschau zu schließen, klicken Sie einfach irgendwo außerhalb des Vorschaufensters in den Browser.

Schaltflächen für die Vorschau finden Sie auch in der Übersicht der Systemnachrichten. Der Button ganz rechts versendet eine Test-E-Mail an die E-Mail-Adresse des aktuell angemeldeten Administrators.

 

htmlemail_3.png
 

HTML-Header Code-Beispiel

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="x-apple-disable-message-reformatting" />
 <meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
 <meta name="theme-color" content="#39006c" />
 <meta name="color-scheme" content="light" />
 <title></title>
 <!--[if mso]>
 <noscript>
  <xml>
   <o:OfficeDocumentSettings>
    <o:AllowPNG />
    <o:PixelsPerInch>96</o:PixelsPerInch>
   </o:OfficeDocumentSettings>
  </xml>
 </noscript>
 <![endif]-->
 <style type="text/css">:root { color-scheme: light; }
  body, table, td, p, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table { border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
  #outlook a { padding: 0; }
  .ExternalClass, .ReadMsgBody { width: 100%; }
  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
  /* Outer card with padding; hero floats inside with rounded corners */
  .outer-card { border-radius: 32px; background-color: #ffffff; }
  .hero-float { border-radius: 32px; overflow: hidden; }
  .content-block { border-radius: 0 0 16px 16px; }
  @media only screen and (max-width: 620px) {
   .wrapper { width: 100% !important; min-width: 100% !important; }
   .outer-card { border-radius: 40px !important; padding: 12px !important; }
   .hero-float { border-radius: 24px !important; }
   .container { padding-left: 20px !important; padding-right: 20px !important; }
  }</style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #ebeae6; font-family: -apple-system, BlinkMacSystemFont, &amp;amp;amp;apos;Segoe UI&amp;amp;amp;apos;, Roboto, &amp;amp;amp;apos;Helvetica Neue&amp;amp;amp;apos;, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #333333;">
 <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #ebeae6;">
  <tr>
   <td align="center" style="padding: 32px 44px 44px 44px;">
    <!-- Top bar: logo left, Log in right -->
    <table role="presentation" class="wrapper" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 600px; max-width: 600px; margin-bottom: 14px;">
     <tr>
      <td style="padding: 0 0 8px 0;">
       <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
         <td><img src="https://operator-demo.enreach.de/account/logo/id/60597" alt="Operator Online" /></td>
         <td align="right">
          <a href="#" style="display: inline-block; padding: 12px 24px; font-size: 15px; font-weight: 600; color: #fff !important; text-decoration: none; border-radius: 999px; background-color: #6e9ca5;">Login</a>
         </td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
    <!-- Outer card: padding so hero floats inside -->
    <table role="presentation" class="wrapper outer-card" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 600px; max-width: 600px; border-radius: 32px; background-color: #ffffff;">
     <tr>
      <td style="padding: 30px; border-radius: 32px; background-color: #ffffff;">
       <!-- Floating hero (inset by outer card padding) -->
       <table role="presentation" class="hero-float" width="100%" cellspacing="0" cellpadding="0" border="0" style="border-radius: 32px; overflow: hidden; margin-bottom: 0;">
        <tr>
         <td style="background-color: #4263f6; background-image: url(https://www.enreach.com/uploads/cache/content_image_small/uploads/media/66c45c4133e07/enreach-contact-slide-home.webp?originalExtension=jpg); background-size: cover; background-position: center; height: 200px; border-radius: 32px;">
          <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="height: 200px;">
           <tr><td style="height: 200px;">&nbsp;</td></tr>
          </table>
         </td>
        </tr>
       </table>
       <!-- Content block (white, below hero) -->
       <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 0;">
        <tr>
         <td class="container content-block" style="background-color: #ffffff; padding: 36px 40px 40px 40px; border-radius: 0 0 16px 16px;">
       <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
         <td>
          <!-- Start of body content -->

 

 

HTML-Footer Code-Beispiel

<!-- End of body content -->
         </td>
        </tr>
       </table>
         </td>
        </tr>
       </table>
       <!-- Footer -->
       <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 0;">
        <tr>
         <td align="center" style="background-color: #FFFFFF; padding: 20px 40px 32px 40px; font-size: 12px; line-height: 18px; color: #8A8A8A; border-radius: 0 0 16px 16px; border-top: 1px solid #EBEAE6;">
             IHRE FIRMA | Ihre Straße 16 | D-12345 Ihr Ort <br>
             weitere Informationen im Footer<br>
         </td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
    <!-- Minimal footer -->
    <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 600px; max-width: 600px; margin-top: 24px;">
     <tr>
      <td align="center" style="font-size: 11px; color: #B0B0B0;"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html>

 

Für Rückfragen steht ihnen unser Support und das BSS-Team gerne zur Verfügung.

Ihr Enreach Support.
 

War dieser Beitrag hilfreich?

1 von 1 fanden dies hilfreich

Haben Sie Fragen? Anfrage einreichen

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.