Installation

  1. Welcome!
  2. About this documentation
  3. Create an application
  4. Production vs. development apps
  5. Manage users in the Console
  6. Add JavaScript Library
  7. Initialize the application

Welcome!

Welcome to the Beefree SDK technical documentation!

We’re thrilled that you’re interested in integrating our embeddable builders into your software. Beefree SDK is a versatile content creation platform that includes three distinct visual content builders, a file management UI, and a series of APIs that help you create engaging, delightful, productive content creation experiences for your customers.

The builders include an Email Builder, a Page Builder, and a 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. They can be easily integrated into your application in a matter of minutes.

In addition to our drag-and-drop editors, we also offer a standalone File Manager application, which can be used alongside any of the builders. The File Manager is specifically designed to simplify the organization and management of digital assets, which might happen outside of a content editing session.

Finally, the Content Services API allows you to perform a number of tasks (e.g. refreshing the HTML for a certain asset) and add features to your application (e.g. converting an email to a PDF document). We continue to release new API methods to help you enrich and personalize the content design experience for your customers.

Beefree Email Builder

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

Beefree Page Builder

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

Beefree Popup Builder

An easy to deploy, true WYSIWYG solution for designing standout popups.

Beefree File Manager

An image and document management UI that can be launched as a standalone application, in order to allow your customers to quickly upload or manage assets, without having to load one of the builders.

About this documentation

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 (and in many cases to the File Manger too), unless otherwise specified.

As you will gradually discover, Beefree SDK 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 Beefree’s visual builders in your software is to sign up for a Beefree SDK account. Once that’s done, you will be able to log into the Beefree SDK Console.  That’s where you will:

  • Create applications (e.g. an email builder and a landing page builder).
  • Create development apps for all sorts of dev, QA, or staging environments.
  • Configure them with 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 Console. This only takes a few moments.

For each application, we will also provide you with a Client ID and Client secret, which you will use for authentication when you initialize it.

BEE Plugin Development Portal - App details

Go ahead and create your first application in the Beefree SDK Console.

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.

Child application details

Manage users in the Console

You can invite additional users to your Beefree SDK Console. To do so, go to Manage users from the personal menu in the top right.

Go to the personal area in the top right of the screen

 

The user that initially created the account is identified as the account owner and can add users from this page.

Manage users screenshot

 

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 it. The first step is to add the Beefree SDK 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 application

Step 1. Create a container

The embedded application (email builder, page builder, popup builder, file manager) 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

Beefree 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 an application

Now that you have a token, you can initialize the application 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 application instance

Here is an example in plain JavaScript:




// Define a global variable to reference the application instance
// Tip: Later, you can call API methods on this instance, e.g. bee.load(template)
var bee;
 
// Define a simple Beefree application 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 embedded application 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 Beefree application. 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 the application

Step 4. Start the application

The final step is to start the application, using the start method.

  • If the application is one of the builders, do so by loading a template.
  • If the application is the File Manager, no parameters are needed.

Call the start method as follows:



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