Installing the plugin

  1. Welcome!
  2. Create an application
  3. Production vs. development apps
  4. Add JavaScript Library
  5. Initialize the editor

Welcome!

Welcome to the BEE Plugin development documentation!

We’re excited that you are thinking of using our embeddable email & page editors to create a beautiful content creation experience for your customers.

Seamlessly embeddable email and page editor

As you will gradually discover, you can leverage our tools in all sorts of ways, and we are here to support you along that path. Let’s get started!

Create an application

The first step to embedding BEE in your application is to sign up for an account. Once that’s done you will be able to log into the Developer Portal.  That’s where you will:

  • Create applications (e.g. an instance of BEE for emails and one for landing pages).
  • Create development applications for all sorts of dev, QA, or staging environments.
  • Configure them: BEE has both server-side and client-side configurations.

Whenever you create a new application, we will ask you to provide some general information so that they are easily recognizable for you in the Developer Portal. This only takes a few moments.

For each app, we will also provide you with a Client ID and Client secret, which you will use to authenticate the editor when you initialize it in your app.

BEE Plugin Development Portal - App details

Go ahead and create your first application in the BEE Plugin Developer Portal.

Production vs. development apps

What you just created is your production application: you will use those application credentials (Client ID and Client Secret) in your production environment.

For development purposes, you may wish to create a development application. You can do so easily by clicking on Add a development version below any production application. You can create multiple development apps, for different purposes (e.g. QA, staging, testing new features, etc.).

Development apps inherit the same plan that your product app is on. If you wish to test features that are available on a higher plan, ask for an upgrade by clicking on Contact us to upgrade.

Add JavaScript Library

Congratulations on registering your first application!  Now it’s time to install BEE Plugin. The first step is to add the BEE Plugin library to your application. You can use plain HTML or our convenient NPM module.

HTML




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


NPM



npm i @mailupinc/bee-plugin

Initialize the editor

Step 1. Create a container

BEE Plugin will load into any HTML element on your page.

We recommend starting with an empty div, as follows:




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


Step 2. Authentication

BEE Plugin cares about your security, so let’s create a standard JSON Web Token, or JWT, to authenticate your application.  Don’t worry, it’s easier than it sounds!

Simply pass your Client ID and Client Secret to our authorization service, and we’ll send the token back to you.

We talk about this step in detail here, but here’s a quick example using jQuery:

jQuery




var endpoint = "https://auth.getbee.io/apiauth";
 
var payload = {
  client_id: "string", // Enter your client id
  client_secret: "string", // Enter your secret key
  grant_type: "password" // Do not change
};
 
$.post(endpoint, payload)
  .done(function(data) {
    var token = data;
    // continue initialization here...
  });


Step 3. Create a plugin instance

Now that you have a token, you can initialize the editor into your empty div.

To do so, you will call the create method, which has three parameters:

  • token:
    This is the result of the previous step.
  • config:
    This contains your settings and event handlers.
  • callback:
    This is a function that receives the plugin instance

Here is an example in plain JavaScript:




// Define a global variable to reference the BEE Plugin instance.
// Tip: Later, you can call API methods on this instance, e.g. bee.load(template)
var bee;
 
// Define a simple BEE Plugin configuration...
var config = {
    uid: 'string',
    container: 'string'
}

// Call the "create" method:
// Tip:  window.BeePlugin is created automatically by the library...
window.BeePlugin.create(token, config, function(instance) {
    bee = instance;
    // You may now use this instance...
});


The following table shows all of the required configuration settings:

Attribute Type Description
uid string An alphanumeric string that identifies the user and allows the plugin to load resources for that user (e.g. images).

  • Min length: 3 characters
  • Can contain letters from a to z (uppercase or lowercase), numbers and the special characters _ (underscore) and – (dash)
  • It is a string and not a numeric value

It uniquely identifies a user of the Plugin. When we say “uniquely”, we mean that:

  • It will be counted as a unique user for monthly billing purposes.
  • Images (and other files) used by the user when creating and editing messages will be associated with it and not visible to other users (when using the default storage).
container string Identifies the id of div element that contains BEE Plugin

Step 4. Start the editor

The final step is to the start the editor by loading a template.

To do so, call the “start” method as follows:



var template = { ... }; // Any valid template, as JSON object
 
bee.start(template);