Extending the editor

We have a shiny, new BEE Plugin technical docs site.
You can find a new and updated version of this page here.

 

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

 

Special links

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.

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

specialLinks: [{
 type: 'Subscription',
 label: 'Unsubscribe',
 link: 'http://[unsubscribe]/'
}, {
 type: 'Subscription',
label: 'Subscribe',
link: 'http://[subscribe]/' }];

To the user, they become available as a special button in the expanded text toolbar.

Group links 

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

In the example bellow we grouped the more used links under the same type, so the user will find them quickly:

specialLinks: [{
 type: 'Frequently used',
 label: 'Unsubscribe',
 link: 'http://[unsubscribe]/'
}, {
type: 'Frequently used',
label: 'Subscribe',
link: 'http://[subscribe]/'
}, {... 

 

 

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.

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}'
}];

Let's dig a bit deeper.

 

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.

NOTE: you can now handle dynamic images also with a different feature that was created specifically for that task. See: add dynamic images to your emails.

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.

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.

Next step

Initializing the editor: create, start and load.

Have more questions? Submit a request

Comments