Using templates and messages: a sample workflow

If you are looking at integrating Beefree SDK into your application and are unsure of how the concepts of messages and templates can be utilized, this article is for you.

What you will find below is a description of how Beefree SDK is currently being used within the MailUp digital marketing suite. It's just an example of a user workflow in which templates and messages are used to address different needs.

We hope this sample workflow helps you visualize how events that are triggered automatically (e.g. auto save) and manually (e.g. save, save as template, etc.) can be leveraged to bring useful features to life in your application.

Templates

In MailUp a user can select a template from a centralized catalog of pre-built templates.

Those are email messages that the design team at MailUp created using with the BEE editor and were then saved in a centralized catalog accessible by all MailUp users.

The database that stores the template catalog holds both the JSON (for editing via the BEE editor) and the HTML of the message (to show a preview, create thumbnails, etc.).

When users want to modify a template, the JSON file is loaded into the BEE editor so that they can edit it as they wish. When they are ready to save the changes, they do so by clicking on a "Save as template" button in the MailUp UI.

The onSave callback is triggered and it returns both the JSON and the HTML to MailUp, which saves them into a user-specific table (vs. the centralized template catalog in which the template originally resided).

The user will find that edited template in the "My templates" section of the system. From there, they can preview the template, create an email campaign from it, edit the template, or remove it, as shown below.

While the user is editing the template in the BEE editor, the SDK's auto-save feature saves the JSON of the file to avoid any loss of work in case something bad were to happen (e.g. computer crashed). Auto-save can occur every N seconds, with N being a configuration parameter that is passed to the plugin (it requires an integer, and the minimum value is 15, for auto-saving every 15 seconds).

The JSON is saved as a draft of the template that is being modified: when the system finds the draft, it asks users if they want to continue working on it. The draft is cleared when the template is eventually saved. The same is done when saving drafts of messages, as discussed below.

Messages (or Campaigns)

In the MailUp system users create a new message (i.e. the email that they will send to their customers) starting from a template, by cloning an existing message, by using an imported file, etc. The same template could be used to create N different messages (i.e. email campaigns).

When creating a new message from a template, users can select from either the catalog of pre-built templates or the "My templates" section, and then click on "New email" to get started.

At that point the JSON of the template is loaded into Beefree SDK just like it is when they are editing the template. You could decide to show different buttons depending on whether the user is creating a campaign, or editing a template. In MailUp, the call-to-action in the top-right corner, for example, changes depending on whether the BEE editor was launched while editing a template vs. creating a new campaign from a template.

In previous versions of MailUp, the editor was not loaded full screen, as shown below. That's just a UI and UX decision. MailUp decided that it made sense to give the user as much real estate as possible, and therefore the most recent versions of the platform load the editor full screen, as shown in the screenshots above.

Users that are working on a message (vs. a template) can...

• Save & exit: a custom "Save message" button in the MailUp UI allows users to save the message when they are done editing. This triggers the onSave callback. The JSON and HTML documents are returned by the plugin and saved into the database table where messages are saved. The HTML is used to generate a thumbnail, allow for a preview outside of the editor, generate inbox previews, perform a "spam check" on the content, and send the email campaign when the user is ready to do so. The JSON is passed back to the editor when MailUp users wish to edit the message.
• Save as a template: users will instead click on "Save as template" if they decide to save the message as a new template. Here too the system uses the onSave method to save both JSON and HTML. The HTML is used to generate a thumbnail of the template and allow users to see a preview outside of the editor. This time the files are saved into a separate database table where "My templates" are saved.
• Quick test: users will click on "Quick send" if they wish to run a quick test. That will trigger the onSend callback, which returns the HTML of the message (the JSON is not needed in this scenario). The callback is used to display a modal window that allows the user to set a few parameters (e.g. recipients to send the email to) and send the test message.

Here is a screenshot of this "Quick send" feature. This modal window is part of MailUp, not of the editor.

In fact, the same modal window is launched when the user clicks on "Quick send" from other areas of the application, like the Message Overview page, shown here.

The auto-save feature is used to save the message every 30 seconds so that the user can resume editing in case something happened (e.g. the computer crashed). As explained above, the concept of a draft is used for that purpose.

Remember that when onAutoSave is triggered, the SDK only returns the JSON of the file, not the HTML. The reason is that parsing the JSON to create the HTML takes a few moments during which the editor freezes and a "waiting" animation is displayed. This would be disruptive on auto-save.

When users are done editing the message, they will click on "Save message". At this point the onSave callback is triggered, returning both the JSON and the HTML.

Having saved everything it needs, MailUp can now allow the user to perform multiple actions, including immediately sending the email campaign, if they wish to do so. Here is what MailUp shows the user after the message is saved.

The HTML of the message, which was saved to the system database when the onSave callback was triggered at the time the user saved the message in the BEE editor, is used to create the message thumbnail shown on the left.

Among the available actions on the page...

• Edit: reloads the JSON back into Beefree SDK to let the user edit the message again.
• Link check: takes the user to a page that does a health check of all the links in the email.
• Send: starts the email campaign setup wizard to send the message.
• Quick send: loads the same feature mentioned above.
• Save: saves all the changes made on the page & returns the user to a list of saved emails.

Conclusions

We hope this helps you visualize a possible workflow that utilizes the various events that can be triggered automatically (auto save) or by the user (saving, saving a template, sending a test). If you have any questions of the above, please post a comment below so that we can improve this article over time.