Extending the editor

The default configuration returned by the system can be extended by using additional configuration objects such as:

  1. Special links
  2. Merge tags and Merge content
  3. Further extending the editor

Special links are links that your system generates dynamically at the time the message is sent, typically because they include the message ID, the recipient’s email, or some other variable. The most common one is probably the unsubscribe link.

The type parameter will be used to group related links in the UI and simplify the user selection.

Technically, special links are passed to the plugin in the configuration file as follows:




specialLinks: [
	{
      type: 'Frequently used',
      label: 'Unsubscribe link',
      link: 'http://[unsubscribe]/'
	},{
      type: 'Frequently used',
      label: 'Preference center link', 
      link: 'http://[preference_center]/'
	},
	/* Other special links */
];


and here’s an example of what the user will see in the editor UI, starting from the above code:

Merge tags and Merge content

As mentioned above, when you initialize the plugin, in the configuration file you can submit both “merge tags” and “merge content”.

Really, they are the same thing: some syntax that your system will replace with some meaningful content at the time the email is sent. They differ in the way they are presented to the user.

Merge tags help dynamically insert text into a paragraph, such as the very common scenarios of “Dear {first_name}”.
Merge content, instead, helps the user insert special syntax as content element in other sections of the message that are not text, such as an image.

Currently it is not possible to group merge tags and merge contents as it is for special links.

Here is an example of creating mergeTags and mergeContents in the configuration file:




var mergeTags = [
	{
		name: 'First Name',
		value: '[first-name]'
	}, {
		name: 'Latest order date',
		value: '[order-date]'
	}
];

var mergeContents = [
	{
		name: 'Headline news',
		value: '{headline}'
	}, {
		name: 'Image of last product viewed',
		value: '{last-product-viewed}'
	}
];


Merge Tags

Merge tags can be inserted into a block of text by clicking on the “Merge tags” button in the expanded text block toolbar. The button is not shown if no merge tags were submitted to the plugin in the configuration file.

Merge tags also become available to the user by pressing the @ key on the keyboard while editing a text block.

Here is an example: the user wants the date of the last order to be inserted after “[…] placing an order on …”, so he/she presses the @ key and selects “Last order date” from the list of merge tags found by the editor in the configuration file.

After inserting the merge tag, the text block now shows the placeholder for the last order date.

Merge content

Merge content differs from merge tags in that it allows the user to drag and drop instances of it as a content element available in the Content panel.

For example, let’s say you have some syntax that will be replaced at send time with an image (e.g. a dynamic banner ad by a service like LiveIntent): that image is a content element in the message, and needs to be treated as such.

Therefore, when merge content elements are submitted to plugin in the configuration file, a new tile is displayed in the Content panel.

The user can drag and drop it into the message just like any other content element.

Once dropped in position, the settings panel will display the instances of merge content available for selection. In this example, the user has several banner ads to choose from (i.e. some syntax that will be replaced with HTML when the email is sent).

To create another instance of merge content, the user can either drag and drop it again from the Content panel, or duplicate the existing content element…

… choose another instance of merge content from the available selections…

… and then drag it elsewhere in the message.

Limitations

Merge tags and Merge content are meant to be placeholders that will be replaced at the time the message is saved or sent. There are a couple of limitations.

  1. They do not support sample placeholder content, for now. The syntax will be displayed in the BEE editor as you design the message or page.
  2. You cannot use HTML code in the text strings passed to the editor because – if you do – it will be encoded and will not function correctly in the source code of the message. Of course, you can replace the tag with HTML code at the time of saving or sending the message.

Further extending the editor

You can use the Content Dialog feature to introduce an interactive layer between the editor and your application, and through it extend Merge Tags, Merge Content, Special Links, and Display Conditions. Learn more.