User Tools

Site Tools

You are here: Test Dokuwiki For ServiceCenter » promio.connect Wiki » How to develop e-mail templates for promio.connect?
Trace: • How can I increase the deliverability of my email campaigns? • Automatic export: Type 'Blacklist' • How do I send test emails, and how do I create a test delivery list? • How do I create a new sender? • Welche Möglichkeiten habe ich zur Bearbeitung einer Zielgruppe? • How do I create a role? • Wie lege ich eine Auto-Zielgruppe an? • How do I exclude blacklist addresses from delivery? • What happens when a recipient replies to my newsletter? • What is my API key?
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:54] – [Config Tags] promioen:otml [2025/07/22 11:03] (current) – old revision restored (2024/06/27 17:55) bk
Line 46: Line 46:
  
  
 +
 +==== 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 E-Mail 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 503: Line 524:
 ^ 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 510: Line 531:
 ^ Value   ^ Description                                      ^ ^ Value   ^ Description                                      ^
 | build   | Refresh data source on build of the e-mail.    |           | build   | Refresh data source on build of the e-mail.    |          
-| refresh | Refresh data source before sending the campaign. |+| delivery | Refresh data source before sending the campaign. |
  
  
Line 766: Line 787:
 ==== 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 794:
 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 942: Line 896:
 ^ 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 910:
 </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 **default** CSS Inliner can only transform CSS for single, non-comma-separated selectors.
-The **ng** CSS Inliner does not underlie those restrictions and can inline CSS blocks with 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 ===+== Examples for the default CSS Inliner ==
  
 <code html> <code html>
Line 1038: Line 992:
 |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 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. |
 |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 e-mail. This assures that the e-mails source code could not be changed by browser plugins. |
 +
 +
 +
  
 {{tag> OTML Templates }} {{tag> OTML Templates }}
 +
en/otml.1679061241.txt.gz · Last modified: 2023/03/17 14:54 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