de:otml
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
| de:otml [2017/05/24 15:06] – [<pm:datasection>] re | de:otml [2025/07/22 11:03] (aktuell) – bk | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== | + | ====== |
| - | Bei promio.mail OTML handelt es sich um eine eigens für den E-Mail-Editor geschaffene Erweiterung des HTML-Standards.\\ | + | |
| - | Für das Verständnis und die Anwendung von OTML sind grundlegende Kenntnisse von [[http:// | + | |
| - | OTML dient dazu Bereiche eines E-Mail Templates für den promio.mail E-Mail-Editor als nachträglich editierbar zu kennzeichnen. Die globale Struktur der E-Mail wird dabei nicht beeinflusst: | ||
| - | Der Designer gestaltet seine E-Mail wie gewohnt mit HTML und CSS. Danach kann er durch die Verwendung von OTML-Elementen bestimmte Bereiche seines Templates für den E-Mail-Editor als editierbar markieren. Z.B. Bereiche zur freien Texteingabe, | ||
| - | Die promio.mail [[# | + | Das folgende Dokument enthält technische Informationen zur Entwicklung von E-Mail-Vorlagen für promio.connect. |
| - | ===Beispiel=== | + | |
| + | |||
| + | ===== 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. '' | ||
| + | * UTF-8 4-byte Zeichen werden derzeit nicht unterstützt. Sie können die Bytelänge mit verschiedenen Tools überprüfen, | ||
| + | * 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: | ||
| <code html> | <code html> | ||
| - | <pme:singleline | + | <html xmlns=" |
| - | <pm:toc /> | + | xmlns: |
| + | xmlns:pme="http:// | ||
| + | | ||
| + | </html> | ||
| </ | </ | ||
| - | Darüber hinaus stehen einige neue [[# | + | |
| - | ===Beispiel=== | + | ===== OTML ===== |
| + | |||
| + | OTML ist eine Erweiterung des HTML-Standards, | ||
| + | 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 | ||
| + | * „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 ''< | ||
| + | |||
| + | === Beispiel === | ||
| <code html> | <code html> | ||
| - | <img pmedit=" | + | <!DOCTYPE html> |
| + | < | ||
| + | < | ||
| + | <title editable=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | Please click here if you can't read this E-Mail. | ||
| + | </ | ||
| + | </div> | ||
| + | ... | ||
| </ | </ | ||
| - | ===== Elemente ===== | ||
| - | Elemente, deren Inhalt manuell editierbar ist, gehören zum Namensraum '' | ||
| - | Je nach Element gibt es im E-Mail-Editor spezifische Editoren zur Manipulation des Inhalts. | ||
| - | * [[# | + | ==== Repeater ==== |
| - | * [[# | + | |
| - | * [[# | + | |
| - | * [[# | + | |
| + | Ein Repeater wird durch das OTML-Tag „< | ||
| + | Ein Repeater-Element definiert einen Bereich mit sich wiederholenden Blöcken und muss ein oder mehrere < | ||
| - | ==== <pme:singleline> ==== | + | Das Repeater-Element kann ein oder mehrere |
| - | ^Bedeutung^Definiert eine editierbare Textzeile.^^^ | + | |
| - | ^Attribut^Wert^Beschreibung^Beispiel^ | + | |
| - | |label |-|Beschriftung für den Editor |<code xml>< | + | |
| - | |pmtoctitle|[hier Überschrift]|Überschrift für Inhaltsverzeichnis |<code xml>< | + | |
| - | ==== < | + | Eine genaue Anleitung zur Erstellung eines Creatives mit dem E-Mail-Builder finden Sie im Artikel |
| - | ^Bedeutung^Definiert allgemein einen editierbaren Bereich in einem E-Mail.^^^ | + | |
| - | ^Attribut^Wert^Beschreibung^Beispiel^ | + | |
| - | |Label| | + | |
| - | |pmdesign|header\\ footer\\ content|Vorlagen, | + | |
| - | |pmtoctitle|[hier Überschrift]|Überschrift für Inhaltsverzeichnis| <code xml>< | + | |
| + | 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. | | ||
| - | === pmdesign === | ||
| - | Mit dem Attribut '' | ||
| - | Der Designvorlagen-Manager erlaubt das Templateunabhängige und -übergreifende verwenden/ | + | === Beispiel === |
| - | Um die Auswahl der verfügbaren Vorlagen für einen editierbaren Bereich einzugrenzen, | + | <code html> |
| + | < | ||
| - | == Beispiel | + | < |
| - | <code html><pme: | + | <table border=" |
| - | Der Redakteur bekommt im Designvorlagen-Manager nun nur noch Vorlagen angeboten, die vorher in der Kategorie " | + | <tr> |
| + | <td>Layout 1</td> | ||
| + | </tr> | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <table border=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | <table border=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| - | ==== < | ||
| - | Definiert einen Bereich mit wiederkehrenden Blöcken. | ||
| - | Dieses Element **muss mindestens ein ''< | ||
| - | Mit dem [[# | + | ==== Layout ==== |
| - | Mit dem [[# | + | Ein Layout |
| - | <note important> | + | |
| + | Ein Layout-Element enthält eine Vorlage, die der E-Mail hinzugefügt werden kann. Es ist ein Unterelement des Elements „< | ||
| - | < | + | |
| - | < | + | ^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ |
| - | + | | Name | Zeichenfolge | Ja | Eindeutiger Name für das Layout | | |
| - | < | + | |
| - | < | + | |
| - | < | + | === Beispiel === |
| - | <td> | + | |
| - | Block, der dem Repeater hinzugefügt werden kann. | + | < |
| - | | + | < |
| - | </ | + | |
| - | </ | + | < |
| - | </ | + | < |
| - | + | < | |
| - | < | + | <td>Layout 1</ |
| - | <p> | + | </ |
| - | Weiterer Block, der dem Repeater hinzugefügt werden kann. | + | </ |
| - | </ | + | </ |
| - | </ | + | |
| - | + | </ | |
| - | < | + | |
| - | <p> | + | |
| - | Block im Repeater, der initial sichtbar ist. | + | |
| - | </ | + | |
| - | </ | + | |
| - | | + | |
| - | </ | + | |
| </ | </ | ||
| - | === < | ||
| - | Das ''< | ||
| - | Es wird immer das Attribut '' | ||
| - | ^Attribute ^^^^ | + | ==== Repeater-Inhalte ==== |
| - | ^ Attribut ^ Wert ^ Beschreibung ^ Beispiel ^ | + | |
| - | |name |//text// |**Benötigt**. Eindeutiger Name (wird zur Anzeige in der Auswahlliste im E-Mail Editor genutzt) für das Layout. | + | |
| - | |pmtoctitle |//text// |Überschrift für Inhaltsverzeichnis | <code xml>< | + | |
| + | Ein Repeater-Inhalt wird durch das OTML-Tag „< | ||
| - | === < | + | Der Repeater-Inhalt bestimmt einen vordefinierten Teil eines „< |
| - | Mit dem ''< | + | Er ist ein Unterelement des „<pme:repeater>“-Elements und kann mehrfach hinzugefügt werden. Mit dem „< |
| - | <note important>'' | + | ein „< |
| - | ^Attribute ^^^^ | + | === Beispiel === |
| - | ^ Attribut ^ Wert ^ Beschreibung ^ Beispiel | + | |
| - | |pmtoctitle |//text// |Überschrift für Inhaltsverzeichnis | <code xml>< | + | |
| - | ==== <pm: | + | <code html> |
| - | <pm:datasection> wird benutzt um Datensätze aus der externen Datenquelle im Template zu verwendet. Jeder Datensatz wird im Template mit < | + | <pme:repeater> |
| - | ^Attribute ^^^^ | + | |
| - | ^ Attribut ^ Wert ^ Beschreibung ^ Beispiel ^ | + | |
| - | |source |//text// |Name der externen Datenquelle(wird von promio.net angelegt).|| | + | |
| - | |items|// | + | |
| - | * next : die < | + | |
| - | * rand:< | + | |
| - | * [ItemId]: ein Datensatz kann direkt mittel seines ID angesprochen werden.< | + | |
| - | |path|// | + | |
| + | < | ||
| + | <table border=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | <table border=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| - | ==== < | ||
| - | Ist ein Repräsentant eines Datensatz aus der externen Datenquelle. | + | ==== Preheader ==== |
| - | === Beispiel zu < | + | |
| - | Die Datenquelle (test_datenquelle) beinhaltet folgende Datensätze | + | |
| - | ^Produkt_ID^Produkt_name^Produkt_Beschreibung^ | + | |
| - | |1 |Wicked Chili KFZ Halterung |Kompakte KFZ Halterung zur Befestigung an der Windschutzscheibe mit ca. 14 cm Länge und weich gepolsterten Seitenteilen; | + | |
| - | |2 |Anker PowerDrive |Der Vorteil Anker: Werden Sie einer von mehr als 20 Millionen Kunden, die mit unserer führenden Technologie laden.| | + | |
| - | |3 |iPhone 6 / 6S Akkuhülle |Große Kapazität: 130 % Akkulaufzeit, | + | |
| - | ** Template: | + | Ein Preheader wird durch das OTML-Tag „<pme:preheader |
| - | <code xml> | + | |
| - | <pm:datasection source=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </tr> | + | |
| - | < | + | Ein Preheader ist der Vorschautext, |
| - | < | + | |
| - | <td>1. [pm: | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| + | Während der E-Mail-Erstellung wird der Inhalt des Preheader-Elements direkt nach dem Tag „< | ||
| - | | + | <code html> |
| - | </table> | + | < |
| - | </pm: | + | </code> |
| + | |||
| + | |||
| + | ==== Singleline ==== | ||
| + | |||
| + | Ein einzeiliges Element wird durch das OTML-Tag „< | ||
| + | |||
| + | 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.< | ||
| + | | max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit nicht überschreiten. | ||
| + | |||
| + | |||
| + | === Beispiel === | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | <a class=" | ||
| + | < | ||
| + | </a> | ||
| </ | </ | ||
| - | **Ergebnis nach dem Bauern des Templates: | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| + | ==== Multiline und Multiline-Config ==== | ||
| + | |||
| + | Ein mehrzeiliges Element wird durch das OTML-Tag „< | ||
| + | |||
| + | 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.< | ||
| + | | max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit überschreiten, | ||
| + | | config | string | Nein | Name der mehrzeiligen Konfiguration, | ||
| + | |||
| + | === Beispiel === | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| </ | </ | ||
| + | Der mehrzeilige Editor kann mit einem mehrzeiligen Konfigurationselement konfiguriert werden, das durch den OTML-Tag „< | ||
| - | ==== < | + | ^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ |
| - | Mit einem ''< | + | | Name | Zeichenfolge | Ja | Der Name des Konfigurationselements. | |
| + | | Standard | Boolescher Wert | Nein | Auf „true“ setzen, wenn diese Konfiguration für alle pme: | ||
| - | Das Element ''< | + | Der Inhalt einer mehrzeiligen Konfiguration muss eine CKEditor-Konfiguration im JSON-Format sein. |
| + | |||
| + | === Beispiel === | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ], | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ], | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ] | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | /* This editor uses the default config */ | ||
| + | < | ||
| + | |||
| + | /* This editor uses the " | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | ==== 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-/ | ||
| + | | pmscalewidth | Ganzzahl | Nein | Verwenden Sie eine andere Breite als die im Attribut „width“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/ | ||
| + | | pmtoctitle | Zeichenfolge | Nein | Titel für den Eintrag im Inhaltsverzeichnis.< | ||
| + | |||
| + | === Werte für pmscale === | ||
| + | |||
| + | ^ Wert ^ Beschreibung ^ | ||
| + | | Zuschneiden | Bild zentrieren und auf die definierten Abmessungen zuschneiden. **Höhe und Breite müssen definiert sein.** | ||
| + | | 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. | | ||
| - | Der Inhalt von ''< | ||
| === Beispiel === | === Beispiel === | ||
| - | < | + | |
| - | <ul> | + | < |
| - | < | + | <img alt=" |
| - | < | + | |
| - | < | + | <img alt="Image" |
| - | </ | + | |
| - | </ | + | <img alt="Image" |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | | + | |
| - | </pme: | + | |
| - | + | ||
| - | <pme: | + | |
| - | | + | |
| - | </pme: | + | |
| </ | </ | ||
| - | ===Ergebnis=== | + | |
| - | <code html > | + | |
| + | |||
| + | ==== Termin | ||
| + | |||
| + | Um einen Link zu einem Termin bereitzustellen, | ||
| + | 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 | | ||
| + | |||
| + | |||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | |||
| + | ==== Inhaltsverzeichnis ==== | ||
| + | |||
| + | Ein Inhaltsverzeichnis (TOC) wird durch das OTML-Tag „< | ||
| + | |||
| + | 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 „< | ||
| + | gesamte Inhalt des TOC-Elements wird für jedes „pmtoctitle“-Attribut mit einem Wert wiederholt eingefügt. | ||
| + | |||
| + | === Beispiel === | ||
| + | |||
| + | == Vorlage == | ||
| + | |||
| + | <code html> | ||
| <ul> | <ul> | ||
| - | | + | <pm:toc> |
| - | <a href="# | + | <li><pm: |
| - | | + | </pm:toc> |
| - | < | + | |
| - | <a href="# | + | |
| - | </li> | + | |
| </ul> | </ul> | ||
| + | |||
| + | < | ||
| + | < | ||
| </ | </ | ||
| - | === < | ||
| - | Platzhalter Element für eine Überschrift im '' | ||
| - | Es sind keine weiteren Attribute oder Definitionen erforderlich. | + | == Rendered code == |
| + | <code html> | ||
| + | <ul> | ||
| + | <li> | ||
| + | <a href="# | ||
| + | </ | ||
| + | <li> | ||
| + | <a href="# | ||
| + | </ | ||
| + | </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 „< | ||
| - | ===== Attribute ===== | + | Es dient als Wrapper für die verschiedenen Quellelemente und kann ein oder mehrere „< |
| - | Das Verhalten eines Elements | + | |
| - | === Beispiel=== | + | ^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ |
| - | <code xml> | + | | pmedit | Nein | Boolean | Wenn „true“, dürfen Benutzer Datenquellen ändern. | |
| - | <img pmedit=" | + | |
| - | </code> | + | |
| + | === Quellelement | ||
| + | |||
| + | Ein Quellelement wird durch das OTML-Tag „<pm: | ||
| + | |||
| + | 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 | ||
| + | |||
| + | == Werte für Aktualisierungsmodus == | ||
| - | ==== pmedit ==== | ||
| - | ^Mögliche Werte ^^ | ||
| ^ Wert ^ Beschreibung ^ | ^ Wert ^ Beschreibung ^ | ||
| - | |true |Erlaubt das Editieren | + | | Erstellung |
| + | | Zustellung | Datenquelle vor dem Senden der Kampagne aktualisieren. | ||
| - | ^Unterstützte Elemente ^^ | ||
| - | ^ Element ^ Beschreibung ^ Beispiel ^ | ||
| - | |<img /> | ||
| - | ==== pmscale | + | === Datenabschnitt |
| - | ^Mögliche Werte ^^ | + | |
| - | ^ Wert ^ Bechreibung ^ | + | |
| - | |width |Bei Skalierung bleibt die Breite fest. Nur die Höhe variiert anhand der Breite. | | + | |
| - | |height |Bei Skalierung bleibt die Höhe fest. Nur die Breite variiert anhand der Höhe. | | + | |
| - | |crop |Proportionale Skalierung der Breite/ | + | |
| - | ^Unterstützte Elemente ^^ | + | Ein Datenabschnitt wird durch das OTML-Tag „<pm: |
| - | ^ Element ^ Beschreibung ^ Beispiel ^ | + | |
| - | |<img /> |Beeinflusst das Verhalten der Höhe/ | + | |
| + | Datenabschnitte dienen dazu, die Vorlage mithilfe von Datenelementen mit Inhalten aus der Datenquelle zu füllen. **Jeder Datenabschnitt muss mindestens ein „< | ||
| - | ==== pmtoctitle ==== | ||
| - | Definiert Stellen, die in einem Inhaltsverzeichnis (siehe '' | ||
| - | ^Mögliche Werte ^^ | + | ^ Attribut |
| - | ^ Wert ^ Bechreibung | + | | Quelle |
| - | |// | + | | Elemente | Nein | JSON | Ein JSON-Objekt. Verwenden Sie einen Eintrag pro Datenelement im aktuellen Datenabschnitt, |
| - | ^Unterstützte | + | Mit dem Attribut „Elemente“ können Sie die Inhaltsauswahl für jedes Datenelement festlegen. |
| - | ^ Element ^ Beschreibung ^ Beispiel ^ | + | |
| - | |alle <pme: /> |Markiert ein Element zur Verwendung als Überschrift (siehe [[# | + | |
| - | {{tag> | + | ^ 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: | ||
| + | |||
| + | <code json> | ||
| + | { 1: 12345, 2: " | ||
| + | </code> | ||
| + | |||
| + | |||
| + | |||
| + | === Datenelement === | ||
| + | |||
| + | Ein Datenelement wird durch das OTML-Tag „< | ||
| + | |||
| + | Datenelemente befinden sich in einem Datenabschnitt. Jedes repräsentiert einen Datensatz der Datenquelle. | ||
| + | |||
| + | Innerhalb eines Datenelements kann der Platzhalter „[pm: | ||
| + | |||
| + | Beispiel: „[cut([pm: | ||
| + | |||
| + | 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/ | ||
| + | |124 | Watch | 150.00 € | watch.jpg | ||
| + | |125 | Powerbank | ||
| + | |||
| + | |||
| + | == Vorlagencode == | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | |||
| + | == Gerenderter | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <img alt=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <img alt=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <img alt=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | === Wenn-Bedingungen innerhalb von Datenelementen === | ||
| + | |||
| + | Es ist möglich, Wenn-Bedingungen innerhalb von Datenelementen zu verwenden. | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <img alt=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | [pm: | ||
| + | </ | ||
| + | Price: | ||
| + | </ | ||
| + | < | ||
| + | Price: | ||
| + | instead of <span style=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | ==== Externer Inhalt ==== | ||
| + | |||
| + | „pm: | ||
| + | |||
| + | 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: | ||
| + | <code html> | ||
| + | < | ||
| + | This default text is only visible if the url does not return any content. | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | Als Betreff: | ||
| + | <code html> | ||
| + | < | ||
| + | This default title is only visible if the url does not return any content. | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===== CSS ===== | ||
| + | |||
| + | ==== Automatische Transformation von CSS zu Inline-CSS ==== | ||
| + | |||
| + | CSS aus einem < | ||
| + | Weitere Informationen hierzu finden Sie in den Optionen **cssinline** und **cssinlinetype** in [[en: | ||
| + | |||
| + | ==== 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 | ||
| + | * „@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“. | ||
| + | |||
| + | <code html> | ||
| + | <style id=" | ||
| + | /* | ||
| + | @nav Article | ||
| + | @navItem Text | ||
| + | @info Change the font settings of article texts. | ||
| + | */ | ||
| + | .article-text { | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | @nav Article | ||
| + | @navItem Link | ||
| + | @info Change the font settings of links inside article texts. | ||
| + | */ | ||
| + | .article-link { | ||
| + | / | ||
| + | / | ||
| + | / | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | ===== 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 == | ||
| + | |||
| + | <code html> | ||
| + | {!--< | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | ==== 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, | ||
| + | |||
| + | |||
| + | |||
| + | ==== 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 \< | ||
| + | | 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 === | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | === 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 == | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | / | ||
| + | * Working examples * | ||
| + | *******************/ | ||
| + | |||
| + | .foo { | ||
| + | font-size: | ||
| + | line-height: | ||
| + | } | ||
| + | |||
| + | .bar { | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | img { | ||
| + | border: 0; | ||
| + | } | ||
| + | |||
| + | |||
| + | / | ||
| + | * Non-working examples * | ||
| + | ************************/ | ||
| + | |||
| + | .baz, .boz { | ||
| + | font-size: | ||
| + | } | ||
| + | |||
| + | table td { | ||
| + | background-color: | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | / | ||
| + | * Working examples * | ||
| + | *******************/ | ||
| + | < | ||
| + | < | ||
| + | <td class=" | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <img alt="" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | / | ||
| + | * Non-working examples * | ||
| + | ************************/ | ||
| + | < | ||
| + | < | ||
| + | <td class=" | ||
| + | Lorem ipsum dolor sit amet | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | === Werte für die Speicherung === | ||
| + | |||
| + | ^ Wert ^ Beschreibung ^ | ||
| + | |frame | Speichert den Inhalt des Vorschau-Iframes. | ||
| + | | ||
| + | |shadow | Speichert den Inhalt einer Schattenkopie der E-Mail. Dadurch wird sichergestellt, | ||
| + | {{tag> OTML Templates Vorlage }} | ||
de/otml.1495631187.txt.gz · Zuletzt geändert: 2017/05/24 15:06 von re
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
