Add JavaScript Library

Congratulations on creating 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 our convenient NPM module to add it.

NPM

Use the command npm i @beefree.io/sdk to install the Beefree SDK library into your project.

npm i @beefree.io/sdk

Initialize the application

Take the steps outlined in this section to initialize your 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. This is why we use a standard JSON Web Token, or JWT, to authenticate your application.

To authenticate your application, pass your Client ID and Client Secret to our authorization service, and we’ll send your unique token back to you.

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

Authentication Code Samples

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if (req.readyState === 4 && req.status === 200) {
    // Obtain token
    var token = req.responseText;
    // Call create method and pass token and beeConfig to obtain an instance of BEE Plugin
    BeePlugin.create(token, beeConfig, function(beePluginInstance) {
	// Call start method of bee plugin instance
	beePluginInstance.start(template); // template is the json to be loaded in BEE
    });
  }
};

// This is a sample call to YOUR server side application that calls the loginV2 endpoint on BEE the side
req.open(
	'POST', 	// Method
	'/YOUR_BACKEND_TOKEN_ENDPOINT', // your server endpoint
	false 		// sync request
);

JSON Authorization Response

{
    "access_token": "...",
    "v2": true
}

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 SDK 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:

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);

Overview

Setting up two-factor authentication will keep your developer account extra secure. Two-factor authentication means that users will need to provide two different identifications to log in to their Beefree SDK Console: their regular login credentials, and a token generated by a two-factor authentication app.

When 2FA is set up, users will need to:

• download a two-factor authentication app to their mobile device (e.g. Authy, Google Authenticator, Authenticator Plus, and others);

• use their device and the app to generate a token and log in.

Setup for Account owners

If you’re an account owner (i.e. the user who created the Beefree SDK account), you may require all account users to use two-factor authentication to log in. To do so, go to the Setting & Security section in your personal area and enable Require two-factor authentication at login.

After saving the setting, you will be prompted to scan a QR code with a 2FA application to generate a security token to complete the setup.

When this setting is ON:

• every user will need to enter an authentication token, generated with a 2FA mobile app, to log into the account;

• when you create a new user, the 2FA toggle will be set to ON by default.

When adding or editing a user, you may also decide to turn on or off 2FA for that user, in order to:

• turn on 2FA, when 2FA is OFF at the account level;

• turn off 2FA, when 2FA is ON at the account level.

Setup for Account admins

If 2FA is OFF at the account level, additional users, i.e. admins, can turn on 2FA for themselves, for their peace of mind. They can go to the “Profile” section of their personal area and turn it on.

What is Beefree SDK?

Beefree SDK is a toolkit that offers a comprehensive set of features to enable your application's end users to achieve their design goals. Through embedding Beefree SDK into your application, you'll provide your end users with access to a full suite of design features that include the following and more:

• Email builder: A no-code interactive and guided experience that supports your end users in creating beautiful and stunning emails quickly.

• Page builder: A no-code intuitive experience that guides your end users through how to create visually stunning landing pages they can use to present information, embed forms, and capture critical data points to make data-driven decisions.

• Popup builder: A unique no-code experience that provides your end users with the fundamentals of creating popups that grab and maintain attention.

• File manager: A tool to manage media assets (images, PDFs, and so on).

• Template catalog: A catalog of design templates that integrate industry best practices to support end users in getting across the finish line with their creations fast, and achieving quick design wins.

• Custom AddOns: Expand your application's offering by developing your own Custom AddOns on top of our comprehensive suite of features.

• AI Writing Assistant: A helpful AI assistant to help end users write their design content.

These builders can easily integrate into your application in a matter of minutes. Browse the latest sample code, implementation guides, and other available features in this documentation.

Beefree SDK's Embeddable Builders

Learn more about our three embeddable builders.

File Manager

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. It is an image and document management user interface that can be launched as a standalone application. This allows your customers to quickly upload or manage assets, without having to load one of the builders.

Learn more about our File Manager and File Storage Options.

Customize Your Application with AddOns

Learn more about how our builder AddOns can help you customize your application's offerings.

Content Services API and Template Catalog API

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.

The Template Catalog API enables you to incorporate design templates into your application. With this API, you can browse, retrieve, and utilize a variety of pre-designed templates to enhance your user's content creation experience. It gives you the flexibility to offer customized design solutions directly within your platform.

Learn more about Content Services API and Template Catalog API.

Sample Code

Browse our sample code to experiment and gain hands-on experience. Get up and running quickly with a simple implementation.

Developer Essentials

Get your free Client ID and Client Secret in the Developer Console to get started. Experiment with customizing a configuration in the playground. When you're ready, install Beefree SDK.

About this documentation

These products share the same, unique combination of design flexibility and ease of use. Note that the majority of the documentation applies to all builders (and in many cases to the File Manger too), unless otherwise specified.

Development Applications

Development applications are available with any Beefree SDK paid plan.

What is a Development Application?

A development application is a child application that is linked to your parent application within the Beefree SDK console. The purpose of these child applications is to create development, QA, or any other type of applications that you can merge your application’s changes to prior to pushing them to production. This empowers you to test new features, even on a higher plan, within a controlled environment prior to releasing them to your application’s end users.

How to Create a Development Application

You can create a development application within your Beefree SDK console. Prior to creating a development application, ensure you have a paid plan with Beefree SDK. This will make the functionality accessible to you.

To create a development application, take the following steps:

1. Log in to your Beefree SDK Developer Console

1. Create a new application

1. Navigate to your dashboard where the new application is located

2. Click the + next to Add a development instance

1. Type in the name of your development application, for example “development environment” or “QA environment”

1. Click Create

2. View the new development application available in your Beefree SDK dashboard

Benefits of Development Applications

There are multiple benefits to utilizing development applications. A few of these benefits are the following:

• Merge and test changes to your application prior to releasing them to your end users

• Create an environment for different contributors in your development cycle, for example QA Engineers, frontend developers, backend developers, and so on

• Access next tier Beefree SDK features in your development applications without any additional costs

• Create as many child development applications linked to your parent production environment as you’d like

Important Considerations

While access to next tier Beefree SDK features in your development applications is available to you, it is important to remember that you cannot push any next tier features in your development application to your production environment. Your production environment should only include the features reflected in your current plan subscription. If you find that you would like to push a next tier feature from your development application to your production application, you need to upgrade to the subscription plan that corresponds to those features.

Beefree SDK allows you to access next tier features within your development application to test them out and see if they are a good fit for your application’s needs. However, it is important to consider that if you plan to push those features to your production environment, that you have the right subscription and permissions to do so.

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 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.

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.

Overview

Here is a list of terms used frequently throughout the Beefree SDK technical documentation. Things can get a bit tricky when embedding a software application within another software application, so this page is an attempt to create as much clarity as possible. We hope we find it useful. If anything sounds confusing or if you have any suggestions for improvement, please contact us.

Frequently used terms

• Beefree SDK A toolkit that includes white-label, no-code builders for emails, landing pages, and popups. The toolkit also provides a range of components, APIs, sample code, and support services to help you seamlessly integrate into your software a content creation workflow that your customers will love.

• Beefree SDK subscription A subscription to the Beefree SDK. There are different subscription plans, starting with a Free plan. Once you have a subscription, you can create one or more Beefree applications.

• Beefree application An instance of any of the no-code tools that can be embedded in your software. They include:

  • Email Builder

  • Page Builder

  • Popup Builder

  • File Manager

• Beefree SDK Console A multi-user administration panel where you can sign up for a Beefree SDK subscription, manage the subscription, and create and configure a Beefree application within a subscription.

• Production application An instance of a Beefree application used in your production environment.

• Development application An instance of a Beefree application used for development, QA or staging environments. You can create multiple, development applications under a production application.

• Host application Your software application, which will host one or more Beefree applications.

• Beefree system The backend system that interacts with your Beefree application to provide services such as application authorization.

• Content Services API A set of API methods in the Beefree system that allow you to perform a variety of tasks connected to the implementation of a content creation workflow.

Instance Methods

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

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

Instance Events

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

Authorization Process Overview

The Authorization Process is an important step throughout your Beefree SDK installation process. This steps validates your Beefree SDK credentials and provides you with a token. Take the steps outlined in this document to ensure you accurately complete the authorization process.

Beefree SDK Client-side Configuration

Beefree SDK requires the host application to pass a container parameter in the client-side configuration. This is the only required parameters for the configuration.

The following code sample shows an example of this parameter in the client-side configuration.

var config = {
    container: 'string'
}

Beefree SDK Server-side Login

To initialize your instance of the Beefree SDK builder, call the /loginV2 endpoint shown in the sample code below with your Client ID, Client Secret, and UID. The Client ID and Secret are available on the application details page of the Beefree SDK developer portal. UID represents your user as described in How the UID parameter works.

The Beefree SDK system uses OAuth2 as the authorization framework.

Example

POST /loginV2 HTTP/1.1
Host: auth.getbee.io
Accept: application/json
Content-Type: application/json
{
“client_id”: YOUR_CLIENT_ID,
“client_secret”: YOUR_CLIENT_SECRET,
“uid”: uid of choice
}

Reference How the UID parameter works to learn more about UID.

The following code sample displays an example JSON response.

{
    "access_token": "...",
    "v2": true
}

The Beefree SDK authorization service will return a temporary access token if the authentication is successful. The client application can use the full response that contains the token to start or refresh a Beefree SDK session.

The token you receive from the authorization server should be passed to the BeePlugin.create(...) as it is. We strongly suggest not altering it in any way. Also, don’t rely on the token response's content or structure. If you do, any change to the schema could make your integration stop working.

The token expires after 5 minutes for security reasons. Beefree SDK will refresh an expired token automatically for 12 hours without re-authenticating the application. Beefree SDK will trigger the onError callback when the token can't be refreshed automatically.

The following code sample displays an example of how to call the Beefree SDK endpoint, obtain a token, and then start it.

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if (req.readyState === 4 && req.status === 200) {
    // Obtain token
    var token = req.responseText;
    // Call create method and pass token and beeConfig to obtain an instance of Beefree SDK
    BeePlugin.create(token, beeConfig, function(beePluginInstance) {
	// Call start method of beefree SDK instance
	beePluginInstance.start(template); // template is the JSON to be loaded in BEE
    });
  }
};

// This is a sample call to YOUR server-side application that calls the loginV2 endpoint on BEE the side
req.open(
	'POST', 	// Method
	'/YOUR_BACKEND_TOKEN_ENDPOINT', // your server endpoint
	false 		// sync request
);

Ensure to call the authorization endpoint server-side to protect your credentials.

Once you obtain the token, the configuration parameters object is passed to Beefree SDK to set up your customization options, for example setting the editor’s language to “Spanish”.

Then, you can use Beefree SDK methods to start your instance and display the editor on your page.

Beefree SDK will keep this session alive for 12 hours from the login. After 12 hours, you have to manage the token expiration, as follows:

1. Obtain a new token via the new authorization endpoint.

2. Inject the token obtained from step one via the updateToken method. Reference examples of this in the following section.

The following code example shows how to inject the token in the current Beefree SDK instance:

// obtain a new token with a new LoginV2 call
// update the token in the current Beefree SDK instance
beePluginInstance.updateToken(token);

The following code example displays how to get the current JSON from the expiration error:

onError: function (error) {
  var code = error.code
  var detail = error.detail

  // the template the user was working on before the error occurred
  var currentJson = error.template
  ... 


  beePluginInstance.updateToken(token);
  // the beePluginInstance comes from the BeePlugin.create 
  ...

Error Management

When you set up an onError callback you will get the error object as a parameter.

From that object, you can grab the code property and use it as explained in the table below.

Handling error management

The following code samples display how to handle the 5101 and 5102 errors.

onError: function (error) {
 var code = error.code
 var detail = error.detail
 switch (code) {
   case 5101: // re-login and update token in the beeInstance
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
 if (req.readyState === 4 && req.status === 200) {
   // Obtain token
   var token = req.responseText;
   // Call update method and pass the new token existent BeePlugin instance
   BeePlugin.updateToken(token);
 }
};
req.open(
 'POST',  // Method
 '/token',  // The server side endpoint that calls BEE REST auth endpoint
 false   // sync request
);

     break
   case 5102: // re-login and create a new beeInstance
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
 if (req.readyState === 4 && req.status === 200) {
   // Obtain token
   var token = req.responseText;
   // Call update method and pass token and beeConfig to obtain an instance of BEE Plugin
   BeePlugin.create(token, beeConfig, function(beePluginInstance) {
     // Call start method of bee plugin instance
     beePluginInstance.start(template); // template is the json to be loaded in BEE
   });
 }
};
req.open(
 'POST',  // Method
 '/token',  // The server side endpoint that calls BEE REST auth endpoint
 false   // sync request
);
     break
 }
},

onError: function (error) {
 var code = error.code
 var detail = error.detail
 switch (code) {
   case 5101: // re-login and update token in the beeInstance
...
   case 5102: // re-login and create a new beeInstance
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
 if (req.readyState === 4 && req.status === 200) {
   // Obtain token
   var token = req.responseText;
   // Call update method and pass token and beeConfig to obtain an instance of BEE Plugin
   BeePlugin.create(token, beeConfig, function(beePluginInstance) {
     // Call start method of bee plugin instance
     beePluginInstance.start(detail.template); // the template the user was working on before the error occurred
   });
 }
};
req.open(
 'POST',  // Method
 '/token',  // The server side endpoint that calls BEE REST auth endpoint
 false   // sync request
);
     break
 }
},

Error Responses

Example error response for unsupported media type Only Content-Type: application/json is allowed.

{
  "code": 5001,
  "message": "Unsupported media type 'application/x-www-form-urlencoded'",
  "status_code": 415
}

Example error response for an invalid UID. Look at the properties of UID parameter.

{
  "code": 5005,
  "message": "Invalid UID",
  "status_code": 400
}

Example error response for invalid credentials. Obtain your credentials using the authorization process.

{
  "code": 5002,
  "message": "Unable to authenticate with provided credentials.",
  "status_code": 401
}

Example error response for disabled apps. Contact support if you encounter this error.

{
  "code": 5003,
  "message": "Application is disabled.",
  "status_code": 403
}

Passing Configurations to Beefree SDK

Once you have initialized your Beefree SDK application, you can pass a series of configuration parameters to it.

The following code displays an example of a default configuration:

var beeConfig = {
    uid: 'CmsUserName', // [mandatory]
    container: 'bee-plugin-container', // [mandatory]
    autosave: 30, // [optional, default:false]
    language: 'en-US', // [optional, default:'en-US']
    trackChanges: true, // [optional, default: false] 
    specialLinks: specialLinks, // [optional, default:[]] 
    mergeTags: mergeTags, // [optional, default:[]]
    mergeContents: mergeContents, // [optional, default:[]]
    preventClose: false, // [optional, default:false]
    editorFonts : {}, // [optional, default: see description]
    contentDialog : {}, // [optional, default: see description]
    defaultForm : {}, // [optional, default: {}]
    roleHash : "", // [optional, default: ""]
    rowDisplayConditions : {}, // [optional, default: {}]
    rowsConfiguration: {},
    workspace: { // [optional, default: {type : 'default'}]
        editSingleRow: false // [optional, default: false]},
    },
    commenting: false, // [optional, default: false]}
    commentingThreadPreview: true, // [optional, default: true]}
    commentingNotifications: true, // [optional, default: true]}
    disableLinkSanitize: true, // [optional, default: false]}
    loadingSpinnerDisableOnSave: false, // [optional, default: false]}
    loadingSpinnerDisableOnDialog: true, // [optional, default: false]}
    onSave: function(jsonFile, htmlFile) { /* Implements function for save */ }, // [optional]
    onChange: function(jsonFile, response) { /* Implements function for change */ }, // [optional]
    onSaveAsTemplate: function(jsonFile) { /* Implements function for save as template (only JSON file) */ }, // [optional]
    onAutoSave: function(jsonFile) { /* Implements function for auto save */ }, // [optional]
    onSend: function(htmlFile) { /* Implements function to send the message */ }, // [optional]
    onLoad: function(jsonFile) { /* Implements function to perform an action once the template is loaded */}, // [optional]
    onError: function(errorMessage) { /* Implements function to handle error messages */ }, // [optional]
    onWarning: function(alertMessage) { /* Implements function to handle error messages */ }, // [optional]
    translations: {
        'bee-common-widget-bar': {
            content: 'MODULES',
        },
        // additional translations...
    },
    // other properties...
};

Parameters

The following table provides a list of the required parameters.

Language Parameter

The following table provides a list of the language options for the language parameter. The language parameter is not required and has a default value of en-US.

Available Languages

Parameters

The following table provides a list of the optional parameters and their corresponding descriptions.

Overview

When you load a Beefree application inside the host application, you pass a configuration object with multiple sections that define the characteristics of the UI, UX, and available elements. However, there are cases when you may want to reload this configuration without the need to reload the Beefree application. In these cases, you can use a specific event to update the configuration while the editor is open.

Use cases

With this event, you can make on-the-fly changes to the user experience. For example:

• Updating available categories for Saved rows

• Refreshing a Custom header for authorization

• Changing Advanced permissions for the current user

• Updating settings for the editor’s Content defaults

How it works

You can load the configuration changes via a new instance event. Here’s an example:

var newConfig = {
  advancedPermissions: {
    // new permissions
  }
}

bee.loadConfig(newConfig)

Manage Subscriptions in the Console

We understand that each company has its own unique needs. For that reason, we offer the flexibility of adding multiple Beefree SDK subscriptions within the Developer Console. Through this option, you can take advantage of multiple subscriptions to our product for your teams, business units, and so on.

How to Add a New Subscription

You can create an additional subscription within the Beefree SDK Developer Console.

To achieve this, take the following steps:

1. Log in to the Beefree SDK Developer Console

2. Navigate to your dashboard

3. Click Add new subscription on the upper right-hand side of the screen

4. Type a name for your next subscription and click Next

5. Choose a plan and click Select plan

6. Confirm the plan you selected

7. Finalize your additional subscription

Overview

In user interfaces, a workspace is a parameter that changes the appearance, settings, and widgets available in an builder, to help the user to focus on what matters.

In Beefree SDK, workspaces are an optional parameter that can be used to provide an experience focused on context and purpose, and to facilitate the outcome of an editing session.

You can load the builder with a certain workspace, but workspaces can also be changed by the user when editing, on-the-fly.

Switching between workspaces might change:

• content visibility on the stage

• tiles availability in the content tab

• available previews

• outputs when saving a content

• …and more!

Available workspaces

If no workspace is loaded at launch, the builder starts in its “Default” workspace.

We currently offer 3 additional workspaces, and we are planning to launch more as we evolve BEE and its capabilities.

These 3 workspaces revolve around the use of AMP content, and are provided so that you can tailor the experience of creating AMP emails in Beefree SDK.

Here is an overview of the different workspaces and their differences. Please refer to this page for more information on using AMP in Beefree SDK.

Starting the builder with a workspace

Here is an example of loading Beefree SDK with a “mixed” workspace:

type ClientConfig = {
  workspace?: {
    type:'default'|'mixed'|'amp_only'|'html_only'
  }
  // ....
}

const beeConfig: ClientConfig = {
  workspace:{
    type:'mixed'
  }
  // ....
}


//Create the instance 
function BeePlugin.create(token, beeConfig, (beePluginInstance) => { 
  //.... 
}

Switching workspaces

You can implement a workspace selector within your application, so that users can switch between workspaces, by using the loadWorkspace(type) method.

First, you need to define template files for the workspaces you want to propose, as JSONs:

{
  "type":"mixed"
}

Then, you can load those workspaces at runtime:

type Workspace = 'default'|'mixed'|'amp_only'|'html_only'

const req = url => fetch(url).then(r => r.json())
const loadWorkspace = async (workspace:Workspace) => {
  const { type } = await req(`https://example.com/workspaces/${workspace}.json`)
  beePluginInstance.loadWorkspace(type) 
}

And here is how to create a simple select to switch workspace:

<select id="workspace" onchange="loadWorkspace(this.value)">
<option selected="selected" value="">WORKSPACE</option>
<option value="default">DEFAULT</option>
<option value="mixed">MIXED</option>
<option value="amp_only">AMP_ONLY</option>
<option value="html_only">HTML_ONLY</option>
</select>

Workspace callbacks

After you load a workspace, the application will trigger one of these three callbacks:

Success

//SUCCESS 
onLoadWorkspace: function (workspace) {
  console.log(`workspace: ${workspace} has been loaded`);
},

Failure

//FAILURE
onError: function (error) {
 console.error('error: ', error);
},

Invalid workspace

{
 code: 1400, 
 name: "Invalid workspace type",
 message: "RANDOM : is not a valid workspace",
 details: "Available workspaces are: [ default,mixed,amp_only,html_only ]"
}

Use cases

The additional workspaces for AMP (AMP-only and HTML-only) can become helpful if you want to tailor the user experience of creating AMP emails, by adding:

• a workflow where users decides if they want to create a standard message or an AMP-powered message (in the first case, AMP components will be hidden in the builder;

• an option to switch between the HTML and the AMP editing of a message.

In addition, omitting the workspace, or loading the “default” workspace for certain users, has the effect of disabling AMP for those users, even when AMP content is enabled in the Beefree SDK Console. This way, you can decide to make the feature available to customers of your application:

• depending on the subscription plan that they are on (i.e. you could push users to a higher plan based on the ability to use AMP);

• depending on the purchase of an optional feature (same);

• only if they are “beta” customers, so they see it while keeping it hidden from the rest of your users.

Overview

In this article, we will discuss how to sign up for an account in the Beefree SDK Developer Console, create an application, and obtain your Client ID and Client Secret.

This article will cover steps for the following processes:

• Sign up for an account in the Developer Console

• How to create an application

• Obtain your client secret and client id

Sign up for account in the Developer Console

The first step to embedding Beefree’s visual builders in your software is to sign up for a Beefree SDK account.

Take the following steps to sign up for a Beefree SDK account and subscribe to the Free plan:

1. Navigate to the Developer Console Sign Up page.

   Note: If you already have an account, navigate to the Developer Console Login page instead.

2. Complete the required information to sign up or login.

   You will be redirected to the dashboard.

3. In the dashboard, click Add new subscription.

   You will be redirected to a page that asks you to provide a name for your new subscription.

4. Type in a name and click Next.

   You will be redirected to a page that asks you to select a subscription plan. If you'd like to subscribe to the Free version, click on the corresponding Select plan button Free plan type. If you'd like to subscribe to a paid plan, select the paid option that works best for your needs.

5. A confirmation message will appear confirming that you selected the Free plan and that you will not be charged anything. Click Confirm to confirm your subscription the the free plan.
6. While the plan is free, ensure that you familiarize yourself with the scenarios in which charges would apply. The following image shows a plan summary displaying instances of when charges apply.

1. Enter and confirm your billing address.

2. Enter and confirm your card information by clicking Place Order.

   You will be redirected your new Free plan subscription.

How to create an application

Once that’s done, you will be able to log into the Beefree SDK Console. Your dashboard will look like the following image.

You will have the option to activate any or all of the following applications:

• Email Builder Application

• Page Builder Application

• Popup Builder Application

• File manager Application

Take the following steps to create an application:

1. Click the Activate button that corresponds with the application you'd like to create.

2. Type in a name for your new application.

3. Click Create.

Your application will look like the following in the dashboard once it is activated:

You have successfully created an application. Now, you can enter the application Details and obtain your Client ID and Client Secret.

Obtain your Client ID and Client Secret

Click on your application's Details button to view your Client ID and Client Secret. Use these to authenticate when you initialize it.

With your Client ID and Client Secret, you can use our Sample Code to experiment with a simple integration of Beefree SDK. You can also get started with your own implementation of Beefree SDK.

Reference the following related topics to learn more about customizing your applications, creating development instances, and referencing sample code.

Regenerate Client Secrets

Inside the Beefree Developer Console, you have the option to regenerate the Client Secret for your application. To regenerate your application's Client Secret, take the following steps:

1. Log in to the Beefree SDK Console.

2. Navigate to the application you'd like to update the Client Secret for.

3. Click on the application's Details button.

1. Navigate to Application keys within the application's details.

2. Click Regenerate to generate a new Client Secret.

1. You will be prompted to a modal and asked to confirm your application's name.

2. Complete the App Name field and click Regenerate to complete the action.

Your new Client Secret is now available and ready to use. Your old Client Secret will expire 24 hours after creating the new one. Ensure you replace it in all the necessary environments prior to its expiration.

• Create development applications

• Configuration parameters

• Server-side options

• Sample code

Pricing for Beefree SDK is based on the concept of unique users of the editor. A unique user is one that is identified by a unique UID, as described below. The system counts unique UIDs within a billing period, and resets the count to zero at the start of the next billing period.

Properties

The UID parameter:

• Is an alphanumeric string passed to Beefree SDK throughout the server-side authorization process.

• Has a minimum length of 3 characters.

• Can contain letters from a to z (uppercase or lowercase), numbers and the special characters “_” (underscore) and “-” (dash).

• Make sure that you pass a string, not a numeric value. So even if your UID is a number, pass "12345" and not 12345.

• The UID should not be Personal Data, as indicated in the Beefree SDK License Agreement. Further information about how your use of a Beefree SDK service relates to the EU’s General Data Protection Regulation (GDPR) may be found here. Our Privacy Policy, which describes the processing activities carried out by Beefree SDK as Data Controller, is available here.

Unique identifier

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

1. It will be counted as a unique user for monthly billing purposes.

2. 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).

Users, sub-users and client accounts

It’s entirely up to you – the application that has embedded BEE – when to use a new UID at the time you initialize the editor for your users. In 99% of the cases: one UID = one CLIENT ACCOUNT in your application. Sub-users of a client account typically share the same UID.

A quick example to help you visualize this.

• We use the UID in the File Manager to identify where images will be stored

• You typically don’t want client ABC to see client XYZ’s images

• So you will use a certain UID for client ABC and another UID for client XYZ

• If there are 5 users within client ABC account in your application, however, it’s OK that they see the same images, since they are likely collaborating on the same emails or landing pages, so you don’t need to use a different UID: all 5 will share the same UID.