> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Materialien E-Marketing-Manager

> Die beiden Newsletter-Templates des E-Marketing-Managers: incl_newsletter.htm für An- und Abmeldung und Verwaltung, incl_newsletter_onlineview.htm für die Online-Ansicht.

Der E-Marketing-Manager braucht im Shop zwei Templates: eines für An- und Abmeldung und die Verwaltung der eigenen Einstellungen, und eines für die Online-Ansicht des Newsletters. Diese Seite enthält beide als Ausgangspunkt.

Kopieren Sie die Dateien unter den angegebenen Namen in Ihr Templateverzeichnis. Alle Beschriftungen sind Beispieltexte.

Wegweiser: [E-Marketing-Manager](https://dokumentation.websale.de/v8s/marketing-funktionen/e-marketing-manager.md) · Referenz: [E-NL-Tags](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md)

## Die beiden Templates

| Datei | Aufgabe |
| - | - |
| `incl_newsletter.htm` | Anmeldung, Abmeldung und Verwaltung, alles in einem Formular |
| `incl_newsletter_onlineview.htm` | zeigt einen versendeten Newsletter im Browser an |

## incl\_newsletter.htm

Das Template enthält drei Bereiche in einem einzigen Formular. Welcher davon erscheint, entscheidet der Shop über die drei Abschnitts-Tags `E-NL-SEC-subscribe`, `E-NL-SEC-unsubscribe` und `E-NL-SEC-manage`. Das versteckte Feld `logintype` sagt dem Server anschließend, welcher Bereich abgeschickt wurde.

> [accordion] incl\_newsletter.htm
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>Inhaltsseite für die An- und Abmeldung zum Newsletter</title>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
> <base href="~URL-Template~">
> </head>
>
> <body>
> {WS-Include}
> {E-NL-SEC-subscribe}<h1>Newsletter-Anmeldung</h1>{/E-NL-SEC-subscribe}
> {E-NL-SEC-unsubscribe}<h1>Newsletter-Abmeldung</h1>{/E-NL-SEC-unsubscribe}
> {E-NL-SEC-manage}<h1>Newsletter-Verwaltung</h1>{/E-NL-SEC-manage}
>
> <form id="WSNL_FORM" action="~FORM-Template(tpl_newsletter.htm)~" method="post" class="newsletter">
>    <input type="hidden" name="NLact" value="Login">
>    <div id="WSNL_ErrorMsg">
>       {E-NL-SEC-ajax}<ws-ajax-WSNL_ErrorMsg>{/E-NL-SEC-ajax}
>          ~E-NL-MSG-Error~
>       {E-NL-SEC-ajax}</ws-ajax-WSNL_ErrorMsg>{/E-NL-SEC-ajax}
>    </div>
>    <div id="WSNL_InfoMsg">
>       {E-NL-SEC-ajax}<ws-ajax-WSNL_InfoMsg>{/E-NL-SEC-ajax}
>          ~E-NL-MSG-Info~
>       {E-NL-SEC-ajax}</ws-ajax-WSNL_InfoMsg>{/E-NL-SEC-ajax}
>    </div>
>    <script type="text/javascript">
>       if($.trim($("#WSNL_ErrorMsg").text()) == "") { $("#WSNL_ErrorMsg").hide(); }
>       if($.trim($("#WSNL_InfoMsg").text()) == "") { $("#WSNL_InfoMsg").hide(); }
>    </script>
>
>    {E-NL-SEC-subscribe}
>       <label>Anrede</label>
>       ~E-NL-INPUT-Salutation(~E-NL-A-Salutation~, class="select_salutation~E-NL-A-Salutation_error~")~
>       <label>Titel</label>
>       <input type="text" name="~E-NL-A-Title_name~" value="~E-NL-A-Title~" class="input~E-NL-A-Title_error~" maxlength="20">
>       ~E-NL-A-Title_hidden~
>       <label>Vorname</label>
>       <input type="text" name="~E-NL-A-FirstName_name~" value="~E-NL-A-FirstName~" class="input~E-NL-A-FirstName_error~" maxlength="50">
>       ~E-NL-A-FirstName_hidden~
>       <label>Nachname</label>
>       <input type="text" name="~E-NL-A-LastName_name~" value="~E-NL-A-LastName~" class="input~E-NL-A-LastName_error~" maxlength="50">
>       ~E-NL-A-LastName_hidden~
>       <label>Ihre E-Mail-Adresse *</label>
>       <input type="text" name="~E-NL-A-E-mail_name~" value="~E-NL-A-e-mail~" class="input~E-NL-A-e-mail_error~">
>       <h2>Bitte wählen Sie Ihre Interessengebiete</h2>
>       <input type="checkbox" value="1" name="~E-NL-Targetgroup_name(1)~" ~E-NL-Targetgroup_checked(1)~>
>       ~E-NL-TargetGroup_hidden(1)~ ~E-NL-TargetGroup(1)~
>       <input type="hidden" name="logintype" value="subscribe">
>       <input type="submit" class="WSNL_button" value="Zum Newsletter anmelden">
>    {/E-NL-SEC-subscribe}
>
>    {E-NL-SEC-unsubscribe}
>       <label>Ihre E-Mail-Adresse *</label>
>       <input type="text" name="~E-NL-A-E-mail_name~" value="~E-NL-A-e-mail~" class="input~E-NL-A-e-mail_error~">
>       <h2>Abmeldung vom Newsletter und allen Newsletter-Listen</h2>
>       <input type="checkbox" value="blacklist" name="~E-NL-BlackList_name~" ~E-NL-BlackList_checked~ id="blackbox_checkbox">
>       ~E-NL-BlackList_hidden~
>       Ja, ich möchte aus allen Versandlisten entfernt werden.
>       <input type="hidden" name="logintype" value="unsubscribe">
>       <input type="submit" class="WSNL_button" value="Vom Newsletter abmelden">
>    {/E-NL-SEC-unsubscribe}
>
>    {E-NL-SEC-manage}
>       <!-- Optionaler Bereich für die Newsletter-Verwaltung durch einen angemeldeten Kunden -->
>       <input type="hidden" name="logintype" value="manage">
>       <div id="WSNL_Manage">
>          {E-NL-SEC-ajax}<ws-ajax-WSNL_Manage>{/E-NL-SEC-ajax}
>          {E-NL-Receiver}
>             <p>Hier können Sie Ihre Daten und Einstellungen zum Newsletterversand verwalten.</p>
>          {/E-NL-Receiver}
>
>          {!E-NL-Receiver}
>             <p>Wir freuen uns, wenn Sie sich für unseren Newsletter interessieren!
>             Wenn Sie sich zum Newsletterversand anmelden möchten, füllen Sie bitte untenstehende Felder aus und wählen Sie Ihr Themengebiet.
>             Sie erhalten dann ab sofort unseren Newsletter zugesandt.</p>
>          {/!E-NL-Receiver}
>
>          <h2>Ihre Daten</h2>
>          <label>Firma</label>
>          <input type="text" name="~E-NL-A-Company_name~" value="~E-NL-A-Company~" maxlength="50" class="input~E-NL-A-Company_error~">
>          ~E-NL-A-Company_hidden~
>          <label>Anrede</label>
>          ~E-NL-INPUT-Salutation(~E-NL-A-Salutation~, class="select_salutation~E-NL-A-Salutation_error~")~
>          <label>Titel</label>
>          <input type="text" name="~E-NL-A-Title_name~" value="~E-NL-A-Title~" class="input~E-NL-A-Title_error~" maxlength="20">
>          ~E-NL-A-Title_hidden~
>          <div class="clear"></div>
>          <label>Vorname</label>
>          <input type="text" name="~E-NL-A-FirstName_name~" value="~E-NL-A-FirstName~" class="input~E-NL-A-FirstName_error~" maxlength="50">
>          ~E-NL-A-FirstName_hidden~
>          <label>Name</label>
>          <input type="text" name="~E-NL-A-LastName_name~" value="~E-NL-A-LastName~" class="input~E-NL-A-LastName_error~" maxlength="50">
>          ~E-NL-A-LastName_hidden~
>          <div class="clear"></div>
>          <label>Straße</label>
>          <input type="text" name="~E-NL-A-Street1_name~" value="~E-NL-A-Street1~" class="input~E-NL-A-Street1_error~" maxlength="80">
>          ~E-NL-A-Street1_hidden~
>          <label>Land</label>
>          ~E-NL-INPUT-Country(~E-NL-A-Country~, class="select_country~E-NL-A-Country_error~")~
>          <label>PLZ</label>
>          <input type="text" name="~E-NL-A-Zip_name~" value="~E-NL-A-Zip~" class="input_zip~E-NL-A-Zip_error~" maxlength="12">
>          ~E-NL-A-Zip_hidden~
>          <label>Ort</label>
>          <input type="text" name="~E-NL-A-City_name~" value="~E-NL-A-City~" class="input_city~E-NL-A-City_error~" maxlength="100">
>          ~E-NL-A-City_hidden~
>          <label>Ihre E-Mail-Adresse</label>
>          <input type="text" name="~E-NL-A-EMail_name~" value="~E-NL-A-EMail~" class="input~E-NL-A-EMail_error~">
>          <h2>Bitte wählen Sie Ihre Interessengebiete</h2>
>          <input type="checkbox" value="1" name="~E-NL-Targetgroup_name(1)~" ~E-NL-Targetgroup_checked(1)~>
>          ~E-NL-TargetGroup_hidden(1)~ ~E-NL-TargetGroup(1)~
>
>          {E-NL-Receiver}
>             <input type="submit" value="Einstellungen speichern" class="button">
>          {/E-NL-Receiver}
>          {!E-NL-Receiver}
>             <input type="submit" value="Newsletter bestellen" class="button">
>          {/!E-NL-Receiver}
>
>          {E-NL-Receiver}
>             <h2>Newsletter abbestellen oder vorübergehend deaktivieren</h2>
>             <p>Hier können Sie sich jederzeit abmelden. Sofort nach dem Absenden tragen wir Sie aus unserer Newsletter-Liste aus
>             und Sie erhalten keine weiteren Nachrichten mehr. Wir bedauern Ihre Entscheidung und bedanken uns für Ihr bisheriges Interesse.</p>
>             <input type="radio" value="~E-NL-StatusActive_value~" name="~E-NL-Status_name~" ~E-NL-StatusActive_checked~>
>             Ich möchte den Newsletter weiterhin erhalten.
>             <input type="radio" value="~E-NL-StatusPaused_value~" name="~E-NL-Status_name~" ~E-NL-StatusPaused_checked~>
>             Ich möchte den Newsletter vorübergehend abbestellen bis:
>             <input type="text" name="~E-NL-Pause_name~" value="~E-NL-Pause~" class="Input~E-NL-PauseTillDate_error~" maxlength="12" id="ws_nl_datepicker">
>             <input type="hidden" value="~E-NL-PauseTypeDate~" name="~E-NL-PauseType_name~">
>             <input type="radio" value="~E-NL-StatusBlackList_value~" name="~E-NL-Status_name~" ~E-NL-StatusBlackList_checked~>
>             Ich möchte mich vom Newsletter abmelden und aus allen Versandlisten entfernt werden.
>             ~E-NL-Status_hidden~
>             <input type="submit" value="Einstellungen speichern">
>          {/E-NL-Receiver}
>
>          {E-NL-SEC-ajax}</ws-ajax-WSNL_Manage>{/E-NL-SEC-ajax}
>       </div>
>    {/E-NL-SEC-manage}
>
> </form>
> {/WS-Include}
>
> </body>
> </html>
> ```

### Die versteckten Felder sind nicht optional

Jedes Eingabefeld hat ein Gegenstück mit der Endung `_hidden`, beispielsweise `~E-NL-A-Title_hidden~` neben dem Titelfeld. Lassen Sie keines davon weg. Warum sie gebraucht werden und was ohne sie passiert, steht auf der Referenzseite zum Abonnement.

Referenz: [E-NL, Abonnement verwalten](https://dokumentation.websale.de/v8s/referenz/tags/e-nl/abonnement-verwalten.md)

### Das Datum der Pause

Das Eingabefeld für "vorübergehend abbestellen bis" erwartet das Datum im Format `JJJJ-MM-TT`, also beispielsweise `2026-12-24`. Genau so gibt `~E-NL-Pause~` es auch aus.

> [!WARNING]
>
> Wenn Sie an dieses Feld einen Datepicker hängen, stellen Sie ihn auf dieses Format ein. Ein deutsch formatiertes Datum kann der Server nicht lesen. Statt einer Fehlermeldung setzt er die Pause dann auf einen Zeitpunkt in der Vergangenheit, womit sie sofort wieder endet.

### Die Abmeldung braucht mehr als die Checkbox

Der Abmeldebereich im Beispiel enthält nur die Checkbox für die vollständige Sperrung. Das reicht nicht für alle Fälle: Wenn der Empfänger diese Checkbox nicht ankreuzt, erwartet der Server mindestens ein angekreuztes Interessengebiet, von dem abgemeldet werden soll. Ohne eines bricht er mit einer Fehlermeldung ab.

Ergänzen Sie im Abmeldebereich also dieselben Interessengebiets-Checkboxen wie im Anmeldebereich, jeweils mit ihrem `_hidden`-Tag.

## incl\_newsletter\_onlineview\.htm

Dieses Template ist kurz. Es zeigt einen bereits versendeten Newsletter im Browser an, für Empfänger, bei denen die Darstellung im Mailprogramm nicht funktioniert.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Inhaltsseite für die Online-Ansicht des Newsletters</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <base href="~URL-Template~">
</head>

<body>
{WS-Include}
{E-NL-SEC-ShowOnlineNewsletter}
   <!-- Bereich für die Online-Ansicht des Newsletters -->
   <p>~E-NL-OnlineView~</p>
{/E-NL-SEC-ShowOnlineNewsletter}
{E-NL-SEC-ShowErrorOnlineView}
   <!-- Bereich für eine Hinweismeldung, wenn die Online-Ansicht des Newsletters derzeit nicht möglich ist -->
   <p>Es ist ein Fehler aufgetreten. Der Newsletter konnte nicht korrekt geladen werden!</p>
{/E-NL-SEC-ShowErrorOnlineView}
{/WS-Include}
</body>
</html>
```

`~E-NL-OnlineView~` liefert den vollständigen Newsletter als HTML. Das Beispiel packt ihn in ein `p`-Element, in dem Blockelemente eigentlich nichts verloren haben. Verwenden Sie besser ein `div`, sonst bricht der Browser das Element eigenmächtig auf.

## Zwei Hinweise zu beiden Templates

Beide Beispiele tragen den HTML-4.01-Doctype und `charset=ISO-8859-1`. Für einen neuen Shop übernehmen Sie stattdessen den Doctype und den Zeichensatz Ihrer übrigen Templates, üblicherweise HTML5 und UTF-8. Die `E-NL-`Tags arbeiten mit beidem.

Die Beschriftungen stehen in den Beispielen als `label`-Elemente ohne Bezug zum jeweiligen Feld. Damit ein Klick auf die Beschriftung das Feld anspringt und Screenreader die Zuordnung erkennen, geben Sie jedem Eingabefeld eine `id` und verweisen aus dem `label` mit `for` darauf.

## Wo die Tags beschrieben sind

Diese Seite erklärt die beiden Beispieldateien. Die vollständige Beschreibung aller `E-NL-`Tags steht auf den vier Referenzseiten, nach Themen geordnet.

Referenz: [E-NL, Anmeldeformular](https://dokumentation.websale.de/v8s/referenz/tags/e-nl/anmeldeformular.md) · Abonnement verwalten · Seitenzustände und Meldungen · Gutscheine

Die Beispiele nutzen nur einen Teil davon. Lohnend sind vor allem `E-NL-TargetGroup_definition(n)` für einen erklärenden Text neben der Checkbox, `E-NL-A-Street2` für die zweite Straßenzeile und `E-NL-Subshop()`, wenn Ihre Subshops unterschiedliche Interessengebiete anbieten.


## Related topics

- [E-Marketing-Manager](https://dokumentation.websale.de/v8s/marketing-funktionen/e-marketing-manager.md)
- [REST eMarketingManager](https://dokumentation.websale.de/v8s/schnittstellen/rest-osb-dienste/rest-emarketingmanager.md)
- [Migration von Newsletter V2 zu E-Marketing-Manager](https://dokumentation.websale.de/v8s/marketing-funktionen/migration-von-newsletter-v2-zu-e-marketing-manager.md)
- [Allgemeine Online-Dienste](https://dokumentation.websale.de/v8s/online-servicebereich/allgemeine-online-dienste.md)
- [Externe Dienste und Schnittstellen](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/externe-dienste-und-schnittstellen.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.