User Tools

Site Tools

You are here: Test Dokuwiki For ServiceCenter » promio.connect Wiki » How do I develop email templates for promio.connect?
Trace: • Export: Which specifications has the batch process?
en:otml

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:otml [2023/03/17 14:52] – old revision restored (2023/03/17 14:51) promioen:otml [2025/02/27 11:01] (current) – bk
Line 1: Line 1:
-====== How to develop e-mail templates for promio.connect? ======+====== How do I develop email templates for promio.connect? ======
  
  
-The following document provides technical information for the development of e-mail templates for promio.connect.+The following document provides technical information for the development of email templates for promio.connect.
    
  
 ===== General information ===== ===== General information =====
  
-  * Special characters must use XML conform entities:+  * Special characters must use XML-conform entities:
     *  ''"''     *  ''"''
     * ''&''     * ''&''
Line 13: Line 13:
     * ''<''     * ''<''
     * ''>''     * ''>''
-    * for all other entities you have to use decimal syntax; e.g.: use '' '' instead of '' '' +    * for all other entities, you have to use decimal syntax; e.g., use '' '' instead of '' '' 
-  * UTF-8 4-byte characters are not supported at the moment. You can check the byte length with several tools, e.g. [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]]+  * UTF-8 4-byte characters are not supported at the moment. You can check the byte length with several tools, e.g., [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]].
   * The length of lines in the source code **must not exceed 700 characters**.   * The length of lines in the source code **must not exceed 700 characters**.
  
Line 35: Line 35:
 ===== OTML ===== ===== OTML =====
  
-OTML is an extension of the HTML standard, specifically created for usage in promio.connect's e-mail editor. +OTML is an extension of the HTML standard, specifically created for usage in promio.connect's email editor. 
-Because of this, an undestanding of HTML and CSS is mandatory.+Because of this, an understanding of HTML and CSS is mandatory.
  
-OTML serves the cause to make designated parts of an e-mail editable. The global structure of the e-mail will not be affected. +OTML serves the cause to make designated parts of an email editable. The global structure of the email will not be affected. 
-At first, the e-mail developer creates the e-mail as usual. After this is done, all intended parts can be made editable with the usage of OTML.+At first, the email developer creates the email as usual. After this is done, all intended parts can be made editable with the usage of OTML.
  
 The OTML elements are separated into two namespaces: ''pm'' and ''pme'': The OTML elements are separated into two namespaces: ''pm'' and ''pme'':
-  * ''pm'' elements are used for automatic generation or integration of content, such as the table of contents or data sources. +  * ''pm'' elements are used for the automatic generation or integration of content, such as the table of contents or data sources. 
-  * ''pme'' elements are user editable elements, e.g. singleline and multiline editors.+  * ''pme'' elements are user-editable elements, e.g., single-line and multi-line editors.
  
 +==== Editable Title ====
  
 +If you want the user to be able to edit the title of the mail, add the attribute ''editable="true"'' to your ''<title>'' tag. This has mostly only an effect if the email is opened in its stand-alone browser version.
 +
 +=== Example ===
 +
 +<code html>
 +<!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>
 +  ...
 +</code>
  
  
Line 53: Line 72:
  
 A repeater element defines an area of repeating blocks and **must contain one or more  ''<pme:layout />'' elements**. Each layout can then be  A repeater element defines an area of repeating blocks and **must contain one or more  ''<pme:layout />'' elements**. Each layout can then be 
-added to the e-mail by the user via a selection list.+added to the email by the user via a selection list.
  
 The repeater element can hold one or more ''<pme:repeatercontent />'' elements. The repeater element can hold one or more ''<pme:repeatercontent />'' elements.
Line 59: Line 78:
  
 ^ Attribute ^ Type   ^ Required ^ Description                                                                                ^ ^ Attribute ^ Type   ^ Required ^ Description                                                                                ^
-| title     | string | No       | Title of the repeater. This is useful, if you use more than one repeater in your template. |+| title     | string | No       | Title of the repeater. This is useful if you use more than one repeater in your template. |
  
  
Line 100: Line 119:
 A layout is represented by the OTML tag ''<pme:layout />''. A layout is represented by the OTML tag ''<pme:layout />''.
  
-A layout element contains a template, which can be added to the e-mail. It's a sub-element of the ''<pme:repeater>'' element and can be +A layout element contains a template, which can be added to the email. It's a sub-element of the ''<pme:repeater>'' element and can be 
 added multiple times.  added multiple times. 
  
Line 126: Line 145:
  
  
-==== Repeatercontent ====+==== Repeater content ====
  
-A repeatercontent is represented by the OTML tag ''<pme:repeatercontent />''.+A repeater content is represented by the OTML tag ''<pme:repeatercontent />''.
  
-The repeatercontent determines a pre-defined part of a ''<pme:repeater />'' element and  acts exactly like a ''<pme:layout />'' element. +The repeater content determines a pre-defined part of a ''<pme:repeater />'' element and  acts exactly like a ''<pme:layout />'' element. 
-It's a sub-element of the ''<pme:repeater>'' element and can be added multiple times. With the ''<pme:repeatercontent />'' element its possible,+It's a sub-element of the ''<pme:repeater>'' element and can be added multiple times. With the ''<pme:repeatercontent />'' element it's possible
 to pre-fill a ''<pme:repeater />''. to pre-fill a ''<pme:repeater />''.
  
Line 165: Line 184:
 A preheader is represented by the OTML tag ''<pme:preheader />''. A preheader is represented by the OTML tag ''<pme:preheader />''.
  
-A preheader is the preview text which is shown beneath the sender in most e-mail clients.  +A preheader is the preview text which is shown beneath the sender in most email clients.  
-During the build process of the e-mail, the content of the preheader element will be put directly after the ''<body>'' tag. All+During the build process of the email, the content of the preheader element will be put directly after the ''<body>'' tag. All
 tracking pixels provided by promio.connect will be embedded after the preheader. This way, there is no HTML source code visible to the tracking pixels provided by promio.connect will be embedded after the preheader. This way, there is no HTML source code visible to the
 end-user.   end-user.  
Line 414: Line 433:
  
 ^ Attribute      ^ Description                            ^ ^ Attribute      ^ Description                            ^
-| text           | Text that is visible in the e-mail     |+| text           | Text that is visible in the email     |
 | summary        | Title of the appointment               | | summary        | Title of the appointment               |
 | organizerName  | Name of the appointments organizer     | | organizerName  | Name of the appointments organizer     |
-| organizerEmail | E-mail of the appointments organizer   |+| organizerEmail | Email of the appointments organizer   |
 | dateTimeStart  | Start date and time of the appointment | | dateTimeStart  | Start date and time of the appointment |
 | dateTimeEnd    | End date and time of the appointment   | | dateTimeEnd    | End date and time of the appointment   |
Line 477: Line 496:
 ==== External data sources ==== ==== External data sources ====
  
-External data sources make it possible to embed content from RSS feeds into an e-mail. +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. 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.
Line 499: Line 518:
 A source item is represented by the OTML tag ''<pm:sourceitem />''. A source item is represented by the OTML tag ''<pm:sourceitem />''.
  
-It serves as the connection between the e-mail and the setup data source.+It serves as the connection between the email and the setup data source.
  
 ^ Attribute   ^ Required ^ Type    ^ Description                      ^ ^ Attribute   ^ Required ^ Type    ^ Description                      ^
 | name        | Yes      | string  | Unique name of the data source.  | | name        | Yes      | string  | Unique name of the data source.  |
-| refreshmode | Yes      | string  | Possible values: build / refresh |+| refreshmode | Yes      | string  | Possible values: build / delivery |
  
  
Line 509: Line 528:
  
 ^ Value   ^ Description                                      ^ ^ Value   ^ Description                                      ^
-| build   | Refresh data source on build of the e-mail.    |           +| build   | Refresh data source on build of the email.    |           
-| refresh | Refresh data source before sending the campaign. |+| delivery | Refresh data source before sending the campaign. |
  
  
Line 639: Line 658:
  
  
-== Rendered e-mail code ==+== Rendered email code ==
  
 <code html> <code html>
Line 738: Line 757:
 ==== External content ==== ==== External content ====
  
-''pm:include-url-content'' is a very special tag. Use it to include the source code of a website into your e-mail.+''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 e-mail.+It is also possible to use this tag in the subject of an email.
  
 ^ Attribute ^ Type ^ Required ^ Description ^ ^ Attribute ^ Type ^ Required ^ Description ^
Line 748: Line 767:
 === Example === === Example ===
  
-As content of an e-mail:+As content of an email:
 <code html> <code html>
 <pm:include-url-content url="https://www.promio.net/my-template.html"> <pm:include-url-content url="https://www.promio.net/my-template.html">
Line 766: Line 785:
 ==== Automatic transformation from CSS to inline CSS ==== ==== Automatic transformation from CSS to inline CSS ====
  
-CSS from ''<style />'' blocks can only be transformed to inline CSS for isolated selectors. +CSS from a <​style> ​block can automatically ​be transformed to Inline ​CSS.  
-Also, the CSS inlining only works on HTML elements with one selector. +For more details on the matter refer to the **cssinline** and **cssinlinetype** options in [[en:otml#config_tags]]
- +
- +
-=== Example === +
- +
-<code html> +
-<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> +
-</code>  +
  
 ==== User editable CSS ==== ==== User editable CSS ====
Line 840: Line 792:
 To give users the freedom to edit the CSS, there are some prerequisites: 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. +  * 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''. +  * 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. +    * ''@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. +    * ''@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.+    * ''@info'' serves as decription for the ''@navItem''element.
  
 <code html> <code html>
Line 886: Line 838:
 With the help of placeholders, it's possible to access the fields of your user data or include dynamic content. 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''.+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 universal available placeholders is available with click on the placeholder button inside the toolbar of a multiline editor.+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.+If custom placeholders are requried please contact our support team via ticket.
  
  
 === Example === === 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.+''$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," If no gender is given, it will fall back to "Dear Sir or Madam,"
  
Line 938: Line 890:
 ==== Config Tags ==== ==== Config Tags ====
  
-Config tags make it possible to control the behaviour of the e-mail editor.+Config tags make it possible to control the behaviour of the email editor.
  
 ^ Attribute     ^ Type                    ^ Default ^ Description                          ^ ^ Attribute     ^ Type                    ^ Default ^ Description                          ^
 | cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. | | cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. |
-| cssinlinetype | string                  | legacy  | Set the type of the CSS inliner.     |+| cssinlinetype | string                  | default  | Set the type of the CSS inliner.     |
 | storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      | | storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      |
 | ignoreerror   | boolean                 | false   | Ignore errors on save.               | | ignoreerror   | boolean                 | false   | Ignore errors on save.               |
- 
  
 === Example === === Example ===
Line 957: Line 908:
 </pm:config> </pm:config>
 </code> </code>
 +
  
 === Values for cssinlinetype === === Values for cssinlinetype ===
  
 ^ Value  ^ Description                 ^ ^ Value  ^ Description                 ^
-| legacy | Use the legacy CSS inliner. | +| default | Use the legacy CSS inliner. | 
-| ng     | Use the new 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 ==
 +
 +<code html>
 +<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>
 +</code> 
  
 === Values for storage === === Values for storage ===
  
 ^ Value ^ Description ^ ^ Value ^ Description ^
-|frame  | Save the contents from the preview iframe. This will save changes made via the browsers development tools but is also susceptible to foreign code e.g. made by browser plugins, which could destroy the presentability of the e-mail. | +|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 e-mail. This assures that the e-mails source code could not be changed by browser plugins. |+|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 }} {{tag> OTML Templates }}
 +
en/otml.1679061171.txt.gz · Last modified: 2023/03/17 14:52 by promio

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki