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.

Add JavaScript Library

NPM

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

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:

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.

Authentication Code Samples

JSON Authorization Response

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:

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:

Overview

This article will cover steps for the following processes:

Sign up for account in the Developer Console

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.

10. Enter and confirm your billing address.

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

    You will be redirected your new Free plan subscription.

How to create an application

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

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.

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:

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

3. Click on the application's Details button.

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

5. Click Regenerate to generate a new Client Secret.

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

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