Using templates and messages: a sample workflow

If you are looking at integrating BEE Plugin 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 BEE Plugin 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 new template" button in the MailUp UI.

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

The user will find that edited template in a "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 Plugin'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 or by cloning an existing message. 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 BEE Plugin just like it is when they are editing the template. The difference is simply in the user interface. The application knows that in the current scenario the user wants to create a new message, and therefore the buttons shown in the UI are different from those displayed when editing a template, as shown below.

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

  • Save the message: 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 it as a new 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.
  • Send a 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.

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 Plugin 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...

  • Modify: reloads the JSON back into BEE Plugin to let the user edit the message again.
  • Send: starts the email campaign setup wizard to send the message.
  • Quick send: loads the same feature mentioned above.
  • Check up: since it's a good idea to check for blacklisted URLs and other potential issues, MailUp invites the user to go through a "Check up" step as a suggested next step.

 

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.

Have more questions? Submit a request

Comments

  • Avatar
    Kevin

    Is there any sample code available for an embedded SaaS template gallery?

  • Avatar
    Massimo Arrigoni

    Hi Kevin, not yet (at least not directly from us), but we are getting this request a lot, so it is something that we are starting to look at.