Installing the Plugin
- Welcome!
- Create an application
- Production vs. development apps
- Manage users in your developer account
- Add JavaScript Library
- Initialize the editor
Welcome!
Welcome to the BEE Plugin documentation! We’re thrilled that you’re interested in integrating our builders into your application and providing your customers with a seamless and beautiful content creation experience.
BEE Plugin is a versatile content creation platform that offers three distinct visual content builders, which can be easily integrated into your application in a matter of minutes. These builders include the Email Builder, the Page Builder, and the Popup Builder. Each of these builders is designed to meet specific content creation needs, allowing you to offer a tailored content creation experience to your customers.
In addition to the builders, we also offer a standalone File Manager application, which can be used alongside any or all of your builder implementations. This File Manager application is specifically designed to simplify the organization and management digital assets.

BEE Email Builder
An email editor that makes building gorgeous, mobile-ready emails a breeze.

BEE Page Builder
A delightful tool to design beautiful, effective landing pages in minutes, without writing a single line of code.

BEE Popup Builder
An easy to deploy, true WYSIWYG solution for designing standout popups.
These products share the same, unique combination of design flexibility and ease of use. Please note that all of the documentation in this site applies to all builders, unless otherwise specified.
As you will gradually discover, BEE Plugin also offers great liberty in how you can integrate it with your application, and we are here to support you along the way. 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.
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. If you’re on a paid plan, 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 production app is on. If you wish to test features that are available on a higher plan, go the application details and click “CHANGE PLAN” in the upper right.
Manage users in your developer account
You can invite users to your developer account, in case you need other people to assist you with the integration of BEE Plugin. To do so, go to Manage users from the personal menu in the top right.
The user that initially created the account is identified as the account owner and can add users from this page.
Additional users will be identified as admins. The owner may limit access to certain production apps when creating or editing an admin.
The account owner has these additional privileges, compared to admins:
- add, edit or delete users, as described above;
- turn on two-factor authentication, using tokens provided by mobile apps like Google Authenticator or Authy. 2FA can be enabled either for specific users, or account-wide from the Settings & Security section in the personal area (learn how to set up 2FA for your account);
- change the company’s name, also in Settings & Security.
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).
It uniquely identifies a user of the Plugin. When we say “uniquely”, we mean that:
|
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);
bee.start(template)
does not need to be called immediately after create
. In a SPA (Single Page Application) or React app, you can create
the editor in a hidden global state but then call the start method when the template is selected and available. BEE Plugin loads quickly when all steps are completed consecutively. However, by separating the loading workflow into two parts, the end-user will perceive loading in a fraction of the overall time.
If a client_id belongs to a File Manager application, bee.start() can be called without any parameters.