Addemar Support Knowledge

How can you make your template ready to use in our platform

Each template need these standard tags !

The standard sentences on top and bottom of the e-mails sent by Addemar enhance the deliverability and some are legally obliged by European legislature. For each of the standard sentences, a translation is foreseen in all languages available in Addemar. When starting a creation, you will indicate the language for these standard sentences. They are realized through a special type of ADDEMAR tag: type='addemar'.

The following five code strings should be integrated in every custom template:

Online link

 

<ADDEMAR type='addemar' name='onlinelink' />

Send to link

 

<ADDEMAR type='addemar' name='sendto' />

Unsubscribe link

 

<ADDEMAR type='addemar' name='unsubscribe' />

Privacy policy

 

<ADDEMAR type='addemar' name='privacy' />

Powered by

 

<ADDEMAR type='addemar' name='poweredby' />

Note: All tags are mandatory on e-mail templates, only the privacy policy link and the Powered by tag are mandatory on landing pages.

To make your template editable inside the platform we have created several tags, how they can be used are described here below.

When you create an e-mail, you can edit certain area of the e-mail by hovering over them and clicking them. When you click, a certain pop-up opens up. Depending on the type of pop-up that opens up, you can just type text, insert a link or an image, or copy-paste html code or text from Word. The different popups you can define are describe here :

 

The textfield popup

Inserting a text field or text area pop-up

You will be creating a text field dialog when you want a simple line of text, such as a title or a date, to be updatable for each individual creation. The text area dialog permits to make editable more lines of text, such as a paragraph; without however giving possibility to change something to the layout of the text.

To make a simple line of text editable:

  1. Localize the text in your original template. This can be something like:

    <h1>Title of content block 1</h1>

    Add the following tags around the text that you want to make editable <ADDEMAR type='textfield'> and </ADDEMAR>.

  2. <h1><ADDEMAR type='textfield'>Title of content block 1</ADDEMAR></h1>

    You have defined that the Textfield dialog should open up when the words Title of content block 1 are clicked in the interactive preview.

  3. Give your textfield a name by adding name='TextfieldName'.

    <h1><ADDEMAR type='textfield' name='title_content_block_1'>Title of content block 1</ADDEMAR></h1>

    The name you give to the textfield appears as title on the pop-up.

  4. The result in the interactive preview is the following.

Figure: example of a textfield pop-up

Back to top

The textarea popup

<p>Icead faurt Icaed faut vit; num publii suppl. Pos ocaedientem moventiam oc tuius cone<br /> noverunum sperehena, suam ad prenatien virmisq uidicies? Cae tat it quam<br /> actanu ia mus contis conclabus C. O tem sent? Astemure et; esigno. Arbitri<br />ssimus, nos, niquitatilic facentius Multi, Catis? Nihilicios hil vatquod C. Imuliu<br />consilistem rei pos aceperm acernicae nonita, ...</p>

<p><ADDEMAR type='textarea' name='text_content_block_1' >Icead faurt Icaed faut vit; num publii suppl. Pos ocaedientem moventiam oc tuius cone<br />noverunum sperehena, suam ad prenatien virmisq uidicies? Cae tat it quam<br /> actanu ia mus contis conclabus C. O tem sent? Astemure et; esigno. Arbitri<br />ssimus, nos, niquitatilic facentius Multi, Catis? Nihilicios hil vatquod C. Imuliu<br /> consilistem rei pos aceperm acernicae nonita, ...</ADDEMAR></p>

This gives the following in the interactive preview:

Figure: example of a textarea pop-up

Back to top

The texteditor popup

You will be creating a texteditor pop-up when you want to give the user of your template more freedom to insert text, change layout within a certain area, and add pictures and tables where he wants it.

ADDEMAR contains three levels of text editors. They all work via the WYSIWYG principle and permit an advanced user to put in true code. In this example we integrate the full version of the text editor.

To make a complete area editable via a WYSIWYG editor:

  1. Localize the area in your original template. This can be an area included in a <div></div> tag, in a <td></td> or <tr></tr> tag, .... In this example, we will make the area withing the table cell <td> editable.      

    <td><p class='style1'>Title content block 2 </p>

    <p><span class='style2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, set diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat. Ut wisi enim ad minim veniam, quis nostrud exerci tatuion &nbsp; ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </span></p>

    <p><img src='image_big.jpg' width='392' height='239' border='0' /></p></td>

  2. Add the following tags around the area that you want to make editable <ADDEMAR type='texteditor_full'> and </ADDEMAR>.

    <td><ADDEMAR type='texteditor_full'><p class='style1'>Title content block 2</p>

    <p><span class='style2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, set diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat. Ut wisi enim ad minim veniam, quis nostrud exerci tatuion &nbsp; ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </span></p>

    <p><img src='image_big.jpg' width='392' height='239' border='0' /></p></ADDEMAR></td>

    You have defined that the full texeditor dialog should open up when this paragraph with title and picture is clicked in the interactive preview.

  3. Give the area a name by adding name='AreaName'.

    <td><ADDEMAR type='texteditor_full' name='content_block_2><p class='style1'>Title content block 2 </p>

    <p><span class='style2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, set diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat. Ut wisi enim ad minim veniam, quis nostrud exerci tatuion &nbsp; ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </span></p>

    <p><img src='image_big.jpg' width='392' height='239' border='0' /></p></ADDEMAR></td>

    The name you give to the area appears as title on the pop-up.

  4. The result in the interactive preview is the following:

Figure: example of a texteditor pop-up (type='texteditor_full'): tools to layout text and to insert images, tables and forms

You can give your user less rights in editing this area by choosing the texteditor_small or the normal texteditor as type. Examples:

Figure: example of a texteditor pop-up (type='texteditor'): all text layout is possible

Figure: example of a texteditor pop-up (type='texteditor_small'): only some basic text layout is possible

Note: More information about the tools available in the texteditors can be found in the chapter about the interactive preview.

Back to top

The image popup

  1. Localize the image in your original template. The html code string for an image looks like this:

    <img src='image_sample.jpg' width='116' height='79' alt='girls'/>

  2. Replace the <img by <ADDEMAR type='image'.

    <ADDEMAR type='image' src='image_sample.jpg' width='116' height='79' alt='girls'/>

    You have defined that the Insert image dialog should open up when this image is clicked in the interactive preview.

  3. Give your image a name by adding name='ImageName'.  

  4. <ADDEMAR type='image' name='contentblock_1_image' src='image_sample.jpg' width='116' height='79' alt='girls'/>

    The name you give to the image appears as title on the pop-up.

  5. If you want the images to appear in your template, add the URL of the account library to the source. This URL is the following <?add_userdata?>/Image/.

    <ADDEMAR type='image' name='contentblock_1_image' src='<?add_userdata?>/Image/image_sample.jpg' width='116' height='79' alt='girls'/>

  6. The other attributes (width, height, alt, border, ...) can be added, they will also appear in the pop-up. The values you give these other attributes will be editable.

    <ADDEMAR type='image' name='contentblock_1_image' src='<?add_userdata?>/Image/image_sample.jpg' width='116' height='79' alt='' border='0' />

  7. The result in the interactive preview is the following:

Tip: If you add the href='' attribute in the image tag, users of your template will be able to create a link on the image. If landing pages are available in the account, even the landing page drop down will appear. An example:

<ADDEMAR type='image' name='Article_2_image' src='<?add_userdata?>/Image/templates/templates/...' align='right' alt='your alt text heigth='' width='600' href=''/>


 

Figure: example of an image pop-up with link

Note: File names should not use spaces, hypens (-) or other special characters.

Back to top

 

The link popup

  1. Localize the link in your original template. The html code string for a link looks like this:

    <a href='http://www.addemar.com/newsletter/ID=7#art1'>More...</a>

  2. Replace the <a by <ADDEMAR type='link'. Replace the end tag </a> by the end tag </ADDEMAR>

    <ADDEMAR type='link' href='http://www.addemar.com/newsletter/ID=7#art1'>More...</ADDEMAR>

    You have defined that the Insert link dialog should open up when the word More... is clicked in the interactive preview.

  3. Give your link a name by adding name='LinkName'.

    <ADDEMAR type='link' name='More_link' href='http://www.addemar.com/newsletter/ID=7#art1'>More...</ADDEMAR>

    The name you give to the link appears as title on the pop-up.

  4. Take out the specific URL. If the URLs you use have a specific structure, you can put some indication on how to formulate the URL. If not, just put 'http://' so that the field will be prefilled with this necessary part of the URL.

    <ADDEMAR type='link' name='More_link' href='http://'>More...</ADDEMAR>

  5. The result in the interactive preview is the following.

 

Back to top 

 

The list & listitem-function tag

You can use the list tag when you want to give the user of your template the possibility to duplicate a certain area or a combination of areas. You define a list tag around another tag or group of tags, and this other tag or group of tags can be duplicated by the user. This will be nice, e.g. to add articles to a newsletter.

Note: You can place the list tag around a <p> tag, a <li> tag, a <table> or a <div>. Do not use the list tag around a <td> or <tr>. Nesting of ADDEMAR tags is not a problem in this case, the ADDEMAR list tag may contain different other ADDEMAR tags.

  • Localize the area that you want to make subject to duplication. This can be an area included in a <p></p> tag, in a <li></li> or <table></table> tag, .... In this example, we will make a list tag around an article contained in a <table>.      

  • Add the following tags around the area that should be duplicated: <ADDEMAR type='listitem' name='ListName'> and </ADDEMAR>.      

    <ADDEMAR type=‘listitem’ name=‘BasicList’>

    <table width=‘100%’ border=‘0’ cellspacing=‘0’ cellpadding=‘12’  bgcolor=‘#FFFFFF’>

    <tr><td>

    <p><ADDEMAR type=‘textfield’ name=‘Article_Title' page='Articles'>Article Title</ADDEMAR></p>

    <p><ADDEMAR type='texteditor' name='Article_Text' page='Articles'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae risus ut sem condimentum semper. Cras tincidunt, arcu non vehicula laoreet, tortor metus ullamcorper tellus, in gravida tellus ipsum nec neque. Integer sit amet sem nec augue ullamcorper dapibus. Etiam eu magna. Quisque magna est, convallis ac, iaculis ut, sodales nec, diam. In magna. Morbi sit amet odio sed velit placerat ullamcorper. Vivamus blandit. Aliquam fermentum. Aliquam commodo ligula a nisl. Vestibulum sodales, enim ac accumsan pulvinar, lacus tellus varius neque, sed mollis orci magna eget nisl. Proin sit amet ligula gravida pede condimentum lacinia. Morbi tristique neque vel turpis. Aliquam facilisis elit id nibh. Nunc lobortis. Nunc vel nisi. Ut congue nunc et risus. </ADDEMAR></p>

    <ADDEMAR type='link' name='Article_Link' page='Articles' href='http://'>More...</ADDEMAR>

    </td></tr>

    <tr><td><hr noshade=‘noshade’ size=‘1’ width=‘100%’ color=‘#3B699F’ /></td></tr>

    </table>

    </ADDEMAR>

    You have defined that this area including title, text and link should be duplicated when the list icon is clicked in the interactive preview.

  •  You need to build a group list tag around the listitem tags

<ADDEMAR type=‘list’ name=‘Content’>

<ADDEMAR type=‘listitem’ name=‘BasicList’> ... html content ... </addemar>

<ADDEMAR type=‘listitem’ name=‘BasicList2’> ... html content ... </addemar>

...

</addemar>

  • The result in the interactive preview is the following:

 

The result is described here

 

Back to top

The article popup

The news article is the special pop-up that is used in the basic template "Newsletter". This dialog is used to create at once, article per article, the content of e-mail and landing page.

The user of your template will be able to specify for each article a title, a short and a long text, and a link to jump from the short text to the long text. On the e-mail, the title is shown followed by the short text and the link. When the recipient of the e-mail clicks the link, he will see an online version of the e-mail with the title and the long text.

To create a news article pop-up in the interactive preview:

  1. Localize the area in your original template. This can be an area included in a <div></div> tag, in a <td></td> or <tr></tr> tag, ...      

  2. The complete code for the news article tag looks like this:      

    <ADDEMAR type='article' name='Nieuwsbrief_onderwerp' page='articles' title='Title' link='Read more ...'> <img align='right' alt='image' border='0' height='120' hspace='10' src='<?add_url?>/images/templates/addemar/en_UK/pict_180x120_1.jpg' vspace='0' width='180' /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae risus ut sem condimentum semper. Cras tincidunt, arcu non vehicula laoreet, tortor metus ullamcorper tellus, in gravida tellus ipsum nec neque. Integer sit amet sem nec augue ullamcorper dapibus. Etiam eu magna. Quisque magna est, convallis ac, iaculis ut, sodales nec, diam. In magna. Morbi sit amet odio sed velit placerat ullamcorper. Vivamus blandit. </ADDEMAR>

    • The name='' appears on the title bar of the pop-up.

    • The text you define as value for title='' is the dummy text for the title of your news article. The user of your template will be able to edit this text.

    • The text you define as value for link='' is the dummy text for the title of your news article. The user of your template will be able to edit this text.

    • The text and/or images contained between the start and end tag is the dummy content of the short and long text. The user of your template will be able to edit both independently.

  3. The result in the interactive preview is the following:

Figure: example of a article tag in the interactive preview.

Back to top