ResourcesKnowledge Base

Content Styles

An alternative to fully automated templates is content styles. These are HTML templates, which use a Drag & Drop editor to easily prepare and create campaigns with predefined blocks and editable fields.

Some template types can be used as a Content Style in the right-hand menu of the campaign editor. These are templates that have defined Template Blocks that will appear in the right as Content Blocks after selecting the style in the campaign.

The template base to be used as a Content Style is defined in the Template Master File and is a standard static HTML that defines the header, footer, CSS styles, but also, for example, the hidden preheader and so-called drop zones to which Drag & Drop then places blocks.

If the template contains a hidden preheader (the text that appears on the subject in some email clients), this preheader needs to have a defined class = "preheader". In order to edit the content of the header or any part of the template, it is necessary to use the mkt-inline-edit = "true" attribute.

editor1b.gif

Drop Zone Template is any block HTML element that has the mkt-area-type = "droppable" attribute, for example:

<div id="main" mkt-area-type="droppable"></div>

Such drop zones can be defined multiplely in a template, but if the Content Style is to use Content Blocks, it is necessary to define at least one drop zone to accommodate Content Blocks.

Content blocks

To create a Content Block template, use the "New Template File" button and then select "Template Block" and fill in the block name. Under this name, this block will appear in the editor in the list of available blocks.

However, in order for the content block to be functional and usable in the campaign editor, it is necessary that it be wrapped in an element with the mkt-block = "true" element. If the block did not have this element, it will not be possible to manipulate the block after inserting a block. However, it is not permissible to have nested blocks, have a defined drop zone in the block, or have another block definition in the block.

Within the block, you can specify editable areas that can be edited in the campaign using an inline element editor using mkt-inline-edit = "true".

inline-editor.png
Example of a basic block definition:

<div align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%" mkt-block="true">
  <table class="contenttablein" cellspacing="0" cellpadding="0" border="0">
    <tbody>
      <tr>
        <td mkt-inline-edit="true">this is inline editable content...</td>
      </tr>
    </tbody>
  </table>
</div>

Datasets

Often, editing directly in the content is uncomfortable and easy to grasp for users, and it is convenient to manipulate a complete dataset or dataset. For example, a product block that has a product name, photo, description, price, and link - as most of this data is used only once and in one place, and editing is straightforward, the product reference can be used for more places - like a click on a product name, a product photo, and a call-to-action purchase button. Entering a link in three places would then lead to errors and just the datasets minimize this risk of error. Blocks can then contain one or more datasets with multiple data.

Each dataset has to be wrapped with an element with the mkt-block-type = "dataset" attribute, whereby the campaign editor then identifies where the datasets are in the block. Once a dataset is defined in a block, it becomes editable and clicks it in the editor to open a window for editing data attributes.

Data attributes are a combination of element attributes and their values ​​that belong to them, and actions that occur when they change, and are divided into simple attributes and complex attributes.

Simple attributes

A simple attribute is an attribute that is applied directly to the element on which it is used, and the change of value is reflected only within that element. An example may be a price item in a block - a simple data attribute would then take the form of mkt-data-field = "inner" mkt-label-inner = "New Prize". In this case, the mkt-data-field tells you what type of attribute it is, ie. that this is an attribut inner. Changing the value will only change the inner content (innerHTML) of this element. The mkt-label-inner attribute then defines how the label should be named in the dialog box.
dataset-label.png

So if you need to change the alt attribute of an image, then the data attribute will look like this:

<img src="http://some-domain.cz/some-image.jpg" mkt-data-field="alt" mkt-label-alt="ALT image">

Supported attribute types are internal (for innerHTML), alt, title, src, href, etc. The campaign editor also detects duplicate fields to have the same content using the value specified in the mkt-label attribute. In the example above, if there were multiple images with the mkt-label-alt attribute named "New Prize" in the dataset, the form would only appear once in the form.

Complex attributes

The second type of data attributes are complex attributes, which are used where it is necessary to apply to multiple elements and their attributes, which should contain the same value. An example may be the already referenced product reference or product name, which is used not only as a text title but can also serve as a description of the image. Let's look at the following example:

<td mkt-data-field="a#product-name1 inner; a title; img alt" mkt-label-title="Name>
  <a href="http://somedomain.com/product-url" id="product-name1" title="Product title">Product title</a>
</td>
<td>
  <a title="Product Title" href="#">
    <img src="http://somedomain.com/product-image.jpg" / alt="Product title"> 	 
  </a>
</td>

In this case, the value of the mkt-data-field attribute is in the form and # product-name1 inner; and title; img alt, which means that whenever the value with the product name is updated, it will be written to the element as id product-name1, all elements and their attribute title and all img elements on their alt attribute. To specify the selector, you can combine them with a space, "#" for the id element and then "." For the class. The default value in the form is read from the value of the first selector.

For complex attributes, the tag is always set by mkt-label-title. Please also note that the following policies must be observed:

  1. The non-target element should use a unique ID to accurately target. In the above example, id = "product-name1"
  2. Nested datasets are not allowed

Example of the entire dataset

Here is a practical example of using a combination of simple and complex attributes:

<table width="100%"  mkt-block-type="dataset">
  <tbody>
  <tr>
    <td>
      <a href="#" class="product-link" mkt-data-field=".product-link href;" mkt-label-title="Product Link">
        <h2 class="title" mkt-data-field=".title inner;.product-image title;.product-image alt;" mkt-label-title="Product Name">Product Title</h2>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="product-link">
        <img src="//placehold.it/200x200" alt="Product Title" title="Product Title" class="product-image" mkt-data-field="src" mkt-label-src="IMG SRC"/>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <p>Some not very long product description.</p>
    </td>
  </tr>
  <tr>
    <td>
      <span><b>Old Price :</b></span>
      <span>
        <strike mkt-data-field="inner" mkt-label-inner="Old Price">$200</strike>
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span><b>New Price :</b></span>
      <span mkt-data-field="inner" mkt-label-inner="New Price">$100</span>
    </td>
  </tr>
  <tr>
    <td>
      <button id="buynow" mkt-data-field="inner" mkt-label-inner="Button Text">Buy Now</button>
    </td>
  </tr>
  </tbody>
</table>

Definition of data sources

Even though Content Styles and content blocks are designed to build static content campaigns, they can very effectively use data sources to simplify content preparation. Typical examples are product newsletters that can be efficiently retrieved from a data source, such as the Heureka product feed or Goods.cz, and the dataset to pre-populate data from that source. In order for the system to know which of the data sources should be used in the dataset, it must be determined using the mkt-datasource = "resource name" attribute. The data source to be used for datasets must be assigned to the template in the Template Information section, click the Edit button, and then select the data source.

The most important field when using data sources is a search field that is defined by mkt-searchable = "true". The search box is an array where the system automatically completes the corresponding records from the data source when filling out. The data from the selected record is then assigned to the elements in the dataset using the mkt-field-name = "field name", where the field name must match the field name in the data source. Let's take a sample look at using a product data source with productname, price, imgurl, price_vat, and url.

In order to define attributes and binding to fields, we will need the following dataset:

<table mkt-block-type="dataset">
  <tbody>
  <tr>
    <td>
      <a mkt-data-field="href" mkt-field-name="url" mkt-label-href="URL" href="#" target="_blank" title="">
        <img mkt-field-name="imgurl" mkt-data-field="src" mkt-label-src="Obrázek" src="https://static.mailkit.eu/pharmacy-email/product-mini3.jpg">
      </a>
    </td>
  </tr>
  <tr>
    <td mkt-data-field="a#product-name1 inner;a title;img alt" mkt-label-title="Název" mkt-searchable="true" mkt-datasource="heureka2" mkt-field-name="productname">
      <a mkt-data-field="href" mkt-field-name="url" mkt-label-href="URL" href="#">Big discount on Flu remedies</a>
    </td>
  </tr>
  <tr>
    <td mkt-field-name="price">589 Kč</td>
  </tr>
  <tr>
    <td>
      <span mkt-data-field="inner" mkt-label-inner="Orig cena" mkt-field-name="price_vat">654 Kč</span>
    </td>
  </tr>
  </tbody>
</table>

As we can see, field bonds must be defined in the same place where the mkt-data-field is defined, and the mkt-field-name only serves to determine the binding to the field in the data source. The same applies to the location of mkt-datasource and mkt-searchable.

Data formatting and styling

When working with data from a data source in a dataset, it is often useful for different values to be formatted. For example, you might see a price listed in the data source as 1234, but we'd like to see it in the form of $ 1,234.00. This can be done by typing and formatting the fields, which we create by inserting a special comment inside a content block that will allow the system to get more information about the types of fields. An example of such a definition:

<!--
@START TEMPLATE DEFINITION@
  price_vat:$#data#
  imgurl:https://img.mailkit.com/crop?img=#data#
@END TEMPLATE DEFINITION@
@START FORMAT DEFINITION@
  price_vat:number_format
  url:base64_encode
  imgurl:url_encode
@END FORMAT DEFINITION@ -->

Rules for template values are in the section between @START TEMPLATE DEFINITION @ and @END TEMPLATE DEFINITION @ and each rule must be on a separate line. The rule then always says the input field and the resulting value after transforming the original value available in #data#.

Similarly, the formatting of values takes place in the section between @START FORMAT DEFINITION @ and @END FORMAT DEFINITION @ and each rule must be on a separate line.

In case of formatting values at this moment, the system supports the function base64_encode, base64_decode, url_encode, url_decode and number_format.