eyepin Documentation

Last Update: 2023-11-16

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
`<!--HEADER_PICTUREALT//-->`	Alt 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
`<!--FOOTER_PICTUREALT//-->`	Alt 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  at the beginning and  at the end.

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

If necessary, you can also use IF/IFNOT controlls
 ... 
 ... .

<!--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
Custom`num`	`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_PICTUREALT//-->`	Alt 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

 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. `num`must 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>

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`	Copyright Text of picture
`:ALT`	Alt 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.

Files

Newsletter Tags

Event Mail Tags

Tell-A-Friend Tags

Snipplets - Show/Hide template parts

Config XML

Custom fields

Snipplets

Name and Description

Order

Articles

Definition of Article Areas

Article Variables

Area Variables

Example

Article Grouping

Definition of Article Groups

Group Variables

Group Area Variables

Article Landingpage

Example detail.php

Table of Contents

Definition of Table of Content Areas

Article Variables

Example

Image Manipulation

Resizing Images

Cropping Images

Merging Images

Output

Example `detail.php`