Last Update: 2018-10-17

Files

A newsletter is sent as multipart, which means that a html-version and an alternative text-version is sent.

index.php HTML version of newsletter
index.txt Text version of newsletter
detail.php Article landingpage
preview.gif Preview image of the newsletter, only shown in template setting dialog
thumb.gif Structure image which should provide an overview of content area structure and image sizes (max-width 200px)
config.xml Custom fields and snipplets are defined here (optionally)

Newsletter Tags

<!--PREHEADER//--> Preheader text
<!--MESSAGE//--> Will be replaced with the text "In case your mail program does not show the newsletter correctly, please click the following link.." and linked to the online version of the newsletter.
<!--LINK_WEBVIEW//--> URL of the online version of the newsletter
<!--ANREDE//--> Salutation defined in the newsletter
<!--TITLE//--> Newsletter title
<!--HEADER//--> Editorial text
<!--HEADER_PICTURE//--> URL to Editorial picture
<!--HEADER_PICTUREHTML//--> Whole HTML code for Editorial picture
<!--HEADER_PICTURETEXT//--> Copyright text of Editorial picture
<!--FOOTER//--> Footer text
<!--FOOTER_PICTURE//--> Footer picture
<!--FOOTER_PICTUREHTML//--> Whole HTML code for Footer picture
<!--FOOTER_PICTURETEXT//--> Copyright text of Footer picture
<!--UNSUBSCRIBE//--> URL to the unsubscribe page (see: web content).
<!--TELLFRIEND//--> URL of the tell-a-friend page
<!--PREFERENCES//--> URL of the preferences page, which lets the user change his saved data and newsletter options.
<!--VIEWPIXEL//--> Generates an image tag with the newsletter tracking pixel. (optional, if not set, it will appear automatically as first element inside the body)
<!--CUSTOM:num//--> Up to 10 custom fields can be defined for each newsletter (custom fields are setup in config.xml).

Event Mail Tags

The following tags only apply to event mails.

<!--LINK_EVENT//--> URL to event subscription. Only in event emails. Use <!--IF:LINK_EVENT//--> to check if newsletter is an event email
<!--LINK_EVENT_REFUSE//--> URL to refuse event invitation. Only in event emails

Tell-A-Friend Tags

The following tags only apply to forwarded mails (via TELLFRIEND). Those tags are optional, if not used, the information will be displayed automaticaly at the begining of the newsletter.

<!--TELLFRIEND_INFO//--> Will be replaced with the text "<b>[[ANREDE]] [[VORNAME]] [[NACHNAME]]</b> has forwarded you this newsletter."
Use <!--IF:TELLFRIEND_INFO//--> to check if newsletter is an forwarded Tell-A-Friend email.
This tag is mandatory, if you want to use any of these Tell-A-Friend tags.
<!--TELLFRIEND_MESSAGE//--> Will be replaced with the message entered in the Tell-A-Friend form
<!--TELLFRIEND_SIGNUP//--> URL to newsletter subscription. Use IF/IFNOT to check if the person can subscribe or is already subscribed to the newsletter.

Snipplets - Show/Hide template parts

Snipplets are areas in the newsletter template that can be shown or hidden. A Snipplet is defined with <!--SNIPPLET_BEGIN:num//--> at the beginning and <!--SNIPPLET_END:num//--> at the end.

<!--SNIPPLET_BEGIN:1//-->
  <img src=".../logo.gif" />
<!--SNIPPLET_END:1//-->

If necessary, you can also use IF/IFNOT controlls
<!--IF:SNIPPLET:num//--> ... <!--ENDIF:SNIPPLET:num//-->
<!--IFNOT:SNIPPLET:num//--> ... <!--ENDIFNOT:SNIPPLET:num//-->.

<!--IF:SNIPPLET:1//-->
  <img src=".../logo_intern.gif" />
<!--ENDIF:SNIPPLET:1//-->
<!--IFNOT:SNIPPLET:1//-->
  <img src=".../logo.gif" />
<!--ENDIFNOT:SNIPPLET:1//-->

Snipplets are defined in the config.xml where you can set a name for the snipplet number.

Config XML

Newsletter custom fields and snipplets are defined in config.xml.

<?xml version="1.0" encoding="utf-8"?>
<config>

  Configuration goes here ..

</config>

Custom fields

<customfield num="1" type="Textfield" name="Custom Field 1"/>
num consecutive number (beginning with 1)
type Type of the custom field name
name Name shown in application
Possible custom field types:
Textfield single-line text input
Textarea WYSIWYG Editor
Link Link to external URL, email, document or eyepin campaign (e.g. event, survey, ...)
MediaItem Picture from eyepin Media-Library
Date Date in Y-M-D format
Checkbox for IF/IFNOT controlls (you can also use snipplets instead)
Default value
<customfield num="1" type="Textfield" name="Custom Field 1">
  <default>Default Value</default>
</customfield>

<customfield num="2" type="Textarea" name="Custom Field 2">
<default><![CDATA[
    <table class="info" cellspacing="0" cellpadding="0" border="0"><tr>
      <td>
        Contact us:<br>
        email: <a href="mailto:example@eyepin.com">example@eyepin.com</a><br>
        tel: +43 1 234 567-8
      </td>
    </tr></table>
  ]]></default>
</customfield>

The tag <default> defines a default value. Usable with Textfield, Textarea and Link. If default value contains HTML elements, wrap it with <![CDATA[ ... ]]>

Custom fields with predefined options (dropdown):
<customfield num="1" type="Textfield" name="Custom Field Dropdown">
  <option>
    <name>name in dropdown list 1</name>
    <value>output-1</value>
  </option>
  <option default="true">
    <name>name in dropdown list 1</name>
    <value>output-2</value>
  </option>
  <option>
    <name>name in dropdown list 1</name>
    <value>output-3</value>
  </option>
</customfield>

An option can be preselected with the attribute <option default="true">.

Snipplets

<snipplet num="1" default="off" name="Inhaltsverzeichnis" />
num Consecutive number (beginning with 1)
default on or off, defines if the snipplet is shown per default
name Name shown in application

Name and Description

As the eyepin interface is aviable in two languages (de & en), you can set different names for custom fields. If it is necessary to provide more information, use the description option.

<customfield num="1" type="Textfield">
  <name language="de">Zusatzfeld 1</name>
  <name language="en">Custom Field 1</name>
  <description language="de">Das ist eine Zusatzfeld-Beschreibung</description>
  <description language="en">This is a custom field description</description>
</customfield>

<snipplet num="2" default="off">
  <name language="de">Kontakt Einbelnden</name>
  <name language="en">show contact</name>
</snipplet>
name Name of customfield or snipplet shown in application
description Generates an icon next to title, description text displays on hover (only with customfield)
language de or en, defines the languge of name or description
Rename article areas:
<area num="0">
  <name language="de">Teaser Artikel</name>
  <name language="en">Teaser article</name>
  <description language="de">Beschreibung zum Teaser Artikel</description>
  <description language="en">Description for teaser article</description>
</area>

num defines number of article area.

Order

By default custom fields are shown after standard fields (e.g. header, footer, ...) followed by article areas. For better uasability you can rearange all standard fields, custom fields and article areas.

<order>
  <item type="field" name="AnredeID" />
  <item type="field" name="Header" />
  <item type="field" name="HeaderMediaItemID" />
  <item type="area" num="0" />
  <item type="field" name="Custom1" />
  <item type="field" name="Custom2" />
  <item type="area" num="1" />
  <item type="area" num="2" />
  <item type="area" num="3" />
  <item type="field" name="Footer" />
  <item type="field" name="FooterMediaItemID" />
</order>
type field or area, target standard/custom field or article area
name Selector for standard/custom field
num number of article area

Available standard/custom field selectors:

Name Description
AnredeID Salutation
Header Editorial text
HeaderMediaItemID Editorial picture
Footer Footer text
FooterMediaItemID Footer picture
Customnum num defines number of custom field (e.g. Custom1)

Articles

Definition of Article Areas

<!--CONTENT_BEGIN:num:col//--> Defines the begin of a content area. num is the index of the content area (numbered consecutively, beginning with 0), col sets the number of columns of the area. If more than one column is set, a parent table will encompass the whole area to implement column behaviour. For that reason the HTML-Code of the content area must be self-contained.
<!--CONTENT_END:num//--> Defines the end of a content area. The number is the index of the content area.

Article Variables

<!--CONTENT_ID//--> ID of the article
<!--CONTENT_TITLE//--> Article title
<!--CONTENT_OPENER//--> Teaser text
<!--CONTENT_PICTURE//--> URL of article picture. If no article picture is defined, an empty spacer image will be shown.
<!--CONTENT_PICTUREHTML//--> Whole HTML code for Article picture
<!--CONTENT_PICTURETEXT//--> Copyright text of Article picture
<!--CONTENT_CTR//--> URL of the landing page
<!--CONTENT_CTRNAME//--> Name of the landing page link
<!--CONTENT_CUSTOM:num//--> Up to 10 custom fields can be defined for an account (for all customers, if the account is an eCRM account). The number denotes the number of the custom field.
<!--CONTENT_AREA:num//--> Number of articles placed in the defined content area. Use IF/IFNOT to check if content area is empty or not. num is the index of the content area (numbered consecutively, beginning with 0)
<!--CONTENT_FACEBOOK_SHARE//--> URL of Facebook sharing link. Is only set if checkbox of article for Facebook sharing is activated.
<!--CONTENT_LINKEDIN_SHARE//--> URL of LinkedIn sharing link. Is only set if checkbox of article for LinkedIn sharing is activated.
<!--CONTENT_XING_SHARE//--> URL of Xing sharing link. Is only set if checkbox of article for Xing sharing is activated.
<!--CONTENT_TWITTER_SHARE//--> URL of Twitter sharing link. Is only set if checkbox of article for Twitter sharing is activated.
<!--CONTENT_GOOGLEPLUS_SHARE//--> URL of Google+ sharing link. Is only set if checkbox of article for Google+ sharing is activated.
Info: Custom fields have to be manually enabled by Eyepin for an account.

Area Variables

<!--CNT//--> Consecutive number of article
<!--IF:FIRST//--> First article of area
<!--IF:LAST//--> Last article of area
<!--IF:ODD//--> Odd article of area
<!--IF:EVEN//--> Even article of area
<!--IF:NTH:[3/4/5]//--> every 3rd/4th/5th article of area

<!--IFNOT:...//--> works also for these variables.


Example

<!--CONTENT_BEGIN:0:1//-->
<table width="600" style="width:600px;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" style="width:10px; line-height:1px;font-size:1px;"><!--SPACER:10:1//--></td>

    <!--IF:CONTENT_PICTURE//-->
    <td valign="top" width="180" style="width:180px; line-height:1px;font-size:1px;">
      <!--IF:CONTENT_CTRNAME//--><a href="<!--CONTENT_CTR//-->" style="text-decoration:none; line-height:1px;font-size:1px;"><!--ENDIF:CONTENT_CTRNAME//-->
      <img src="<!--CONTENT_PICTURE//-->" border="0" width="180" style="width:180px; display:block;" alt="<!--CONTENT_PICTURETEXT//-->">
      <!--IF:CONTENT_CTRNAME//--></a><!--ENDIF:CONTENT_CTRNAME//-->
    </td>
    <td width="20" style="width:20px; line-height:1px;font-size:1px;"><!--SPACER:20:1//--></td>
    <!--ENDIF:CONTENT_PICTURE//-->

    <td valign="top" align="left" style="font-family:arial,sans-serif; font-size:12px; color:#333333;">

        <!--IF:CONTENT_TITLE//-->
        <span style="font-family:arial,sans-serif; font-size:14px; color:#000000;"><b><!--CONTENT_TITLE//--></b></span>
        <br><br>
        <!--ENDIF:CONTENT_TITLE//-->

        <!--CONTENT_OPENER//-->

        <!--IF:CONTENT_CTRNAME//-->
        <br><br>
        <a href="<!--CONTENT_CTR//-->" style="font-family:arial,sans-serif; font-size:14px; color:#000000;"><!--CONTENT_CTRNAME//--></a>
        <!--ENDIF:CONTENT_CTRNAME//-->

        <!--IF:CONTENT_FACEBOOK_SHARE//-->
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="...">
              share on
              <a href="<!—CONTENT_FACEBOOK_SHARE//—>" style="..." >
                <img src="<!--LAYOUT_URL//-->images/facebook_icon.gif" width="30" height="30" border="0">
              </a>
            </td>
          </tr>
        </table>
        <!--ENDIF:CONTENT_FACEBOOK_SHARE//-->

    </td>
    <td width="10" style="width:10px; line-height:1px;font-size:1px;"><!--SPACER:10:1//--></td>
  </tr>
</table>
<table width="600" style="width:600px;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="20" style="height:20px; line-height:1px;font-size:1px;"><!--SPACER:1:20//--></td>
  </tr>
  <!--IFNOT:LAST//-->
  <tr>
    <td bgcolor="#888888" height="1" style="height:1px; line-height:1px;font-size:1px;"><!--SPACER:1:1//--></td>
  </tr>
  <tr>
    <td height="20" style="height:20px; line-height:1px;font-size:1px;"><!--SPACER:1:20//--></td>
  </tr>
  <!--ENDIFNOT:LAST//-->
</table>
<!--CONTENT_END:0//-->

Article Grouping

Definition of Article Groups

<!--GROUP_BEGIN:num//--> Defines begin and end for a group.
nummust be the same as the number of the contained content area.
<!--GROUP_END:num//-->

Group Variables

<!--GROUP_TITLE//--> Will be replaced with the title of the group.

Group Area Variables

<!--IF:GROUP_FIRST//--> First group area
<!--IF:GROUP_LAST//--> Last group area
<!--IF:GROUP_ODD//--> Odd group area
<!--IF:GROUP_EVEN//--> Even group area

Article Landingpage

Article landingpage content is defined in detail.php. This page will show when URL of an article is set to Landingpage.

Info: All standard article variables can be used in addition to the variables below.
<!--CONTENT_DETAIL//--> Landingpage text of article

Example detail.php

<table width="600" style="width:600px;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" style="width:10px; line-height:1px;font-size:1px;"><!--SPACER:10:1//--></td>
    <td valign="top" align="left" style="font-family:arial,sans-serif; font-size:12px; color:#333333;">

        <!--IF:CONTENT_PICTURE//-->
        <img src="<!--CONTENT_PICTURE//-->" border="0" style="width:580px; display:block;" alt="<!--CONTENT_PICTURETEXT//-->">
        <br><br>
        <!--ENDIF:CONTENT_PICTURE//-->

        <!--IF:CONTENT_TITLE//-->
        <span style="font-size:14px; font-weight: bold;"><!--CONTENT_TITLE//--></span>
        <br><br>
        <!--ENDIF:CONTENT_TITLE//-->

        <!--CONTENT_DETAIL//-->

        <!--IF:CONTENT_FACEBOOK_SHARE//-->
        share on
        <a href="<!—CONTENT_FACEBOOK_SHARE//—>" style="..." >
          <img src="<!--LAYOUT_URL//-->images/facebook_icon.gif" width="30" height="30" border="0">
        </a>
        <!--ENDIF:CONTENT_FACEBOOK_SHARE//-->

    </td>
    <td width="10" style="width:10px; line-height:1px;font-size:1px;"><!--SPACER:10:1//--></td>
  </tr>
</table>

Table of Contents

Definition of Table of Content Areas

<!--CONTENTNAV_BEGIN:num//--> Defines the begin of a table of content area. The number corresponds with the index of the content area (numbered consecutively, beginning with 0), for which the table of contents should be displayed.
<!--CONTENTNAV_END:num//--> Defines the end of a table of content area. The number corresponds with the index of the content area.

Article Variables

Info: All standard article variables can be used in addition to the variables below.
<!--CONTENT_ANCHOR//--> Link to the anchor of the article

Example

<table border="0" cellpadding="0" cellspacing="0">
<!--CONTENTNAV_BEGIN:0//-->
<tr>
  <td class="inhaltlink" valign="top" style="...">
    <a href="<!--CONTENT_ANCHOR//-->" style="..."><!--CONTENT_TITLE//--></a>
  </td>
</tr>
<!--CONTENTNAV_END:0//-->
<!--CONTENTNAV_BEGIN:1//-->
<tr>
  <td class="inhaltlink" valign="top" style="...">
    <a href="<!--CONTENT_ANCHOR//-->" style="..."><!--CONTENT_TITLE//--></a>
  </td>
</tr>
<!--CONTENTNAV_END:1//-->
</table>

Image Manipulation

These modifications can be applied to all _PICTURE tags., the specific tags in below are only examples.

Resizing Images

<!--CONTENT_PICTURE:RESIZE(XX,YY):HTML//--> XX … width of image output
YY … height of image output
XX or YY are mandatory. If only one is given the other must be set to 0. If width and height is defined, then the image is resized to fit into this box

Cropping Images

<!--HEADER_PICTURE:CROP(XX,YY,AA,BB)//--> XX … x-coordinate of distance from top left corner
YY … y-coordinate of distance from top left corner
AA … width of image output
BB … height of image output

If XX or YY is a negative value, the offset is calculated from the bottom/right of the image.
To center the croped image on X- or Y-Axis, set value a (auto) to XX or YY.

<!--CONTENT_PICTURE:CROP(a,a,200,200)//-->

If AA or BB is a negative value, width/height of the output will be width/height of the original image subtracted with the value.

<!--CONTENT_PICTURE:CROP(10,50,-100,-100)//-->
Info: If AA or BB is larger than possible, the output will automaticly cut at the end.

Merging Images

You can merge dynamic images with images uploaded your media database.

<!--HEADER_PICTURE:MERGE(MediaID,XX,YY)//--> MediaID … ID of image in Media-DB
XX … x-coordinate of distance from top left corner
YY … y-coordinate of distance from top left corner

If XX or YY is a negative value, the offset is calculated from the bottom/right of the image.
To center the image on X- or Y-Axis, set value a (auto) to XX or YY.

<!--HEADER_PICTURE:MERGE(1397492,a,-50)//-->
Info: You can merge multiple images by chaning them together.

Output

By default the _PICTURE tag outputs the URL of the image. With the output command you can manipulate the output.

:HTML Whole HTML code of picture
:TEXT Copiright Text of picture
:WIDTH Actual width of image
:HEIGHT Actual height of image
Chaining commands

Sometimes it is necessary to use multiple image manipulations and output commands at the same time. It is possible to combine as many image manipulations as you want within one _PICTURE tag. The output command must always be in the last position.

<img src="<!--CONTENT_PICTURE:RESIZE(600,0):CROP(0,0,600,200)//-->" width="600" height="<!--CONTENT_PICTURE:RESIZE(600,0):CROP(0,0,600,200):HEIGHT//-->" />
Für Rückfragen stehen wir Ihnen jederzeit gerne unter support@eyepin.com zur Verfügung.