Wie entwickle ich E-Mail-Vorlagen für promio.connect?

Das folgende Dokument enthält technische Informationen zur Entwicklung von E-Mail-Vorlagen für promio.connect.

Allgemeine Informationen

Sonderzeichen müssen XML-konforme Entitäten enthalten:
- "
- &
- '
- <
- >
- für alle anderen Entitäten müssen Sie die Dezimalsyntax verwenden; benutzen Sie z.B.   instead of  
UTF-8 4-byte Zeichen werden derzeit nicht unterstützt. Sie können die Bytelänge mit verschiedenen Tools überprüfen, z.B. UTF-8 Tool.
Die Zeilenlänge im Quellcode darf 700 Zeichen nicht überschreiten.

Wenn Sie eine IDE zur Entwicklung der Vorlage verwenden, verwenden Sie die folgenden Namespaces für die korrekte Syntaxhervorhebung:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:pme="http://www.promio.net/pmeType"
      xmlns:pm="http://www.promio.net/pmType">
</html>

OTML

OTML ist eine Erweiterung des HTML-Standards, die speziell für die Verwendung im E-Mail-Editor von promio.connect entwickelt wurde. Daher sind HTML- und CSS-Kenntnisse zwingend erforderlich.

OTML ermöglicht es, bestimmte Teile einer E-Mail editierbar zu machen. Die Gesamtstruktur der E-Mail bleibt dabei unverändert. Der E-Mail-Entwickler erstellt die E-Mail zunächst wie gewohnt. Anschließend können alle gewünschten Teile mithilfe von OTML editierbar gemacht werden.

Die OTML-Elemente sind in zwei Namensräume unterteilt: „pm“ und „pme“: * „pm“-Elemente dienen der automatischen Generierung oder Integration von Inhalten, wie z. B. Inhaltsverzeichnissen oder Datenquellen. * „pme“-Elemente sind vom Benutzer editierbare Elemente, z. B. einzeilige und mehrzeilige Editoren.

Bearbeitbarer Titel

Wenn Sie möchten, dass der Benutzer den Titel der E-Mail bearbeiten kann, fügen Sie Ihrem Tag <title> das Attribut editable=„true“ hinzu. Dies hat meist nur dann Auswirkungen, wenn die E-Mail in der eigenständigen Browserversion geöffnet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title editable="true">E-Mail Title</title>
  </head>
  <body>
    <div>
      <a href="http://system.promio-mail.com/view/" target="_blank">
        Please click here if you can't read this E-Mail.
      </a>
    </div>
  ...

Repeater

Ein Repeater wird durch das OTML-Tag „<pme:repeater />“ dargestellt.

Ein Repeater-Element definiert einen Bereich mit sich wiederholenden Blöcken und muss ein oder mehrere <pme:layout />-Elemente enthalten. Jedes Layout kann dann vom Nutzer über eine Auswahlliste zur E-Mail hinzugefügt werden.

Das Repeater-Element kann ein oder mehrere <pme:repeatercontent />-Elemente enthalten.

Eine genaue Anleitung zur Erstellung eines Creatives mit dem E-Mail-Builder finden Sie im Artikel „Wie erstelle ich ein Creative mit dem E-Mail-Builder?“.

Individuelle Erläuterungen zu Ihren eigenen Templates können in einer mandantensprezifischen Wiki hinterlegt werden. Der Mandant benötigt hierzu eine Lizenz. Bei Interesse kontaktieren Sie bitte unseren Support.

Attribut	Typ	Erforderlich	Beschreibung
Titel	Zeichenfolge	Nein	Titel des Repeaters. Dies ist nützlich, wenn Sie mehr als einen Repeater in Ihrer Vorlage verwenden.

Beispiel

<pme:repeater>
 
	<pme:layout name="Layout 1">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 1</td>
		</tr>
	</table>
	</pme:layout>
 
	<pme:layout name="Layout 2">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 2</td>
		</tr>
	</table>
	</pme:layout>
 
	<pme:repeatercontent>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 1</td>
		</tr>
	</table>
	</pme:repeatercontent>
 
</pme:repeater>

Layout

Ein Layout wird durch das OTML-Tag „<pme:layout />“ dargestellt.

Ein Layout-Element enthält eine Vorlage, die der E-Mail hinzugefügt werden kann. Es ist ein Unterelement des Elements „<pme:repeater>“ und kann mehrfach hinzugefügt werden.

Attribut	Typ	Erforderlich	Beschreibung
Name	Zeichenfolge	Ja	Eindeutiger Name für das Layout

Beispiel

<pme:repeater>
 
	<pme:layout name="Layout 1">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 1</td>
		</tr>
	</table>
	</pme:layout>
 
</pme:repeater>

Repeater-Inhalte

Ein Repeater-Inhalt wird durch das OTML-Tag „<pme:repeatercontent />“ repräsentiert.

Der Repeater-Inhalt bestimmt einen vordefinierten Teil eines „<pme:repeater />“-Elements und verhält sich genau wie ein „<pme:layout />“-Element. Er ist ein Unterelement des „<pme:repeater>“-Elements und kann mehrfach hinzugefügt werden. Mit dem „<pme:repeatercontent />“-Element ist es möglich, ein „<pme:repeater />“-Element vorab zu füllen.

Beispiel

<pme:repeater>
 
	<pme:layout name="Layout 1">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 1</td>
		</tr>
	</table>
	</pme:layout>
 
	<pme:repeatercontent>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>Layout 1</td>
		</tr>
	</table>
	</pme:repeatercontent>
 
</pme:repeater>

Preheader

Ein Preheader wird durch das OTML-Tag „<pme:preheader />“ dargestellt.

Ein Preheader ist der Vorschautext, der in den meisten E-Mail-Clients unter dem Absender angezeigt wird.

Während der E-Mail-Erstellung wird der Inhalt des Preheader-Elements direkt nach dem Tag „<body>“ eingefügt. Alle von promio.connect bereitgestellten Tracking-Pixel werden nach dem Preheader eingebettet. Dadurch ist für den Endnutzer kein HTML-Quellcode sichtbar.

<pme:preheader>This is the preheader text.</pme:preheader>

Singleline

Ein einzeiliges Element wird durch das OTML-Tag „<pme:singleline />“ repräsentiert.

Das einzeilige Element bietet ein einfaches Texteingabefeld und wird meist für kurze Texte wie Überschriften verwendet.

Attribut	Typ	Erforderlich	Beschreibung
data-pmclass	string	Nein	Der Wert wird als Klasse für das Link-Element festgelegt, wenn dem einzeiligen Element ein Link hinzugefügt wird.
label	string	Nein	Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird.
linkable	boolean	Nein	Wenn „linkable“ „false“ ist, kann kein Link um das einzeilige Element herum hinzugefügt oder geändert werden.
pmtoctitle	string	Nein	Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können.
max-length	integer	Nein	Maximale Zeichenlänge. Der Benutzer kann dieses Limit nicht überschreiten.

Beispiel

<pme:singleline label="Headline" max-lenght="30">My Headline</pme:singleline>
 
<a class="link" href="https://www.promio.net" target="_blank">
	<pme:singleline data-pmclass="link" label="Link">Click me</pme:singleline>
</a>

Multiline und Multiline-Config

Ein mehrzeiliges Element wird durch das OTML-Tag „<pme:multiline />“ dargestellt.

Das mehrzeilige Element bietet einen erweiterten Text- und HTML-Editor basierend auf CKEditor 4. Es wird hauptsächlich für lange Texte oder HTML-Eingaben verwendet.

Attribut	Typ	Erforderlich	Beschreibung
label	string	Nein	Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird.
linkable	boolean	Nein	Ermöglicht das Hinzufügen eines Links um den Editorinhalt. Wenn Sie diese Option aktivieren, empfehlen wir Ihnen, für diese Editoren eine spezielle mehrzeilige Konfiguration zu verwenden, in der der Link-Button aus der Symbolleiste entfernt wird.
pmtoctitle	string	Nein	Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können.
max-length	integer	Nein	Maximale Zeichenlänge. Der Benutzer kann dieses Limit überschreiten, es wird jedoch eine Warnung angezeigt.
config	string	Nein	Name der mehrzeiligen Konfiguration, die für diesen Editor verwendet werden soll.

Beispiel

<pme:multiline label="Text">Lorem ipsum dolor sit amet</pme:multiline>

Der mehrzeilige Editor kann mit einem mehrzeiligen Konfigurationselement konfiguriert werden, das durch den OTML-Tag „<pm:multiline-config>“ repräsentiert wird.

Attribut	Typ	Erforderlich	Beschreibung
Name	Zeichenfolge	Ja	Der Name des Konfigurationselements.
Standard	Boolescher Wert	Nein	Auf „true“ setzen, wenn diese Konfiguration für alle pme:multiline-Elemente verwendet werden soll, für die kein Konfigurationsname angegeben ist.

Der Inhalt einer mehrzeiligen Konfiguration muss eine CKEditor-Konfiguration im JSON-Format sein.

Beispiel

<pm:multiline-config default>
{
  "forcePasteAsPlainText": true,
  "toolbar": [
	{
	  "name": "basicstyles",
	  "items": [
		"Bold",
		"Italic",
		"-",
		"Subscript",
		"Superscript",
		"-",
		"RemoveFormat"
	  ]
	},
	{
	  "name": "links",
	  "items": [
		"Link",
		"Unlink"
	  ]
	},
	{
	  "name": "insert",
	  "items": [
		"Table",
		"SpecialChar"
	  ]
	},
	{
	  "name": "clipboard",
	  "groups": [
		"clipboard",
		"undo"
	  ],
	  "items": [
		"Cut",
		"Copy",
		"Paste",
		"-",
		"Undo",
		"Redo"
	  ]
	},
	{
	  "name": "promio",
	  "items": [
		"promioPersFunc",
		"promioTemplates"
	  ]
	},
	{
	  "name": "document",
	  "items": [
		"Source"
	  ]
	},
	{
	  "name": "tools",
	  "items": [
		"Maximize"
	  ]
	}
  ]
}
</pm:multiline-config>
 
<pm:multiline-config name="linkable-editor">
{
  "forcePasteAsPlainText": true,
  "toolbar": [
	{
	  "name": "basicstyles",
	  "items": [
		"Bold",
		"Italic",
		"-",
		"Subscript",
		"Superscript",
		"-",
		"RemoveFormat"
	  ]
	},
	{
	  "name": "insert",
	  "items": [
		"Table",
		"SpecialChar"
	  ]
	},
	{
	  "name": "clipboard",
	  "groups": [
		"clipboard",
		"undo"
	  ],
	  "items": [
		"Cut",
		"Copy",
		"Paste",
		"-",
		"Undo",
		"Redo"
	  ]
	},
	{
	  "name": "promio",
	  "items": [
		"promioPersFunc",
		"promioTemplates"
	  ]
	},
	{
	  "name": "document",
	  "items": [
		"Source"
	  ]
	},
	{
	  "name": "tools",
	  "items": [
		"Maximize"
	  ]
	}
  ]
}
</pm:multiline-config>
 
/* This editor uses the default config */
<pme:multiline>Text</pme:multiline>
 
/* This editor uses the "linkable-editor" config */
<pme:multiline config="linkable-editor">Text</pme:multiline>

Bilder

Bilder haben keine spezielle OTML-Elementdarstellung. Stattdessen verwenden sie das Standard-HTML-Tag „<img />“ mit erweiterten Attributen.

Attribut	Typ	Erforderlich	Beschreibung
pmedit	Boolean	Nein	Wenn pmedit wahr ist, kann das Bild bearbeitet werden.
pmscale	Zeichenfolge	Nein	Mögliche Werte: Zuschneiden / Höhe / Breite
pmscaleheight	Ganzzahl	Nein	Verwenden Sie eine andere Höhe als die im Attribut „height“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays.
pmscalewidth	Ganzzahl	Nein	Verwenden Sie eine andere Breite als die im Attribut „width“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays.
pmtoctitle	Zeichenfolge	Nein	Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können.

Werte für pmscale

Wert	Beschreibung
Zuschneiden
Höhe	Bildgröße auf die definierte Höhe anpassen. Die Breite wird proportional zu den Abmessungen des Originalbilds berechnet.
Breite	Bildgröße auf die definierte Breite anpassen. Die Höhe wird proportional zu den Abmessungen des Originalbilds berechnet.

Beispiel

<img alt="Image" height="200" src="image.png" pmedit="true" pmscale="crop" width="200" />
 
<img alt="Image" height="50" src="image.png" pmedit="true" pmscale="height"  />
 
<img alt="Image" src="image@3x.png" pmedit="true" pmscale="width" pmscalewidth="600" width="200" />

Termin

Um einen Link zu einem Termin bereitzustellen, können Sie das Element „<pme:appointment>“ verwenden. Basierend auf den eingegebenen Daten wird eine iCal-Kalenderdatei generiert.

Attribut	Beschreibung
Text	In der E-Mail sichtbarer Text
Zusammenfassung	Titel des Termins
OrganizerName	Name des Terminorganisators
OrganizerEmail	E-Mail-Adresse des Terminorganisators
DateTimeStart	Startdatum und -uhrzeit des Termins
DateTimeEnd	Enddatum und -uhrzeit des Termins
Location	Ort des Termins
Description	Beschreibung des Termins

<pme:appointment>
 
</pme:appointment>

Inhaltsverzeichnis

Ein Inhaltsverzeichnis (TOC) wird durch das OTML-Tag „<pm:toc />“ dargestellt.

Das TOC-Element dient der automatischen Generierung eines Inhaltsverzeichnisses basierend auf den Werten und der Reihenfolge der verwendeten „pmtoctitle“-Attribute.

Das TOC-Element benötigt genau ein „<pm:tocitem />“-Element, das den Wert des verarbeiteten „pmtoctitle“-Attributs repräsentiert. Der gesamte Inhalt des TOC-Elements wird für jedes „pmtoctitle“-Attribut mit einem Wert wiederholt eingefügt.

Beispiel

Vorlage

<ul>
	<pm:toc>
		<li><pm:tocitem /></li>
	</pm:toc>
</ul>
 
<pme:singleline pmtoctitle="Headline 1">Content</pme:singleline>
<pme:singleline pmtoctitle="Headline 2">Content</pme:singleline>

Rendered code

<ul>
	<li>
		<a href="#link_to_anchor_1">Headline 1</a>
	</li>
	<li>
		<a href="#link_to_anchor_2">Headline 2</a>
	</li>
</ul>

Externe Datenquellen

Externe Datenquellen ermöglichen die Einbindung von RSS-Feed-Inhalten in E-Mails.

Die Einrichtung externer Datenquellen erfolgt individuell durch die promio.net GmbH. Bei Interesse an der Nutzung kontaktieren Sie bitte unser Support-Team per Ticket.

Source

Das Quellelement wird durch das OTML-Tag „<pm:source />“ repräsentiert.

Es dient als Wrapper für die verschiedenen Quellelemente und kann ein oder mehrere „<pm:sourceitem />“-Elemente enthalten.

Attribut	Erforderlich	Typ	Beschreibung
pmedit	Nein	Boolean	Wenn „true“, dürfen Benutzer Datenquellen ändern.

Quellelement

Ein Quellelement wird durch das OTML-Tag „<pm:sourceitem />“ repräsentiert.

Es dient als Verbindung zwischen der E-Mail und der eingerichteten Datenquelle.

Attribut	Erforderlich	Typ	Beschreibung
Name	Ja	Zeichenfolge	Eindeutiger Name der Datenquelle.
Aktualisierungsmodus	Ja	Zeichenfolge	Mögliche Werte: Erstellung / Zustellung

Werte für Aktualisierungsmodus

Wert	Beschreibung
Erstellung	Datenquelle beim Erstellen der E-Mail aktualisieren.
Zustellung	Datenquelle vor dem Senden der Kampagne aktualisieren.

Datenabschnitt

Ein Datenabschnitt wird durch das OTML-Tag „<pm:datasection />“ repräsentiert.

Datenabschnitte dienen dazu, die Vorlage mithilfe von Datenelementen mit Inhalten aus der Datenquelle zu füllen. Jeder Datenabschnitt muss mindestens ein „<pm:data />“-Element enthalten.

Attribut	Erforderlich	Typ	Beschreibung
Quelle	Ja	Zeichenfolge	Name der Datenquelle.
Elemente	Nein	JSON	Ein JSON-Objekt. Verwenden Sie einen Eintrag pro Datenelement im aktuellen Datenabschnitt, um festzulegen, wie das nächste Datenelement ausgewählt wird.<br>Wenn keine Option ausgewählt ist, wird standardmäßig „nächstes“ verwendet.

Mit dem Attribut „Elemente“ können Sie die Inhaltsauswahl für jedes Datenelement festlegen.

Wert	Beschreibung
(Element-ID)	Wählt ein Datenelement anhand seiner eindeutigen ID aus.
Nächstes	Wählt das nächste Datenelement in der Liste aus. Dies ist die am häufigsten verwendete Option.
Rand	Wählt ein zufällig ausgewähltes Datenelement aus.

Beispiel

Wenn Sie den Inhalt des ersten Datenelements auf die eindeutige ID „12345“ und den Inhalt des zweiten Datenelements auf zufällige Daten setzen möchten, verwenden Sie diese Zeichenfolge:

{ 1: 12345, 2: "rand" }

Datenelement

Ein Datenelement wird durch das OTML-Tag „<pm:data />“ repräsentiert.

Datenelemente befinden sich in einem Datenabschnitt. Jedes repräsentiert einen Datensatz der Datenquelle.

Innerhalb eines Datenelements kann der Platzhalter „[pm:item:field_name]“ verwendet werden, um auf ein Feld des Datensatzes der Datenquelle zuzugreifen. Mit der Funktion „cut“ lässt sich der Inhalt eines Platzhalters auf eine bestimmte Anzahl von Zeichen kürzen.

Beispiel: „[cut([pm:item:title], 20)]“ kürzt den Titel auf maximal 20 Zeichen.

Auf jedes Datenelement kann nur einmal zugegriffen werden. Wenn Sie dasselbe Element mehrmals aufrufen möchten, müssen Sie mehrere Datenquellen mit demselben Inhalt verwenden. Kontaktieren Sie in diesem Fall bitte unser Support-Team per Ticket.

Beispiel

Beispieldatenquelle „Top 10 Produkte“

ID	Titel	Preis	Bild	Link
123	Smartphone	350.00 €	smartphone.jpg	www.sample.com/shop?productid=123
124	Watch	150.00 €	watch.jpg	www.sample.com/shop?productid=124
125	Powerbank	50.00 €	powerbank.jpg	www.sample.com/shop?productid=125

Vorlagencode

<html>
<head>
	<pm:source pmedit="true">
		<pm:sourceitem refreshmode="build" name="Top 10 Products"></pm:sourceitem>
	</pm:source>
</head>
<body>
	<pm:datasection source="Top 10 Products" items='{ "1": "124", "2": "next", "3": "next" }'>
 
		<pm:data>
			<table>
				<tr>
					<td>
						<a href="[pm:item:link]" target="_blank">[pm:item:title]</a>
					</td>
				</tr>
				<tr>
					<img alt="[pm:item:title]" src="[pm:item:image]" width="200">
				</tr>
				<tr>
					<td>Price: [pm:item:price]</td>
				</tr>
			</table>
		</pm:data>
 
		<pm:data>
			<table>
				<tr>
					<td>
						<a href="[pm:item:link]" target="_blank">[pm:item:title]</a>
					</td>
				</tr>
				<tr>
					<img alt="[pm:item:title]" src="[pm:item:image]" width="200">
				</tr>
				<tr>
					<td>Price: [pm:item:price]</td>
				</tr>
			</table>
		</pm:data>
 
 
		<pm:data>
			<table>
				<tr>
					<td>
						<a href="[pm:item:link]" target="_blank">[pm:item:title]</a>
					</td>
				</tr>
				<tr>
					<img alt="[pm:item:title]" src="[pm:item:image]" width="200">
				</tr>
				<tr>
					<td>Price: [pm:item:price]</td>
				</tr>
			</table>
		</pm:data>
 
	</pm:datasection>
</body>
</html>

Gerenderter E-Mail-Code

<html>
<body>
	<table>
		<tr>
			<td>
				<a href="www.sample.com/shop?productid=124" target="_blank">Watch</a>
			</td>
		</tr>
		<tr>
			<img alt="Watch" src="watch.jpg" width="200">
		</tr>
		<tr>
			<td>Price: 150.00 €</td>
		</tr>
	</table>
 
 
	<table>
		<tr>
			<td>
				<a href="www.sample.com/shop?productid=125" target="_blank">Powerbank</a>
			</td>
		</tr>
		<tr>
			<img alt="Powerbank" src="powerbank.jpg" width="200">
		</tr>
		<tr>
			<td>Price: 50.00 €</td>
		</tr>
	</table>
 
	<table>
		<tr>
			<td>
				<a href="www.sample.com/shop?productid=123" target="_blank">Smartphone</a>
			</td>
		</tr>
		<tr>
			<img alt="Smartphone" src="smartphone.jpg" width="200">
		</tr>
		<tr>
			<td>Price: 350.00 €</td>
		</tr>
	</table>
 
</body>
</html>

Wenn-Bedingungen innerhalb von Datenelementen

Es ist möglich, Wenn-Bedingungen innerhalb von Datenelementen zu verwenden.

<pm:datasection source="Datasource 1" items='{ 1: "rand" }'>
 
	<pm:data>
		<table>
			<tr>
				<td>
					<a href="[pm:item:link]" target="_blank">[pm:item:title]</a>
				</td>
			</tr>
			<tr>
				<img alt="Product" src="[pm:item:image]" width="200">
			</tr>
			<tr>
				<td>
					 <pm:dynamic>
						<pm:if>
							<pm:condition>
								[pm:item:priceReduced] == ""
							</pm:condition>
							Price: [pm:item:price]
						</pm:if>
						<pm:else>
							Price: [pm:item:priceReduced]<br />
							instead of <span style="color: #f00; text-decoration: line-through;"[pm:item:price]</span>
						</pm:else>
					</pm:dynamic>
				</td>
			</tr>
		</table>
	</pm:data>
 
</pm:datasection>

Externer Inhalt

„pm:include-url-content“ ist ein ganz besonderer Tag. Verwenden Sie ihn, um den Quellcode einer Website in Ihre E-Mail einzubinden.

Sie können diesen Tag auch im Betreff einer E-Mail verwenden.

Attribut	Typ	Erforderlich	Beschreibung
URL	Zeichenfolge	Ja	Die URL des einzubindenden Inhalts.
Titel	Boolesch	Nein	Wenn „true“, wird der Inhalt des Titel-Tags der URL zurückgegeben.

Beispiel

Als Inhalt einer E-Mail:

<pm:include-url-content url="https://www.promio.net/my-template.html">
	This default text is only visible if the url does not return any content.
</pm:include-url-content>

Als Betreff:

<pm:include-url-content url="https://www.promio.net/my-template.html" title="true">
	This default title is only visible if the url does not return any content.
</pm:include-url-content>

CSS

Automatische Transformation von CSS zu Inline-CSS

CSS aus einem <style>-Block kann automatisch in Inline-CSS umgewandelt werden. Weitere Informationen hierzu finden Sie in den Optionen cssinline und cssinlinetype in config_tags

Benutzerbearbeitbares CSS

Um Benutzern die Möglichkeit zu geben, das CSS zu bearbeiten, gibt es einige Voraussetzungen:

* Der Style-Tag muss die ID „pn-js-css-editor“ verwenden. Nur ein Style-Tag mit dieser ID ist zulässig. * Jeder Selektor muss einen Kommentarblock mit den Deskriptoren „@nav“, „@navItem“ und „@info“ verwenden. * „@nav“ repräsentiert die Kategorie im CSS-Editor und gruppiert die verschiedenen „@navItem“-Elemente. * „@navItem“ repräsentiert das Element innerhalb der Kategorie. Dieser Name muss für alle CSS-Selektoren innerhalb derselben Kategorie „@nav“ eindeutig sein. * „@info“ dient als Beschreibung für das Element „@navItem“.

<style id="pn-js-css-editor" media="all" type="text/css">
	/*
	@nav Article
	@navItem Text
	@info Change the font settings of article texts.
	*/
	.article-text {
		/*@edit*/color: #000;
		/*@edit*/font-family: Arial, Helvetica, sans-serif;
		/*@edit*/font-weight: 300;
		/*@edit*/font-size: 13px;
		/*@edit*/line-height: 1.4;
		/*@edit*/text-align: left;
		/*@edit*/text-decoration: none;
		/*@edit*/text-transform: none;
	}
 
	/*
	@nav Article
	@navItem Link
	@info Change the font settings of links inside article texts.
	*/
	.article-link {
		/*@edit*/color: #000;
		/*@edit*/font-weight: 300;
		/*@edit*/text-decoration: none;
	}
</style>

Dynamische Inhalte

Platzhalter

Mithilfe von Platzhaltern können Sie auf die Felder Ihrer Benutzerdaten zugreifen oder dynamische Inhalte einbinden.

Sie können auf jedes Benutzerdatenfeld zugreifen, indem Sie vor dem Feldnamen ein „$“-Zeichen setzen. Greifen Sie beispielsweise mit „$name“ auf das Feld „Name“ zu.

Eine Liste aller universell verfügbaren Platzhalter erhalten Sie über die Platzhalter-Schaltfläche in der Symbolleiste eines mehrzeiligen Editors.

Sollten Sie benutzerdefinierte Platzhalter benötigen, kontaktieren Sie bitte unser Support-Team per Ticket.

Beipsiel

„$salutation_en_formal“ wird bei männlichen Empfängern durch „Sehr geehrter Herr Mustermann“ bzw. bei weiblichen Empfängern durch „Sehr geehrte Frau Mustermann“ ersetzt. Wenn kein Geschlecht angegeben ist, wird die Anrede auf „Sehr geehrte Damen und Herren“ zurückgesetzt.

Bedingungen

Inhalte können auch mit Bedingungen personalisiert werden.

Beispiel

Personalisierte Anrede mit Fallback

{!--<dynamicContent>
	<if>
		<condition>gender = 1 AND name != ""</condition>
		<data>Dear Mr $name,</data>
	</if>
	<elseif>
		<condition>gender = 2 AND name != ""</condition>
		<data>Dear Ms $name,</data>
	</elseif>
	<else>
		<data>Dear Sir or Madam,</data>
	</else>
</dynamicContent>//--}

Funktionen

pn_substr

Mit der Funktion „pn_substr“ lässt sich der Wert von Platzhaltern auf eine bestimmte Anzahl von Zeichen kürzen.

Beispiel: „pn_substr(name, 10)“ kürzt den Namen auf 10 Zeichen.

Konfigurations-Tags

Konfigurations-Tags ermöglichen die Steuerung des Verhaltens des E-Mail-Editors.

Attribut	Typ	Standard	Beschreibung
cssinline	Boolean	true	Inline-CSS aus dem \<style\>-Block.
cssinlinetype	String	Standard	Legt den Typ des CSS-Inliners fest.
storage	String (Frame / Shadow)	Frame	Mögliche Werte: Frame / Shadow
ignoreerror	Boolean	false	Fehler beim Speichern ignorieren.

Beispiel

<pm:config>
    <pm:config-value name="cssinline" value="true"/>
    <pm:config-value name="cssinlinetype" value="ng"/>
    <pm:config-value name="storage" value="frame"/>
    <pm:config-value name="ignoreerror" value="true"/>
</pm:config>

Werte für cssinlinetype

Wert	Beschreibung
Standard	Verwendet den alten CSS-Inliner.
ng	Verwendet den neuen, verbesserten CSS-Inliner.

Der Standard-CSS-Inliner kann CSS nur für einzelne, nicht durch Kommas getrennte Selektoren transformieren. Der ng-CSS-Inliner („nächste Generation“) unterliegt diesen Einschränkungen nicht und kann CSS-Blöcke mit durch Kommas getrennten Selektoren inline einfügen.

Beispiele für den Standard-CSS-Inliner

<head>
<style>
	/*******************
	* Working examples * 
	*******************/
 
	.foo {
		font-size: 12px;
		line-height: 1.4;
	}
 
	.bar {
		background-color: #fff;
	}
 
	img {
		border: 0;
	}
 
 
	/***********************
	* Non-working examples * 
	************************/
 
	.baz, .boz {
		font-size: 15px;
	}
 
	table td {
		background-color: #ff0
	}
</style>
</head>
<body>
	/*******************
	* Working examples * 
	*******************/
	<table>
		<tr>
			<td class="bar">
				<span class="foo">Lorem ipsum dolor sit amet</span>
			</td>
		</tr>
		<tr>
			<img alt="" src="image.jpg" width="200" />
		</tr>
	</table>
 
 
	/***********************
	* Non-working examples * 
	************************/
	<table>
		<tr>
			<td class="foo bar">
				Lorem ipsum dolor sit amet
			</td>
		</tr>
	</table>
</body>

Werte für die Speicherung

Wert	Beschreibung
frame

Dadurch werden Änderungen der Browser-Entwicklungstools gespeichert, es besteht jedoch auch die Gefahr von Fremdcode, z. B. von Browser-Plugins, der die Darstellung der E-Mail beeinträchtigen kann. |

shadow

Speichert den Inhalt einer Schattenkopie der E-Mail. Dadurch wird sichergestellt, dass der Quellcode der E-Mail nicht durch Browser-Plugins verändert werden kann.

OTML, Templates, Vorlage

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis

Wie entwickle ich E-Mail-Vorlagen für promio.connect?

Allgemeine Informationen

OTML

Bearbeitbarer Titel

Beispiel

Repeater

Beispiel

Layout

Beispiel

Repeater-Inhalte

Beispiel

Preheader

Singleline

Beispiel

Multiline und Multiline-Config

Beispiel

Beispiel

Bilder

Werte für pmscale

Beispiel

Termin

Inhaltsverzeichnis

Beispiel

Vorlage

Rendered code

Externe Datenquellen

Source

Quellelement

Werte für Aktualisierungsmodus

Datenabschnitt

Beispiel

Datenelement

Beispiel

Beispieldatenquelle „Top 10 Produkte“

Vorlagencode

Gerenderter E-Mail-Code

Wenn-Bedingungen innerhalb von Datenelementen

Externer Inhalt

Beispiel

CSS

Automatische Transformation von CSS zu Inline-CSS

Benutzerbearbeitbares CSS

Dynamische Inhalte

Platzhalter

Beipsiel

Bedingungen

Beispiel

Personalisierte Anrede mit Fallback

Funktionen

pn_substr

Konfigurations-Tags

Beispiel

Werte für cssinlinetype

Beispiele für den Standard-CSS-Inliner

Werte für die Speicherung

Seiten-Werkzeuge