EasyNews

This documentation provides detailed information about EasyNews and what you can do with it. Also it provides detailed descriptions of the frontend render engine, so you can start building beautiful newsletters.

Release History

• 1.0.0   Initial Release

created by Michael Lopez

Contributors

• Michael Lopez
• Kai Krause

License

This project is liscensed to EasyCode-IT AG, all rights reserved.

Contact

Technical Informations

To learn more about EasyNews, or to recieve detailed infos, contact

EasyCode-IT AG Erlenstrasse 27 CH-2555 Brügg Switzerland

info@easycode-it.com www.easycode-it.com

Sales

If you are interested in using EasyNews for your company, please contact

EasyStudios Erlenstrasse 27 CH-2555 Brügg Switzerland

info@easystudios.ch www.easystudios.ch

General

EasyNews is the News Module published by EasyCode-IT AG.

Functionality

The Module provides the following functionality:

• Keeping track of subscribers with Subscriber Lists
• Sending Newsletters with customisable Newsletter Templates
• Free Template Library provided by EasyStudios
• Optin Functionality for a Subscriber List
• Campaign Planing via. the extensive Campaign Feature
• Reporting with Click and Open analysis for Newsletters

Versioning

• V0.9.0 Beta Release - 31.03.2017
• V1.0.0 Stable Version - 31.05.2017

Objects

EasyNews uses Liquid as the frontend render engine. In this part of the documentation we will explore the different objects aviailable. For more infos about Liquid, visit the separate Liquid-Documentation

## In this Article

• App
• Image
• Signature
• Subscriber
• CurrentDate
• ViewOnline
• Unsubscribe
• OpenTracking

App

The App object is a collection of the general settings and information about EasyNews.

This information can only be eddited from inside EasyNews Admin Dashboard by navigating to the “Settings” tab.

Details

Image

The Image Object contains images from different sources, and makes it easy to get infos from the image to display in the newsletter.

Images can be added and edited in “Gallery”.

Details

Signature

The Signature Object provides general information about the company for the newsletter signature. These provide the nessecary infos to make the newsletter legaly correct.

Details

Subscriber

The Subscriber object provides the information about the newsletter subscriber. These informations can be suplied over an optin form or manually under the “Subscribers” Navigation in the admin backend. These informations will be personalised for each email sent.

Details

App

The App object is a collection of the general settings and information about the shop.

This information can only be eddited from inside EasyNews Admin Dashboard by navigating to the “Settings” tab.

## In this Article

• Properties
  • app.signature
  • app.logo
  • app.copyright
  • app.url
• Context

Properties

The App object provides the following Properties:

• Signature provides the Signature of the newsletter instance as an Signature object
• Logo provides the Logo of the newsletter instance as an Image object
• Copyright provides the copyright info
• Url provides the base url

app.signature

Returns the signature object of the newsletter instance.

{{ app.signature.company }}

OUTPUT

EasyCode-IT AG

app.logo

Returns the logo of the newsletter instance as an Image.

INPUT

<img src="{{ app.logo.url }}" />

OUTPUT

<img src="/img/logo.jpg" />

app.copyright

Returns the copyright notice of the newsletter, this can be configured under “General Settings” in the “Settings” tab.

INPUT

© {{ app.copyright }}

OUTPUT

© EasyStudios 2015

app.copyright

Returns the url of the newsletter instance, this can be configured under “General Settings” in the “Settings” tab.

INPUT

{{ app.url }}

OUTPUT

http://easystudios.ch

Context

The App Object is aviailable in the following contexts:

• Newsletter Template

Image

The Image Object contains images from different sources, and makes it easy to get infos from the image to display in the newsletter.

Images can be added and edited in “Gallery”.

## In this Article

• Properties
  • image.name
  • image.url
• Context

Properties

The Image object provides the following Properties:

• name provides the Signature of the newsletter instance as an Signature object
• url provides the Logo of the newsletter instance as an Image object
• Copyright provides the copyright info
• Url provides the base url

image.name

Returns the name of the image.

INPUT

<img src="{{ image.url }}" alt="{{ image.name }}" />

OUTPUT

<img src="http://easystudios.ch/img/logo.jpg" alt="logo.jpg" />

image.url

Returns the full url of the image.

INPUT

<img src="{{ image.url }}" alt="{{ image.name }}" />

OUTPUT

<img src="http://easystudios.ch/img/logo.jpg" alt="logo.jpg" />

Context

The Image Object is aviailable in the following contexts:

• app.logo in the App Object

Signature

The Signature Object provides general information about the company for the newsletter signature. These provide the nessecary infos to make the newsletter legaly correct.

In this Article

• Properties
  • signature.firstname
  • signature.lastname
  • signature.company
  • signature.city
  • signature.street
  • signature.street_cont
  • signature.zip
  • signature.website
• Context

Properties

The Signature object provides the following Properties:

• Firstname provides the Firstname of the newsletter owner
• Lastname provides the Lastname of the newsletter owner
• Company provides the Company of the newsletter owner
• City provides the Company of the newsletter owner
• Street provides the Company of the newsletter owner
• StreetCont provides the Company of the newsletter owner
• Zip provides the Zip of the newsletter owner
• Website provides the Website Url of the newsletter owner

signature.firstname

Provides the Firstname of the newsletter owner.

INPUT

{{ signature.firstname }}

OUTPUT

Michael

signature.lastname

Provides the Lastname of the newsletter owner.

INPUT

{{ signature.lastname }}

OUTPUT

Lopez

signature.company

Provides the Company of the newsletter owner.

INPUT

{{ signature.company }}

OUTPUT

EasyCode-IT AG

signature.city

Provides the City of the newsletter owner.

INPUT

{{ signature.city }}

OUTPUT

Biel/Bienne

signature.street

Provides the Street of the newsletter owner.

INPUT

{{ signature.street }}

OUTPUT

Lengnaustrasse

signature.street_cont

Provides the StreetCont of the newsletter owner.

INPUT

{{ signature.street_cont }}

OUTPUT

8

signature.zip

Provides the Zip of the newsletter owner.

INPUT

{{ signature.zip }}

OUTPUT

2504

signature.website

Provides the Website URL of the newsletter owner.

INPUT

{{ signature.website }}

OUTPUT

http://easycode-it.com

Context

The Signature Object is aviailable in the following contexts:

• app.signature in the App Object

Subscriber

The Subscriber object provides the information about your newsletter subscribers. These informations can be suplied over an optin form or manually under the “Subscribers” Navigation in the admin backend. These informations will be personalised for each email sent.

In this Article

• Properties
  • subscriber.name
  • subscriber.firstname
  • subscriber.lastname
  • subscriber.email
• Context

Properties

The Subscriber object provides the following Properties:

• Name provides the Fullname of a subscriber
• Firstname provides the Firstname of a subscriber
• Lastname provides the Lastname of a subscriber
• Email provides the Email of a subscriber

subscriber.name

Provides the Fullname of a subscriber consisting of the Firstname and the Lastname.

INPUT

{{ subscriber.name }}

OUTPUT

Michael Lopez

subscriber.firstname

Provides the Firstname of a subscriber.

INPUT

{{ subscriber.firstname }}

OUTPUT

Michael

subscriber.lastname

Provides the Lastname of a subscriber.

INPUT

{{ subscriber.lastname }}

OUTPUT

Lopez

subscriber.email

Provides the Email of a subscriber.

INPUT

{{ subscriber.email }}

OUTPUT

michael.lopez@easycode-it.com

Context

The Subscriber Object is aviailable in the following contexts:

• Newsletter Template

Objects

EasyNews uses Liquid as the frontend render engine. In this part of the documentation we will explore the different models available within it’s context. For more infos about Liquid, visit the separate Liquid-Documentation

In this Article

• Newsletter
• Confirmation

Newsletter

The Newsletter Model is accessible within a newsletter template.

Details

Confirmation

The confirmation is accessible within the confirmation mail template of the optin settings.

Details

Newsletter

The Newsletter Model is used within the a Newsletter.

In this Article

• Subscriber
• Current_Date
• View_Online
• Unsubscribe
• App

Subscriber

The Subscriber provides a reference to the subscriber object. It can access every property of the subscriber object by prefix with subscriber.property.

Subscriber Object

Current_Date

The Current_Date provides the current Date as a string.

View_Online

The View_Online provides the Link to view the current newsletter online. This should be used in the href of an <a> element.

Unsubscribe

The Unsubscribe string provides the link to unsubscribe the current subscriber from the newsletter. This should be used in the href of an <a> element.

App

The App provides a reference to the app object. It can access every property of the app object by prefix with app.property.

App Object

Confirmation

The Confirmation Model is used within the OptIn Confirmation Mail.

In this Article

• Subscriber
• Confirmation_Url
• Current_Data
• App

Subscriber

The Subscriber provides a reference to the subscriber object. It can access every property of the subscriber object by prefix with subscriber.property.

Subscriber Object

Confirmation_Url

The Confirmation_Url provides the current Url to confirm the subscription as a string.

Current_Date

The Current_Date provides the current Date as a string.

App

The App provides a reference to the app object. It can access every property of the app object by prefix with app.property.

App Object

Templates

We’re now going to look at Newsletter Templates in EasyNews, how they are built and what you can do with them. Templates are used to create the different Newsletters. Each Template consists of several Modules wich can be draged and dropped into the Editor.

EasyNews is to over 90% compatible with StampReady, so these Templates can be purchased, changed and implemented with ease.

In this article

• Shared Templates
• Template Import
  • Import By Zip
  • Import By Html
  • Import By Code
• Modules
• Personalize

Shared Templates

EasyStudios provides a set of Shared Templates that are aviailable on every application. These Templates are published by EasyStudios and set to IsShared, then they are instantly aviailable for all customers. These templates can not be edited by the customer.

Customers do not have the option to share a Template.

Template Import

Templates can be imported in every application in three different ways:

• By Zip
• By Html
• By Code

To Import a Template go to “Templates” in the “Settings”-Tab.

Previews

While importing, the Preview Images will be generated on the Server for the whole Template, as well as for each Module in the uploaded Template.

Import By Zip

A Template can be importet via. Zip Archive. This method is perfect to implement a Template using local Images.

Zip Structure

• index.html
• images or img
  • image.png
  • image.jpg
  • image.gif
  • ìmage.jpeg

HTML

Make sure there is only one .html File in the zip Archive, everything else is unsupported.

Images

The images used in the template have to be placed in the images folder (img is also supported). All images in the supported Formats (.png, .jpg, .jpeg, .gif) in this folder will be imported.

Import By Html

A Template can be imported via. HTML File. Make sure that every image is linked as an absolute link.

Import By Code

A Template can be imported via. Code Input directly. Make sure that every image is linked as an absolute link.

Modules

Note: a template must contain at least one module for a successful import!

Templates consist of different modules. The modules represent a block that can be used in a newsletter. A module will be separated by the data-moduleattribute.

<table data-module="hello_world">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

This ensures that the module will be listet in the editor and that the user can drag and drop the module from the Modules bar into the Newsletter.

Thumbnails

The Thumbnails of a module gets generated when the theme is uploaded, see Import Zip.

Editor Find more Details about editor functions in Modules here.

Personalize

Personalisation is quite an important factor to better relate to customers and send out a better message.

Find out more about personalising Newsletters here.

Modules

We’re now going to look at the Modules in the Newsletter Templates in EasyNews, how they are built and what you can do with them.

In this article

• Basics
• Editor
  • Change font sizes
  • Change font colors
  • Giving stylings to each newly created link
  • Change border colors
  • Change background images

Basics

Templates consist of different modules. The modules represent a block that can be used in a newsletter. A module will be separated by the data-moduleattribute.

<table data-module="hello_world">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

This ensures that the module will be listet in the editor and that the user can drag and drop the module from the Modules bar into the Newsletter.

This adds also the following functionality to the editor:

• Remove Sections
• Sort sections

Thumbnails

The Thumbnails of a module gets generated when the theme is uploaded, see Import Zip.

Editor

To allow the full customisation of the Template via. Editor you can provide several Data-Attributes to achieve the best possible user-experience. Bellow the different functions provided by the Editor and the associated attributes are documented in detail.

Change font sizes

To allow the user to change font sizes, simply add data-size to any element. You can also add the data-min and data-max tag to control the marges. Following this example, the user would be able to drag the range slider with a minimum value of 12px and a maximum value of 36px. However, the data-min and data-max template tag are not required. If you want to target multiple elements for the same slider, simply give each desired element the exact tag name.

<!-- Change element font size. Minimum 12px, maximum 36px. -->
<table>
	<tr>
		<td data-size="my specific element" data-min="12" data-max="36">Hello World</td>
	</tr>
</table>

<!-- Change multiple elements the same font size. Minimum 12px, maximum 36px. -->
<table>
	<tr>
		<td>
			<h1 data-size="headline" data-min="12" data-max="36">Headline 1</h1>
			<p>Hello World 1</p>
			
			<h1 data-size="headline" data-min="12" data-max="36">Headline 2</h1>
			<p>Hello World 2</p>
			
			<h1 data-size="headline" data-min="12" data-max="36">Headline 3</h1>
			<p>Hello World 3</p>
		</td>
	</tr>
</table>

Change font colors

To allow the user to change the desired font color, simply add ``data-color` to your element. Want to target multiple colors? Simply give each element the exact same tag name.

<table>
	<tr>
		<td data-color="my element">Hello World</td>
	</tr>
</table>

Giving stylings to each newly created link

Sometimes you don’t want to have a new link to be the main color. You want it bold and italic. We can give separate stylings by adding data-link-style to your desired TD, Table or any element really. If you want the new link to hold a data-color or data-size, simply add 2 other tags to your TD, table or any element, like so: data-link-color and ``data-link-size`.

Here’s an example to turn each newly created link red and bold.

<table data-link-color="Link" data-link-size="Link"
 data-link-style="font-weight: bold; color: red;">
	<tr>
		<td>Hello World</td>
	</tr>
</table>			

Change border colors

Sometimes we are in a situation we want the user to be able to edit border colors. This can easily be achieved by adding the data-border-color tag. If you want to target a specific side for the border, simply use data-border-top-color, data-border-left-color, data-border-bottom-color or data-border-right-color.

If you use the same tag as the data-border-color and data-bgcolor, the picker will merge as one.

<!-- Change element border top color -->
<table data-border-top-color="my element">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

Change background images

To allow users to add a background image to your element, simply add the data-bg tag.

<!-- Change background image -->
<table>
	<tr>
		<td data-bg="my element">Hello World</td>
	</tr>
</table>

Personalising Newsletters

A Personalised Newsletter will lead to a better opening rate and you can build a better connection to your customers. In this article we will discuss how you can implement Personalised Newsletter Templates with EasyNews.

In this article

• Basics
• Signature
• Subscriber

Basics

The Personalisation in a newsletter is based on Liquid.

The following objects can be used to personalise the Newsletter, this can be done in either the template or in a single newsletter in the editor:

• App
• Subscriber

App

The App object is a collection of the general settings and information about the shop.

This information can only be eddited from inside EasyNews Admin Dashboard by navigating to the “Settings” tab.

Details

Subscriber

The Subscriber object provides the information about your newsletter subscribers. These informations can be suplied over an optin form or manually under the “Subscribers” Navigation in the admin backend.

Details

Campaign

A campaign consists of different Tasks of different types. Tasks can be scheduled on a specific date and time, then they are sent automaticly.

Different Subscriber Lists can be associated with a campaign, the newsletter will then be sent to those lists.

If a Subscriber is in different lists associated with the campaign, the newsletter will only sent once.

Newsletter Tasks

Newsletter Tasks are used to send Newsletters or to schedule email newsletters. They are built opon one of the imported or shared templates.

## Social Tasks

OptIn

This section of the documentation shows how the optin process looks like and what you can do with it.

Optin Settings

ConfirmationUrl

Url that users will redirected to after form submit of the newsletter form.

SuccessUrl

Url that users will redirected to after clicking the confirmation url within the mail.

Process

Signup -> ConfirmationUrl -> Mail -> Mail Link Click -> SuccessUrl

Tracking

We are now going to look at the Tracking and Statistics of EasyNews.

Mail Open

To track the opening of sent mails and create statistics, EasyNews adds automaticly a transparent 1x1 px to the Newsletter. The Link to the picture will then track the opening of emails sent to the subscriber.

Link Tracking

Every link in a newsletter is parsed to a Tracking Link when sending the mail. The newly generated link will then be tracked and redirect the Subscriber to the original link.

Import

In this chapter we will discuss the import functions of EasyNews.

Import Subscribers

EasyNews provides an import function for subscribers. The Import provides an automatic deduplication function, so a subscriber is only added once per Email Address. A subscription will also only be added, if there is no existing subscription.

To import subscribers into EasyNews, we provide simple Excel template.

Unsubscribe

The import function will not reactivate a subscriber or subscription wich has already unsubscribed from the list. So a user can reimport lists wich are provided by external tools without compromising the already imported subscriptions.

Downloads

• Subscriber Import Excel Template