Installing the plugin

  1. Create an application
  2. Add JavaScript Library
  3. Initialize Editor

Create an application

To install BEE Plugin you’ll need to sign up for a FREE account. After you register, you may log into the Developer Portal.  We will ask you to provide some general information to register your application. It only takes a couple of minutes, and then we will provide you with a client ID and client secret. You’ll need this information later in this tutorial.

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 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 = "string"; // Any valid template
 
bee.start(template);