Layout 1
==== Repeater content ====
A repeater content is represented by the OTML tag ''
Layout 1
Layout 1
==== Preheader ====
A preheader is represented by the OTML tag ''
This is the preheader text.
==== Singleline ====
A singleline element is represented by the OTML tag ''Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. | | max-length | integer | No | Maximum lenght of characters. The user will not be able to exceed this limit. | === Example ===
My Headline
Click me
==== Multiline and Multiline-Config ====
A multiline element is represented by the OTML tag ''Set a value to pre-allocate a title or leave it blank to make it possible, to set a TOC title if desired. | | max-length | integer | No | Maximum lenght of characters. The user is able exceed this limit, but a warning will be shown. | | config | string | No | Name of the multiline-config, that should be used for this editor. | === Example ===
Lorem ipsum dolor sit amet
The multiline editor can be configured with a multiline-config element, which is represented by the OTML tag ''
{
"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"
]
}
]
}
{
"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"
]
}
]
}
/* This editor uses the default config */
Text
/* This editor uses the "linkable-editor" config */
Text
==== Image ====
Images have no special OTML element representation. Instead they use the standard HTML ''Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. | === Values for pmscale === ^ Value ^ Description ^ | crop | Center the image and crop it to the defined dimensions. **Height and width must be defined.** | height | Resize the image to the defined height. The width is calculated proportional to the dimensions of the original image. | | width | Resize the image to the defined width. The height is calculated proportional to the dimensions of the original image. | === Example ===
==== Appointment ====
To provide a link to an appointment, you can use the ''
==== TOC ====
A TOC (table of contents) is represented by the OTML tag ''
Content
Content
== Rendered code ==
==== External data sources ====
External data sources make it possible to embed content from RSS feeds into an email.
The setup of external data sources is individually realized by promio.net GmbH. If you are interested in the usage, please contact our support team via ticket.
=== Source ===
The source element is represented by the OTML tag ''If no option is chosen, it defaults to "next". | | With the ''items'' attribute, it is possible to define the selection of content for each data item. ^ Value ^ Description ^ | (itemId) | Choose a data item on the base of its unique id. | | next | Choose the next data item in the list. This is the most used option. | | rand | Choose a random data item. | == Example == If you want to set the content of the first data item to the unique id ''12345'' and random data for the second one, use this string:
{ 1: 12345, 2: "rand" }
=== Data item ===
A data item is represented by the OTML tag ''
[pm:item:title]
![[pm:item:title]]([pm:item:image])
Price: [pm:item:price]
[pm:item:title]
Price: [pm:item:price]
[pm:item:title]
Price: [pm:item:price]
== Rendered email code ==
Watch
Price: 150.00 €
Powerbank
Price: 50.00 €
Smartphone
Price: 350.00 €
=== If-conditions within data items ===
It is possible to use If-conditions within data items.
[pm:item:title]
[pm:item:priceReduced] == ""
Price: [pm:item:price]
Price: [pm:item:priceReduced]
instead of
==== External content ====
''pm:include-url-content'' is a very special tag. Use it to include the source code of a website into your email.
It is also possible to use this tag in the subject of an email.
^ Attribute ^ Type ^ Required ^ Description ^
| url | string | Yes | The URL of the content you want to include. |
| title | boolean | No | If true, the content of the URL's title tag is returned. |
=== Example ===
As content of an email:
This default text is only visible if the url does not return any content.
As subject:
This default title is only visible if the url does not return any content.
===== CSS =====
==== Automatic transformation from CSS to inline CSS ====
CSS from a <style> block can automatically be transformed to Inline CSS.
For more details on the matter refer to the **cssinline** and **cssinlinetype** options in [[en:otml#config_tags]]
==== User editable CSS ====
To give users the freedom to edit the CSS, there are some prerequisites:
* The style tag must use the id ''pn-js-css-editor''. Only one style tag with this id is allowed.
* Each selector must use a comment block with the descriptors ''@nav'', ''@navItem'' and ''@info''.
* ''@nav'' represents the category inside the CSS editor and groups the different ''@navItem'' elements.
* ''@navItem'' represents the element inside the category. This name must be unique for all CSS selectors within the same ''@nav'' category.
* ''@info'' serves as decription for the ''@navItem''element.
===== Dynamic content =====
==== Placeholders ====
With the help of placeholders, it's possible to access the fields of your user data or include dynamic content.
You can access each user data field if you place a ''$'' character in front of the field name. E.g., access the field ''name'' with ''$name''.
A list of all universally available placeholders is available with a click on the placeholder button inside the toolbar of a multiline editor.
If custom placeholders are requried please contact our support team via ticket.
=== Example ===
''$salutation_en_formal'' will be replaced with "Dear Mr. Doe," if the recipient is male, or "Dear Ms. Doe," if the recipient is female.
If no gender is given, it will fall back to "Dear Sir or Madam,"
==== Conditions ====
It is also possible to personalize content with conditions.
=== Example ===
== Personalized salutation with fallback ==
{!--
gender = 1 AND name != ""
Dear Mr $name,
gender = 2 AND name != ""
Dear Ms $name,
Dear Sir or Madam,
//--}
==== Functions ====
=== pn_substr ===
With the function ''pn_substr'' is possible to shorten the value of placholders to a specified amount of characters.
E.g.: ''pn_substr(name, 10)'' shortens the name to 10 characters.
==== Config Tags ====
Config tags make it possible to control the behaviour of the email editor.
^ Attribute ^ Type ^ Default ^ Description ^
| cssinline | boolean | true | Inline CSS from the \
=== Values for cssinlinetype ===
^ Value ^ Description ^
| default | Use the legacy CSS inliner. |
| ng | Use the new, improved CSS inliner. |
The **default** CSS Inliner can only transform CSS for single, non-comma-separated selectors.
The **ng** ("next generation") CSS Inliner does not underlie those restrictions and can inline CSS blocks with comma-separated selectors.
== Examples for the default CSS Inliner ==
/*******************
* Working examples *
*******************/
Lorem ipsum dolor sit amet
/***********************
* Non-working examples *
************************/
Lorem ipsum dolor sit amet
=== Values for storage ===
^ Value ^ Description ^
|frame | Save the contents from the preview iframe. This will save changes made via the browser's development tools but is also susceptible to foreign code, e.g., made by browser plugins, which could destroy the presentability of the email. |
|shadow | Save the contents from a shadow copy of the email. This assures that the email's source code could not be changed by browser plugins. |
{{tag> OTML Templates }}