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 elements of an email be personalized? • How do I create a new sender? • How do I inspect an email? • How can I increase the deliverability of my email campaigns? • My first campaign setup in promio.connect • Wie kann ich Auto-Zielgruppen bearbeiten und analysieren? • What is the difference between static target groups and auto target groups? • How can I use emoji/symbols in the subject line?
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 17:02] – [Config Tags] fwen: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.               |
Line 961: Line 915:
  
 ^ 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 ==
en/otml.1679068964.txt.gz · Last modified: 2023/03/17 17:02 by fw

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