Displaying the editor

  1. Prepare the page
  2. Create the instance
  3. Instance Methods
  4. Instance Events

Prepare the page

In order to make the editor available for your users, you need to add a couple of elements to your page.

The first one is to include BEE editor’s JS file:

<script src="https://app-rsrc.getbee.io/plugin/BeePlugin.js"></script>

Then you need to add a container element:

<div id="bee-plugin-container"></div>

Remember to specify this in the container parameter in the configuration.

Create the instance

Once you have obtained your access token, defined how you want to configure the editor, included optional parameters such as special links, merge tags and merge content, you can then initialize it with the following:

BeePlugin.create(token, beeConfig, function(beePluginInstance) { /* do things */ });


Once the instance is created, it will be passed to the function that you can use to interact with the plugin.

Instance Methods

Assuming that beePluginInstance is the instance of your embedded BEE plugin, here are the methods you can call:

Method Description
beePluginInstance.start(templateToLoad) Starts the editor, loading the templateToLoad JSON string with the template structure (if specified).
beePluginInstance.load(template) Loads the JSON template string specified in the template parameter.

If you use a paid plan, you can hide the top toolbar and control the editor from your application’s user interface. For example, it’s up to you at that point to have buttons above or below the editor.
Here’s some useful methods for this scenario:

Method Description
beePluginInstance.preview() Triggers the message preview behavior within the editor.
beePluginInstance.togglePreview() Open/close the message preview behavior within the editor.
beePluginInstance.toggleStructure() Controls the visibility of the structure outlines in the message editing portion of the editor.
beePluginInstance.save() Invokes the onSave callback function. The plugin will pass two files to the function: a JSON file with the message structure (for later editing) and a ready-to-send HTML file.
beePluginInstance.saveAsTemplate() Invokes the onSaveAsTemplate callback function. The plugin will pass to the function a JSON file with the message structure (for later editing).
beePluginInstance.send() Invokes the onSend callback function. The plugin will pass to the function a ready-to-send HTML file.

Instance Events

The top toolbar displayed by default within the BEE editor contains buttons that trigger certain actions. These are the callsbacks that are triggered when the buttons are clicked.

Event Description Returned values
onSave Fired when the Save button is clicked. JSON and HTML documents
onSaveAsTemplate Fired when “Save as template” is clicked. JSON document
onAutoSave Fired automatically by BEE based on autosave configuration parameter value. JSON document
onSend Fired when the “Send a test button” is clicked. HTML document
onLoad Fired when the JSON is loaded in the editor. JSON document
onError Fired every time an error occurs. Error message
onTogglePreview Fired every time the preview is opened or closed.