Overview of Form Block

The Form Block within Beefree SDK allows you to easily create and integrate customizable forms into your application. This feature is particularly useful for capturing user information, feedback, and other data directly through interactive forms. With various pre-built templates and customization options, the Form Block is easy to integrate for developers and intuitive to use for end users.

Integrating the Form Block into page or popup builders is straightforward. The SDK provides intuitive methods to embed forms within your web pages or popups. With drag-and-drop functionality and predefined settings, adding a form to a design can be accomplished in just a few steps, enhancing workflow efficiency for your application's end users.

The Form Block supports a wide range of input types, such as text fields, radio buttons, checkboxes, and dropdown menus. This flexibility ensures that end users can gather the exact type of information they need from the form. Additionally, form submissions can be easily configured to trigger actions, such as email notifications or data storage, providing a robust and integrated data collection solution.

Learn more about to use and integrate Form Block in the following section:

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

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

Building web pages with Beefree SDK

Beefree SDK Page Builder will help your customers create beautiful, responsive landing pages, complete with forms and embedded videos. Combined with our Email Builder, you’ll have the power to deliver to your customers a single, optimized user experience for designing both emails and web pages.

With the Page Builder, your customers can create landing pages and one page sites with

In addition, you will find exclusive features that make sense for web pages, such as forms, embedded videos, and the ability to paste scripts, like an embeddable SurveyMonkey or Typeform survey.

Here are a few examples of web pages your customers can build with:

• Product showcase or teaser

• Disclaimer (e.g. age verification)

• Registration (e.g. events, gated content)

• Newsletter subscription

• Customer survey

• Booking request

• Portfolio

They can also create fantastic one page websites, i.e. sites where all the content usually spread in different pages fits nicely into an easy-to-scroll page, complete with menu and anchors to navigate it.

We are constantly improving the user experience: we see the Page Builder as a long-term, ongoing project at Beefree SDK.

MIME types are a standardized way to indicate the nature and format of a file, specifying what kind of data it contains. Groups are categories that aggregate these MIME types for simplified handling and management in applications like File manager. This organization allows for custom limitations and processing based on file type.

The following list shows which specific mime types are mapped to our group names for custom limitations on File manager.

Additional Considerations

When working with files, mime types and groups, ensure you consider the following:

• The default maximum file size you can upload is 20MB.

• If you upload an image wider than 1920 pixels, when the image is uploaded or imported, it will be resized to fit within 1920px. This may cause issues with the image's appearance, including colors that change and GIFs that lose frames. Ensure your images are no wider than 1920px to avoid these issues.

Learn more about .

Custom JavaScript

Enterprise customers can request to inject external JavaScript libraries, like FullStory or Heap, into Beefree SDK when the integration is initialized as part of the .

Custom JavaScript requires a complete technical evaluation by the Beefree SDK development team. The assessment will undergo security, technical and compatibility assessments.

How it Works

Contact our Sales team and ask to run a script to get started with custom JS libraries injection. Once you contact us, we will take the following steps to complete your request:

1. Our representative will forward your request to our development team

2. The development team will review the script and approve it

3. The script is enabled by our development team

Overview

You can choose whether to display the builder sidebar on the left or on the right side of the screen.

Available positions:

• left

• right

Here is the same sample application, with the same template and same content element selected, and the sidebar displayed on the left…

… and on the right.

The configuration document needs the following, new parameter:

Overview

The default Beefree SDK theme is grayscale and generally can be used with any color scheme. In v3, you can now choose between a dark and light theme for the loading animation, so it can better fit the host application’s UI. If you would like to change the loading icon and/or have more granular control of the loading theme, please view our article about .

Sample Configuration

Available themes:

• light

• dark

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)

Setting the default tab

The default tab configuration option lets the host application decide which content should be visible first in the sidebar when the editor is loaded.

In Beefree SDK v2, the default tab is the Content tab and this behavior could not be changed. It’s still the behavior that we recommend for most scenarios.

However, apps that rely heavily on pre-built custom rows, or saved row libraries, may now choose to highlight the Rows tab, using the following configuration options.

Available Options:

• content

• rows

• settings

var beeConfig = {
        uid: config.uid,
        defaultTab: 'content',
        ...  

Changing the tab order

Building upon the default tab configuration option, in Beefree SDK v3 you may also re-organize the way tabs are ordered.

var beeConfig = {
        uid: config.uid,
        defaultTabsOrder: ['content', 'settings', 'rows'],
        ...  

Introduction

Partner AddOns can easily be integrated with your application in a matter of minutes by installing them inside of the Developer Console. You can reference available Partner AddOns inside of the Partner AddOn Directory. If the AddOn with the functionality you are looking for is not offered within the Partner Directory, you also have the option to create your own Custom AddOn. If you'd like to add your Custom AddOn to Partner AddOn Marketplace within the Beefree SDK Developer Console, you have the option to do that.

Throughout this page, we will discuss at a high-level how you can list the Custom AddOn you created as a Partner AddOns within the Partner AddOn Marketplace.

Getting started

To get started, you will need to follow the AddOn Development documentation and create a Custom AddOn for a web application that has embedded Beefree SDK.

Please note that because Partner AddOns by definition live outside of the Beefree SDK application that will use them, you must select the external iframe method for development.

Listing in the partner directory

You can submit your AddOn to be listed in the Beefree SDK Partner AddOn Directory, so that other applications that have embedded Beefree SDK can take advantage of it.

You will be completely in charge of the business relationship with those companies, who will become your customers. We are not part of that relationship, other than being an enabler of it.

The following is a list of requirements for getting an AddOn listed in the Partner AddOn Directory:

1. You have signed the Beefree SDK AddOn License and Distribution Agreement. Contact your Account Manager or log in to the Beefree SDK Console and submit a ticket for details.

2. You have built an AddOn that:

   1. Uses the External iFrame Method (see AddOn Development)

   2. Uses the optional health check endpoint

3. You have thoroughly tested the AddOn before submitting it to our test for a final review.

4. You have a demo of the AddOn that we can access.

When you have completed all of the above, contact your Account Manager or log in to the Developer Portal and submit a ticket to complete the review and approval process.

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.

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.

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.

Integrating and Testing the Page Builder

When you create an application in the Beefree SDK Console, you’ll be asked to select either Page or Email Builder. Paid applications allow you to create child development applications, to ease new feature testing, development, and maintenance.

Page and Email builders share the same core functionalities, including authentication and configuration. If you already integrated our Email builder, you can re-use most of your work by using the same configuration and callbacks. If this is your first approach to our builders, just follow the Installation section in our documentation. All the documentation in this site applies to both products, except where noted.

All builders are available to Beefree SDK customers under the same all-in-one pricing. Please contact your Customer Success Manager for more details.

The experience

We aim to provide the foundations needed to build a delightful page building experience. We started with the basic features that are already provided to design awesome email messages and tweaked them to work for Web pages.

Once launched as Page Builder, an application will have a few but noticeable differences from the Email builder experience:

• width for pages can be expanded up to 1440px;

• the stage can be scrolled horizontally;

• the sidebar can be collapsed to provide more workspace – useful when working with larger widths;

• there’s a new 6-columns row layout, to take advantage of larger widths;

• the preview includes viewport resize, to test responsiveness on various screen sizes;

• the HTML block allows using scripts, for improved compatibility with embedded content like surveys. This also includes Javascript, although it cannot be executed within the builder.

If you’re on a paid plan, you will also get support for forms and embedded videos.

• You can define and pass forms to the builder, and use the form content block to retrieve and style those forms.

• You can use the video content block to embed and playback videos hosted on Youtube and Vimeo, or point to a hosted video in MP4 format.

Additional resources

Managing forms with the Page Builder

A quick primer on how to include forms in a web page.

Developer resources on GitHub

Our Github account hosts useful resources, including sample code to quick start your integrations.

Creating an application

When you log into the Beefree SDK Console you can immediately see what type of applications you have already created under your Beefree SDK subscriptions. To create a Popup application, head over to the Popup Builder Application section and click on Activate.

Once created, head over to “Details” for all server-side configurations. Paid applications allow you to create child development applications, to ease new feature testing, development, and maintenance.

All builders share the same core functionalities, including authentication and configuration. If you have already integrated our Email builder, you can re-use most of your work using the same configuration and callbacks.

Integrating the Popup Builder

Out-of-the-box, the setup and configuration are the same as Email and Page Builder. This section will cover the settings specific to Popup Builder. Check out our Getting Started guide if you’re new to Beefree SDK or unfamiliar with the configuration basics (as seen in the example below).

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  ...
}

Loading Popup Builder with no additional settings will give the end-user a beautifully designed popup and workspace to design their content. However, Popup Builder comes with an additional, robust set of configuration options to customize the workspace. This allows the host application to build a workspace that matches their popup’s look and feel and that of the destination page.

For example, the host app can customize…

• The popup workspace background to view how the popup will look “in context” on the destination page.

• The theme and position of the popup for both desktop and mobile design modes.

Continue reading to learn more on how to customize the workspace, starting with the common settings and working up to a full custom layout.

HTML output

In Email and Page Builder, the Beefree SDK HTML parser service converts your template into an HTML document customized for email or pages, respectively. However, the Popup Builder will not return a full HTML page because the host application is the final destination. In addition, Beefree SDK Popup Builder doesn’t provide the scripts to control the popup’s behavior, such as opening and closing. Rather, Popup Builder provides the HTML “partials” to embed within your popup’s content area or body.

The HTML partial will come with all the CSS required to look as it did in the preview mode. The parser service will wrap the content with a special container to clear all the host application styles and prevent style conflicts. The HTML output is designed to be embedded into any popup framework or application and still render the way it appears in the builder.

Developer resources

Our Github account has some resources that might help you out when testing and integrating the Popup Builder.

Sample code

Examples of different implementations and configurations that you can draw from to speed up your development.

Popup templates

A collection of ready-made templates that you can use right away and add to your application.

Overview

Besides the client-side configuration parameters that you can set for your instance of Beefree SDK, you also can specify some server-side configuration options.

Access Server-side Configurations

To access server-side configurations, log into your Beefree SDK Console and select the application that you wish to configure.

In the application’s details page, locate the area called Application configuration.

Manage roles is used to manage user roles. For details on this feature, see “user roles and permissions“.

Click on Open configuration to manage the server-side settings like:

• Toolbar options: affect the UI of the editor

• Storage options: determine where the File Manager will store & retrieve images

• Content options: define whether certain content elements (e.g. HTML block) are active or inactive

• Service options: define whether additional services (e.g. photo search) are active or inactive

Learn more about how to get started with the Content Services API in the following sections:

Beefree SDK includes Partner AddOns and Custom AddOns that you can incorporate into your application. At a high-level, these AddOns enable you to add extended functionality and capabilities to your application. These extended functionalities empower you to customize your end users' experience based on their interests and the desired tasks they are trying to perform with your app. The AddOns work as additional features you can opt in for on top of the base features that come with your Beefree SDK plan type.

There are two types of AddOns: Partner AddOns and Custom AddOns. Partner AddOns can easily be integrated with your application in a matter of minutes by installing them inside of the Developer Console. They are available for the following Beefree SDK plan types:

• Essentials

• Core

• Superpowers

• Enterprise

Custom AddOns are useful when there is a feature you'd like to offer within your application that is not available in our AddOn Marketplace within the Developer Console. In these instances, you can develop your own Custom AddOns for your application's end users. They are available for the following Beefree SDK plan types:

• Superpowers

• Enterprise

Overview

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

This article will cover steps for the following processes:

Sign up for account in the Developer Console

The first step to embedding Beefree’s visual builders in your software is to.

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

1. Navigate to the .

   Note: If you already have an account, navigate to the .

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 . Your dashboard will look like the following image.

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.

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

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 .

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

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 .

• 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 . Our Privacy Policy, which describes the processing activities carried out by Beefree SDK as Data Controller, is available .

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 .

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.

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 .

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 , 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 in the Beefree system that allow you to perform a variety of tasks connected to the implementation of a content creation workflow.

The Page Builder includes an expanded Video content block for optimized usage of videos on web pages. Videos are added inside an iframe via the HTML5 video tag.

There are multiple ways to add a video to a page built with Beefree SDK. Additional settings allow the video progress bar and loop playback to be turned on or off.

Embedded

The Embedded mode allows video playback inside the page. It requires the URL of a video hosted on YouTube, YouTube Shorts, or Vimeo.

Hosted video

Same as the embedded option, but the URL provided must point to a self-hosted video in MP4 format. Settings for hiding controls and loop playback apply as well. Please note that the player interface your visitors will experience might slightly vary based on the browser they use.

Thumbnail

As a fallback, you may also use the video block for generating a thumbnail, the same way the block works when building emails. Just enter the URL for a video hosted on YouTube, YouTube Shorts, or Vimeo. A thumbnail linked to the video will be created. You may also style the overlay play icon.

Supported Video Sources

• YouTube (16:9 aspect ratio)

  • Public Videos

  • Unlisted Videos

  • Videos starting at a certain time

• YouTube Shorts (16:9 aspect ratio)

• Vimeo

  • Public Videos

  • Unlisted Videos

  • Cinemascope (21:9 aspect ratio)

Advanced options are available with Beefree SDK. Learn more about the advanced options you can integrate within your web application. Beefree SDK's advanced options include the following capabilities.

Beefree SDK enables you to customize the appearance of a variety of elements. Reference the following sections to learn more about how you can customize appearance:

Re-ordering Content Tiles

The Content Tile Sorting option allows the host application to change the order of the content tiles in the editor’s sidebar. This allows the host application to display the content blocks that are most important for their users first, and even provide additional visibility for a Custom Addon.

To use this feature, the host application must simply pass in the preferred order inside the configuration passed at initialization, like so:

The host application can pass as many or as few content blocks as they want. If only one content tile is specified, then only that content tile will be placed at the top, and the rest of the content tiles will follow the default order.

For Custom/Partner AddOns, the host application passes the “Content Title” value found in the Addon section of the Beefree SDK Console Application Configuration.

Full List of Content Tiles

Defining a custom look & feel through a CSS stylesheet

To define a custom look and feel through a CSS stylesheet, assign the URL of your CSS file to the customCss property in your JavaScript code, as shown in the following example.

customCss: 'https://yourdomain.com/stylesheet.css'

Using different values for different users of the builder

You can customize the builder's CSS for different users by dynamically setting the customCss property with a unique CSS file URL for each user. Simply concatenate the user-specific identifier to the base URL as shown in the example code.

customCss: 'https://yourdomain.com/' + users[config.user].id + '.css'

Best practices and risk management

Custom CSS is an advanced feature, which gives the host application great flexibility to customize the UI/UX of the builder. Please use this feature with caution. If you're looking to hide certain UI elements, we recommend you first check if that can be accomplished with Advanced Permissions, as it may be easier to implement.

When used properly, it is a powerful tool that can be leveraged to accomplish anything from applying custom styles with fine granularity to changing icons.

When misused, however, it may harm the user experience and the rendering capability of the builder’s stage. For example, styles applied to the stage via CSS will not be reflected in the preview or exported HTML.

Sample Custom CSS Theme

Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.

https://gist.github.com/44daee53546a9f48ecad7f52784efa55.git

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.

A prototype in 2 minutes

Using this simple, client-side example, you can literally try out Beefree SDK in 2 minutes…

1. Obtain your application keys (Client ID and Client Secret) by signing up here (there is a free plan).

2. Create a new application: you will find your keys in the project’s details page

3. Download the client-side sample code.

4. Open index.html with your favorite code editor

5. Locate client_id and replace “YOUR_CLIENT_ID” with yours

6. Locate client_secret and replace “YOUR_CLIENT_SECRET” with yours

7. Save the file

8. Open it in your browser and get creative

Embedding the builder

Before using the code samples listed below in a production environment, please consider the following:

1. Make sure you first sign up and get your application keys (Client ID and Client Secret).

2. The client-side sample is not safe for a production environment (it was conceived as a quick way for you to test the application). Someone would be able to easily steal your application credentials (just viewing the source code of the page). To keep those credentials safe, authorization must be managed sever-side, as the .NET sample does.

3. These code samples use a limited set of features and configurations: they can be a good starting point to start developing around Beefree SDK, but they are not an exhaustive showcase of everything you can do.

4. All sample code is provided “as is”: it may contain defects, it may not follow best practices (although we try to!), and it should only be considered as point of reference.

GitHub Repositories

Overview

Your users will have the ability to rewind and fast-forward to any point in their recent edit history. Once Undo is enabled in the Beefree SDK Console, the application immediately begins tracking changes. Behind the scenes, this is accomplished via a new callback event – called onChange – which can also be used “stand-alone” without enabling Undo. No client-side configuration is required to use this feature. Continue reading to learn how to activate and use Undo. And if you can’t wait to try it yourself, you can immediately do so at beefree.io

How it works

When changes are detected, a compact Undo widget displays in the bottom left corner of the stage:

The widget displays 3 actions:

• Undo and Redo arrows that offer the classic pattern to move back and forth between changes.

• A history icon that expands a timeline of the latest changes:

Timeline

The timeline allows the user to browse through the most recent changes.

All the steps display:

• An icon to identify the content element type (an image, text, etc.)

• A description of what changed, giving the new property value (if any)

• The exact time it happened

All these details provide enough information for users to understand what modification was applied, and, if desired, rewind the message to that state:

When the user selects a previous step, the content or row that triggered the history record displays as the selected item, providing further context.

The timeline for more recent changes is still available, allowing the user to move forward without losing any changes:

The Undo widget currently displays the last 15 edits in the timeline, but users can always rewind to the Message opened state to undo all changes since the message was initially opened in the builder.

We are also doing additional testing to see if the number of recent edits can be increased beyond 15 without negatively impacting the browser’s performance. We will update this section if the number is increased.

The last saved edits are only available at the session level, so they reset every time the builder is loaded. If you need to provide a complete message history, you can build a custom one based on the onSave and onChange events (see below).

Activating the Widget

The Undo option is available at the application level in the Beefree SDK Console. Select your application from the list and open the Application configuration in the bottom-right. The option to enable this widget is available in the Services list:

The widget uses the onChange callback information to work. However, it doesn’t need a client-side configuration for the callback: once Undo is enabled, the application starts tracking changes even if the trackChanges parameter is not set in beeConfig.

Grouping Content Tiles

The Content Tile Grouping option allows the host application to group content tiles in the editor’s sidebar. This allows the host application to display the content blocks into distinct groups.

Content Tile Grouping supports:

• Text labels

• Special Characters

• Emojis

To display custom groups, the application must pass the groups settings in the configuration at initialization, like so:

modulesGroups: [
  {
    label: "Text ✏️",
    collapsable: false,
    collapsedOnLoad: false,
    modulesNames: [
      "List",
      "Paragraph",
      "Heading"
    ]
  },
  {
    label: "Media",
    collapsable: true,
    collapsedOnLoad: false,
    modulesNames: [
      "Video",
      "Image"
    ]
  },
  {
    label: "AddOns",
    collapsable: true,
    collapsedOnLoad: true,
    modulesNames: [
      "Stickers",
      "Gifs"
    ]
  }
]

Custom groups can be collapsed and opened by default by changing the collapsable and collapsedOnLoad values. Ungrouped tiles will be gathered at the bottom of the list under a group with no label.

Duplicated tiles are not allowed, e.g., you can’t have a tile twice in the sidebar. An onWarning notification is triggered whenever an unknown tile is added to the configuration.

Full List of Content Tiles

1. Heading (Title)
2. Paragraph
3. List
4. Image
5. Button
6. Divider
7. Spacer
8. Social
9. DynamicContent
10. Html
11. Video
12. Form
13. Icons
14. Menu
15. Carousel
16. Text
17. ---- AddOns ----

If you want to organize or include AddOns, and Custom AddOns under a custom group, mention the name used in the Beefree SDK Console.

Please note, the AddOn needs to be enabled to appear in the sidebar.

What are Partner AddOns?

Partner AddOns can easily be integrated with your application in a matter of minutes by installing them inside of the Developer Console. You can reference available Partner AddOns inside of the Partner AddOn Directory. If the AddOn with the functionality you are looking for is not offered within the Partner Directory, you also have the option to create your own Custom AddOn.

At a high-level, these AddOns enable you to add extended functionality and capabilities to your application. These extended functionalities empower you to customize your end users' experience based on their interests and the desired tasks they are trying to perform with your app. The AddOns work as additional features you can opt in for on top of the base features that come with your Beefree SDK plan type.

Where can I find the Partner AddOns Marketplace?

You can find the Partner AddOns Marketplace within the Beefree SDK Developer Console.

Take the following steps to access the Partner AddOns Marketplace:

1. Log in to your Developer Console.

2. Navigate to the application you'd like to add a Partner AddOn to.

3. Click on the Details button.

4. Navigate to AddOns and click View more.

   You'll be redirected to the AddOns page.

5. Click on the Browse AddOns button.

6. You'll be redirected to the Marketplace with the available AddOns.

How soon is the functionality available to my end users?

Once you successfully install a Partner AddOn following the steps outlined in Installing Partner AddOns, it will be available to your application's end users. Depending on the AddOn, you may or may not apply configuration settings to manage the functionality of the AddOn. For example, you may want to apply configurations to AI-related AddOns to control tokens and associated costs.

Add JavaScript Library

Congratulations on ! Now it’s time to install it. The first step is to add the Beefree SDK library to your application. You can use our to add it.

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.

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

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:

The following table shows all of the required :

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

A Release Candidate (RC) Environment is a crucial part of the deployment workflow designed to provide Enterprise customers with additional stability and assurance before a feature reaches full production. Unlike standard releases, which immediately roll out updates to all users, the RC environment acts as an intermediate step. It allows selected customers to access a production-ready version of the latest code before it becomes available to the wider user base. This controlled rollout process mitigates risks associated with unforeseen bugs and ensures a smoother transition. It also mitigates the risk of regressions and rollbacks. By implementing an RC environment, Beefree SDK enables Enterprise customers to conduct their own QA testing on new features, reducing potential disruptions when updates go live.

Benefits of the Release Candidate Environment

The following list includes some of the most commonly referenced benefits of utilizing the Release Candidate Environment.

• Risk Mitigation: Enterprise customers can validate new updates in a stable, production-like setting before they are fully deployed.

• Enhanced Quality Assurance: QA teams can test features in real-world scenarios, catching regressions before broader release.

• Predictable Deployment Schedule: A structured release cadence (RC → General → Delayed) ensures smoother rollouts with fewer surprises.

• Reduced Need for Rollbacks: The phased approach minimizes critical failures in production, lessening the necessity for emergency rollbacks.

• Customer Control: Enterprise customers have additional time to adjust workflows and prepare internal documentation before full adoption.

How the Release Candidate Environment Works

The RC environment operates within a structured release cycle, ensuring that new updates are progressively introduced. When a new feature is ready for release, it is first deployed to the RC environment. Only Developer applications linked to the RC version can access this release. After a one week waiting period—assuming no major regressions are found—the update moves to the stable version, making it available to non-Enterprise customers. After a week, the update reaches the Delayed version, which is linked to Enterprise Production applications. This phased approach ensures that issues are detected early while maintaining a predictable release schedule.

Requirements for Accessing the Release Candidate Environment

Reference the following requirements for accessing the Release Candidate Environment prior to getting started with it.

• Only available to Enterprise plan customers with Developer applications.

• Contact the Beefree SDK team using this and request access to the Release Candidate Environment.

• Customers must be aware that while the RC version is production-ready, it is still subject to final testing and potential bug fixes.

• The program does not allow for customized release schedules per customer; all Enterprise customers follow the same cycle. Customized release schedules are available on VPC plans. For more information, contact the Beefree SDK team using this and request more information about customized release schedules with VPC plans.

How to Use the Release Candidate Environment

This section discusses how to access the release candidate environment and use it.

Instructions

To get the HTML version of a Beefree SDK message in the Release Candidate (RC) environment, you will need the following:

1. The Beefree SDK Support Team will provide you with a username and password (we will need a user’s email address to enable this).

2. A Beefree SDK JSON source file.

3. The ability to perform a call to a REST API. You can do that in different ways:

   • Applications like Postman or Insomnia

   • Use the “curl” command in a shell

   • With a custom script

The call should be addressed to one of the following endpoints, depending on the HTML output that you wish to receive back:

• https://stg-bee-multiparser.getbee.io/api/v3/parser/email - To receive HTML for Email

• https://stg-bee-multiparser.getbee.io/api/v3/parser/pages - To receive HTML for Webpages

• https://stg-bee-multiparser.getbee.io/api/v3/parser/amp4email - To receive AMP for Email

• https://stg-bee-multiparser.getbee.io/api/v3/parser/popup - To receive HTML for Popups

• https://stg-bee-multiparser.getbee.io/api/v3/parser/text - To receive the plain text version of the message

Additional Requirements

Reference the following additional requirements for using the Release Candidate Environment.

• It has to be a POST call.

• The Beefree SDK JSON has to be sent in the body of the REST call.

• It must include a Basic Authentication header in which you specify your username and password.

Upon success, the body of the response will contain the desired output. In case of an error, the response's body will contain the error details.

Please do not use this method in production. This is an RC environment, and it may change its behavior in the future.

Example

Legenda

The following fields are required in the example above.

• USERNAME and PASSWORD are your credentials provided by the Beefree SDK team.

• JSON_FILE.json is the Beefree SDK source file.

• OUTPUT.html is the desired output file.

Additional Considerations

The Release Candidate Environment is specifically designed for frontend features, the JSON-to-HTML parser, and the JSON Bumper. Backend services are not currently covered under this process. Bug fixes, while critical, may bypass the RC process when necessary to expedite resolutions. By adopting the Release Candidate process, Beefree SDK provides Enterprise customers with greater predictability, quality assurance, and peace of mind in managing their integrations.

Width settings

Let’s start by looking at some of the peculiarities of the Popup builder.

In Email and Page Builder, the content area width is saved in the template. For example, if you start with an empty template, a default width that works for most scenarios is chosen, but the designer can adjust the message width slider. If you start with an existing template, the content width was chosen by the template’s designer using the message width slider in the builder Settings tab.

With Popup Builder, the same template may have multiple contexts, and each context will likely have specific size requirements. For example, an exit-intent popup may have a max-width of 600px on a desktop with a classical layout centered on the screen. On the other hand, the host app may display the same template on mobile in the bar style docked at the bottom of the screen with a restricted width of 300px.

Since the content area’s width is tightly coupled to the context and layout, no one size fits all width is saved in the template. Instead, the host app will specify the width settings when the builder loads, based on the context of using the template. Here is a quick example:

Two final notes:

• Popup Builder does not currently support fluid 100% width content.

• If you don’t specify a width, the application will apply a default one.

Layout settings

As mentioned before, you will receive a ready-to-go design experience when no settings are provided. The default layout is a classic centered modal with a fixed width.

If the default popup style and layout suit your needs, then your customers are all set to start designing! You can load the builder without additional configuration and use the same standard controls and callbacks to access the HTML and JSON template.

What if you like most of the defaults but want to do some minor adjustments? We have you covered!

Changing the background

You can easily change the background to make the workspace look like the destination page where your customer will embed the popup.

If this option is not set, then we will provide a default skeleton layout. It’s worth noting at this point that you can apply every setting for both desktop and mobile design modes. That means you can have a different background when editing in .

Applying a preset layout

One of the most common needs is changing the popup’s default-centered position to better match the end-user’s use case. Out-of-the-box, the Popup Builder comes with many of the most common popup layouts preconfigured. You can use any available presets “as is” or use them as starting points that you can fine-tune to your satisfaction.

Here is a complete list of preset layouts:

Toolbar Options

In the Toolbar Options tab you can:

• control individual settings that affect the top toolbar in the builder

• decide whether to hide the toolbar completely

The toolbar contains all the actions not related directly with content edition, like save, send a test or preview.

You can decide the inner elements from it, from hiding our brand to removing the save button, to create the builder version that better fits in your application.

Not enough? Remove the toolbar completely and offer all the actions with your own UI elements.

Remove Toolbar and Create Custom UI Elements

For example, in our MailUp App for Shopify, we hide the toolbar completely and control the builder (Show preview, Send test, Save) from buttons in the app UI (not in the builder). Here is how it looks.

If you decide to go this route, use the to control the builder from your UI.

How it works

This Beefree SDK configuration allows you to change the builder’s appearance when rendered within your application so that it will blend even more seamlessly with the rest of your user interface.

Technically speaking, it allows you to change some parts of the CSS (Cascading Style Sheets) that controls the look & feel of the editor. If you want to use your own CSS, please refer to our feature.

Using a predefined theme

To change the builder’s appearance with just one click – and to familiarize with this feature – try one of the available, pre-built themes. All of them were created based on UI best practices, such as using the right amount of contrast between elements.

You can apply one of these themes as is, or use them as a starting point. And you can roll back to the default theme at any time, if things go wrong.

Note that themes will not be applied automatically, but rather will change the Look & feel values displayed in the lower part of the page.

Once you’re happy with your selection, press Save to apply the new theme to your Beefree SDK application.

Building your own theme

The properties that make up a theme are divided into sections for clarity and easy of use.

Available settings explained

General

The basic settings for your theme. They provide control over the font used and the general color scheme.

Font URL

You can use a Web font by adding the URL of a public CSS file (e.g., https://fonts.googleapis.com/css?family=Roboto)

Font-family stack

Will be used as font-family property. Remember that – when using web fonts – a fallback value will help to deal with downtime or network issues.

Brand color palette

Use this section to configure basic properties of your color scheme. These colors will be displayed in buttons, active widgets, hover & selection helpers, etc.

The Primary color will be the most important color in your scheme, as it will identify highlighted elements. Here are two examples of how a highlighted row is rendered using two different themes (the default theme is shown at the top).

Stage

The stage is the area where the message is displayed while you design it. The main elements will inherit colors from General | Brand Color Palette so only the text color is available as an editable property.

Right panel tabs

This section controls the appearance of the right panel’s top tabs. You can add custom colors and even hide the default icons (which may be useful for some translations in order to create more real estate for the text labels). Here is an example (left: default theme, right: aubergine).

Draggable tiles and Tile icons

These sections will help you customize the tiles that are used for content items and row structures. Here is an example (left: default theme, right: aubergine).

Properties top bar

This is the title bar that is displayed in the right side panel when you select an item on the editing stage. It displays important information and actions that can be performed on that item.

Widgets

All the properties displayed in the right side panel when you select an item in the editing stage are a mix of shared widgets.

The following is a visual guide of the available customizations (left: default theme, right: aubergine).

Sections

Input fields

Toggle control

Social icons

Implementing Image Rounded Corners and Card Style Features

This guide explains how to enable the Image Rounded Corners and Cards Style features in your host application. It provides instructions for making these features available to your application's end users while they are designing emails, pages, and popups.

Cards Style

Cards Style is a Row Property that enables you to create space between columns and round the corners of columns within a row.

The Cards Style feature allows users to transform ordinary messages into visually appealing layouts that grab their audience’s attention effortlessly. By incorporating stylish cards, users can effectively highlight product features, display customer testimonials, promote special offers, and present news updates in a structured and eye-catching manner. This not only enhances the readability and engagement of emails, pages, and popups but also ensures that important information stands out and resonates with viewers, providing significant value to the end-users and enriching their design experience within your application.

Reference the to learn more about how your application's end users can use this feature.

Image Round Corners

The Image Round Corners feature allows your application's end users to easily add rounded corners to images from the side panel, enhancing the visuals of emails, pages, and popups. This built-in tool offers a sleek and professional design option, ensuring a modern look.

Together, these features empower your application’s end-users to create more compelling and attractive designs effortlessly. Users can employ these stylistic options to make their content more engaging and easier to scan.

Reference the to learn more about how your application's end users can use this feature.

Prerequisites

Ensure you have the following prior to activating Cards Style and Image Round Corners:

• Beefree SDK account (any plan type)

• An application in the developer console

• Client ID and Client Secret

How to Activate

Take the steps outlined in this section to enable Image Rounded Corners and Cards Style Widgets.

Activate Image Rounded Corners

This section discusses how to enable Image Rounded Corners.

To activate Image Rounded Corners, follow these steps:

1. Log in to your developer console

2. Navigate to your application

3. Enter your application's configurations

4. Navigate to the Enable image rounded corners toggle

5. Toggle it to on

Activate Cards Style Widget

This section discusses how to enable Cards Style.

Follow these steps to enable the Cards Style Widget for your application:

1. Log in to your developer console.

2. Navigate to your application.

3. Enter your application's configurations.

4. Find the Enable cards style widgets toggle.

5. Toggle it on.

Implementing Rounded Corners and Card Style Using Content Defaults

You can implement the image rounded corners and cards style features using content defaults in your application's configuration. The following code snippet demonstrates how to set the properties related to these features.

In this configuration:

• Image Rounded Corners: The borderRadius property under the image key sets the border radius to "30px".

• Cards Style Widgets: The row key contains styling properties for widgets, such as columnsBorderRadius, columnsPadding, and columnsBackgroundColor.

Visit the page to learn more about these configurations.

Advanced Permissions for Customization

To control the permissions for the Cards Style and Image Round Corners features, use the following configuration sample.

This configuration allows you to manage whether these features are visible and editable to your application's end users.

The properties in the advanced permissions code snippet control the visibility and editability of specific interface elements related to Cards Style and Image Round Corners. By setting "show": true, these elements will be displayed to end users. The "locked": false property ensures that these settings can be modified by the end users. These configurations set the permissions for these features within your host application.

Visit the to learn more about these configurations.

Additional Considerations

Consider the following when using Cards Style and Image Round Corners:

• Round corners for Cards, Images, and Content Areas are not rendered in Outlook clients. The fallback is squared corners.

• Visit Using Cards Style and Image Round Corners to learn more about how end users can use these features in your application's user interface.

API billing: why we are charging for this API

The allows you to carry out a number of , like converting an email or a page into a thumbnail image or a PDF document, or updating a footer into all the emails that use it (i.e. a ).

These tasks consume resources in our Amazon Web Services environment, so we have to account for that. We did extensive research to define pricing that is consistent with other APIs.

Here is a quick summary:

There will be no changes to the functionality of the CSAPI, except that we’ve added a really useful Merge API that allows you to update saved rows in the documents that use them. You can find complete .

Most changes related to CSAPI will be in the background, but there will be some changes in the Beefree SDK Console, and in terms of billing.

• API Key Management: when you configure an application in the Beefree SDK Console, you will see two actions – instead of a single Revoke action – in the area of the application settings where your API key is shown:

  • Regenerate: Revokes the current key and creates a new one

  • Disable and revoke: Revokes the current key and disables the service, so you will not be charged for it*

• Billing statement changes: you will see new line items on your Beefree SDK invoice.

Can I try the service without paying?

You can by creating a development application, and then creating a new API key for that app, which will be used for development purposes. Reference our .

How will charges appear on my bill?

An additional charge, CSAPI, will be added to your current subscription plan invoice.

Can I use different payment methods for each app?

The Content Services API is provided as a component for your current subscription and the charges will be applied to the subscription payment method. Currently, there is no option to use an alternative payment method specific to these charges.

How do you calculate request limits?

API requests rate limits exist independently of any API key’s monthly usage allowance.

As of January, 2020, the API has the following rate limits:

• Per minute: 500 requests

• Per second: 100 requests

Form fields that can be edited

The following table provides an overview of the form fields that support the edit form field modal, including a description of each field and an example of its content.

Form fields that cannot be edited

The following table provides an overview of the form fields that do not support the edit form field modal, including a description of each field and an example of its content.

Main concepts

This feature allows you to have your own file picker for choosing files (images) in Beefree SDK's Editor, to make its integration in your platform look even more seamless. It leverages Beefree SDK’s Content Dialog feature. To set it up you will need to add the corresponding entry to the configuration object:

contentDialog: {
    filePicker: {
        handler: function(resolve, reject, args) {
            // Your function
        }
    },
    ...
}

The handler function lets you use your own logic to retrieve the desired value, and it has a Promise-like signature.

If data from Beefree SDK is available, it will be sent in the args parameter (see below). Once the value is available, you must call the resolve(value) function to pass it to the editor. In case you want to cancel the operation, call the reject() function.

Please note that a resolve or reject call is mandatory. If you miss this step, the editor will remain in waiting mode – and the error management on the host application must call the reject() function to unblock the editor.

The args parameter is where the File Picker’s Content Dialog will receive additional data.

{
    "X-BEE-UserName": "string", // e.g. image, all
    "X-BEE-Uid": "string", // e.g. the current user's id
    "X-BEE-Mimetypes": "string", // e.g. "*" -Or- "image/*"
}

Images dragged onto an image block or edited via the “apply effects and more” button will be passed to the image storage per your app’s file storage settings. To prevent images from passing through Beefree SDK’s file storage, the file upload can be disabled via advanced permissions.

Returned value syntax

Values must use the same pattern used in the configuration object: the returned object is validated against the expected format. If the validation fails, an error will be returned to the browser console, eg: Error getting content filePicker value, the item is malformed

{
   "url":"https://d1oco4z2z1fhwp.cloudfront.net/templates/default/113/rocket-color.png",
   "context":"imageModule.src"
}

A basic example

The following is the most basic example, which returns an image URL immediately after clicking the “Browse” button. This example does not open a file picker.

In a real-world scenario, the host application would display a file picker UI and let the user search for and locate the file before finally returning the file’s location (URL) to Beefree SDK:

contentDialog: {
  filePicker: {
    handler: function(resolve, reject) {
      resolve({
        url: 'string', // url to the file (e.g. http://www.example.com/myimage.jpg)
      })
    }
  },
}

List of modules

The following is a list of all modules that are sent as part of the args parameter:

• sidebar.link

• buttonModule.link

• imageModule.link

• iconsModule.link

• menuModule.link

• iconsModule.src

• socialModule.src

• textModule.link

• imageModule.src

• titleModule.link

• row.backgroundImage

• backgroundVideo.src

• toolbar.specialLink

• sidebar.specialLink

Many digital marketing campaigns start with an attention-grabbing popup. In fact, many such campaigns include a popup, a landing page, and one or more emails.

• A cool popup highlights something that the reader may be interested in

• A landing page provides more information and includes some sort of signup form

• Emails are sent to follow up.

Emails, pages, popups: three pillars of all sorts of digital marketing initiatives. Since Email Builder and Page Builder were already part of the Beefree SDK family, the natural next step was to create a Popup Builder. So here it is! This new version of the builder brings effortless popup creation inside your application.

Why Popups?

A popup is a small window that appears on a website visitor’s screen, asking for an email address in the most basic interaction or other actionable messages when using more sophisticated strategies (targeted promotions, social evidence messages, shopping cart recovery, etc.).

Popups are one of the most used online marketing tools. When done right, they capture visitors’ attention at the right moment, and push them forward in the customer journey. Despite attracting criticism in the past because they create a barrier between visitors and content, there’s plenty of evidence that they work. They will continue to play a strong part in any modern-day marketing strategy. Read our blog entry if you’re interested in learning more.

With this in mind, we have developed an embeddable solution for designing popups that you can easily deploy because:

• it’s built from the ground up to integrate seamlessly with your application;

• it’s easy to use, offers tons of design flexibility, and builds upon the same UX your customers already know from our Email & Page Builders;

• all data stays in your application, and you don’t have to ask your customers to use 3rd party tools for building popups. You can leverage our Form block to add forms to popups

Sample workflow

In terms of packaging the final output, Beefree SDK takes care of the Popup design and returns a solid HTML output ready to be injected on a website. On top of that, you can enrich the building experience by creating a workflow that will add to that output:

• Showing/closing behavior (e.g. display after N seconds, exit intent)

• “Additional” styles, for things like

  • Close button

  • Border radius

  • Drop shadows

The good thing: you can pass additional styles to your application, so they will reflect into the editing experience. You will then take the HTML produced by Beefree SDK and apply these styles for the final output.

Main features

Our drag&drop experience, loved by millions of users

There are over 4,500,000 sessions of our drag-n-drop email & landing page builders every month, across hundreds of applications around the world. Popup builder brings the same, great user experience that transforms non-designers in masterful content creators.

What you see is what you get...finally for Popups

You can load your customers' website home page as a background, so they can design a popup in the exact context where it will be used. And with Mobile design mode, your users are one click awaying to seeing and perfecting how the popup looks on mobile devices.

Designed to fit any configuration workflow

Position, size, background color, and more. Customize the builder each time to match how your customer configured their popup inside your application. What this means for you is flexibility, peace of mind, and implementation speed.

Ready-to-go HTML output

Get a solid HTML output ready to be injected on your customer’s website. Your application controls the display and behavior conditions, Beefree SDK takes care of the content.

Drop personalized content in popups, in minutes

Personalization is the secret weapon to attract any audience. With Merge tags and Display conditions your customers can show the right message at the right time, with use cases like product recommendations and personalized discount codes.

Speed up the creation process with shared and pre-made assets

Your customers will never have to recreate the same content over and over again. They can apply the same saved rows already available for emails, landing pages or other popups. Plus, you may also provide custom rows with ready-made dynamic content like coupon codes and best-selling items.

Managing assets with File Manager

The File Manager can be launched as a standalone application. This means that users can access the File Manager directly, without having to first launch the builder application. This is useful for situations where a user needs to quickly upload or manage assets, but doesn’t need to create a full email, landing page, or popup.

Instead of having to switch between different applications or tools, they can access everything they need from one centralized location. This can make the asset management process more streamlined and efficient, which can ultimately help users be more productive.

Testing and integrating the File Manager

When you create an application in the Beefree SDK Console, you’ll have the option to create a File Manager application.

Paid applications also include the option to create child development applications. These child applications can be used for new feature testing, development, and maintenance. By creating a child application, developers can easily test and iterate on new features without affecting the main application. This can help to minimize downtime and reduce the risk of introducing bugs or errors into the production environment.

The child applications can also be used for ongoing maintenance and updates. Instead of making changes directly to the production environment, developers can make updates and improvements in the child application, test them thoroughly, and then deploy the changes to the main application once they have been fully vetted. This can help to ensure that the main application remains stable and functional, even as new features and updates are introduced.

File manager applications share the same core functionalities as all other builders. These functionalities include authentication and configuration, which are necessary for the development process. If you have already integrated another builder into your workflow, you can easily re-use most of your work by using the same configuration for the file manager application.

For those who are new to our platform, our documentation includes a comprehensive Getting Started section that provides detailed instructions on how to set up and use our builders. This section is applicable to all products.

File Manager and all builders are available to customers under the same all-in-one pricing. Please contact your Customer Success Manager for more details.

Configure "Insert" and "X" Buttons

This section outlines steps to add the “Insert” and “X” buttons to your application’s user interface. These steps are specifically for the file manager.

Take the following steps to define the `onFilePickerInsert` and `onFilePickerCancel` properties to enable an “Insert” button and “X” button in the file manager user interface:

1. Ensure that you have initialized the Beefree SDK and have a reference to the SDK instance (`bee`).

2. Define the `onFilePickerInsert` property with a callback function that will be invoked when the user wants to insert a file. This function will receive the selected file data as the only parameter. You can use this data to perform any necessary actions, such as inserting the file into the editor or displaying a preview.

Here is an example of how the callback function can be defined:

onFilePickerInsert: function (data) {
  // Handle the selected file data
  console.log("File Inserted:", data);
  // Perform any necessary actions with the file data
},

1. Define the `onFilePickerCancel` property with a callback function that will be invoked when the user wants to cancel the file picker. This function does not receive any parameters. You can use this callback to perform any cleanup actions or provide feedback to the user.

Here’s an example of how the callback function can be defined:

 JAVASCRIPTCopy
onFilePickerCancel: function () {
  // Handle file picker cancellation
  console.log("File Picker Canceled");
  // Perform any necessary actions when the file picker is canceled
},

1. Assign the defined `onFilePickerInsert` and `onFilePickerCancel` callbacks to the corresponding properties in the Beefree SDK configuration. Make sure to include these properties when initializing the Beefree SDK.

Here is an example:

var beeConfig = {
  // Other configuration options...
  onFilePickerInsert: function (data) {
    // Handle the selected file data
  },
  onFilePickerCancel: function () {
    // Handle file picker cancellation
  },
};

// Initialize the Beefree SDK with the configuration
bee.start(beeConfig);

By following these steps, you will be able to define the `onFilePickerInsert` and `onFilePickerCancel` properties in the Beefree SDK configuration and enable the “Insert” and “X” buttons in the file manager user interface. You can customize the callback functions to suit your specific needs and perform any desired actions with the selected file data or when the file picker is canceled.

Storage Options

When configuring a builder application with Beefree SDK, you have four image and file storage options:

1. Beefree SDK Storage: Default option. Images are hosted in Beefree SDK’s AWS S3 bucket. Potential fees apply for usage beyond the included limits.

2. Existing Storage Application: Connect your builder to an existing storage application to share storage resources.

3. Own AWS S3 Bucket: Use your own AWS S3 bucket instead of Beefree SDK’s. Follow the documentation to configure this option.

4. Own File System: Integrate your application’s existing file system for storage. This option is available on Beefree SDK paid plans.

Reference the Storage Options documentation to learn more about how to configure storage for your File manager application.

Overview

With Meta Tags, you can now apply various tags to your HTML that can greatly benefit your SEO and accessibility needs.

These Meta Tags include:

• Title

• Description

• Subject

• Preheader

• Language Attributes

For the Email Builder, Meta Tags promote improved deliverability performance. For the Page Builder, Meta Tags promote greater customization and improved search engine results.

Page Builder

The following image displays the Title and Description fields from within the page builder.

Title

A page title, also known as a Title tag, is a short description of a webpage that appears at the top of a browser window and in SERPs (Search engine results page). This is an important element of an optimized SEO page, as it affects the page ranking in search engines. The title tag will be located within the <title> element of a page’s HTML output, and its value will be saved inside the JSON template.

Here is an example of what a Title Tag inside Beefree SDK’s HTML output might look like:

<title>Done with love using BeefreeSDK</title>

Description

The description tag is located within the <meta> tag element of a page’s HTML, and it has a limit of 190 characters. The tag will be located within the <meta> element of the page’s HTML output, and its value will be saved inside the JSON template.

Here is an example of what a description tag inside Beefree SDK’s HTML output might look like:

<meta name="description" 
content="This is an example of a meta description. 
This will often show up in search results.">

JSON Page Builder Example

The following code snippet is an example of what the Meta Tags will look like inside the JSON.

    },
    "title": "Empty Template",
    "head": {
      "meta": {
        "title": "The Legendary Elephant King: A Tale of Love, Loss, and Redemption",
        "description": "Experience the timeless story of the elephant king and elephant son as they navigate through tragedy, friendship, and destiny in the elephant kingdom."
      }
    }
  },

Email Builder

The following image displays the Subject and Preheader fields from within the email builder.

Subject

The subject field has a maximum of 190 characters. Here is an example of what a subject tag inside Beefree SDK’s HTML output might look like:

<title>🐘 Experience the Epic Tale of an Elephant King!</title>

Preheader

The preheader field has a maximum of 130 characters. Here is an example of what a preheader tag inside Beefree SDK’s HTML output might look like:

<div class="preheader" style="font-size:1px;line-height:1px;display:none;color:#fff;max-height:0;max-width:0;opacity:0;overflow:hidden">
  Join the elephant son on a journey of love, loss, and redemption in the animal kingdom. 🌍
</div>

JSON Email Example

The following code snippet is an example of what the Meta Tags will look like inside the JSON.

    },
    "title": "Empty Template",
    "head": {
      "meta": {
        "subject": "🐘 Experience the Epic Tale of an Elephant King!",
        "preheader": "Join the elephant son on a journey of love, loss, and redemption in the animal kingdom. 🌍"
      }
    }
  },

Language Attribute

The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language-specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation for accessibility purposes.

When loading the builder, the host application can specify in the configuration a list of languages for their users to choose from (e.g. en-US), see the example below where the only option “Italian, it-IT” is provided. If there are no values provided via configuration file, a standard list of common languages will be provided.

beeConfig: {
   ...
   metadata: {
      languages: [
         { value: 'it-IT', label: 'Italian' },
         ...
      ]
    }
}

Here is an example of what a language attribute inside Beefree SDK’s HTML output might look like:

<html lang="it-IT">

Overview

Content Area Padding allows end users to precisely adjust the padding around the content inside of any row. This provides them with greater design flexibility, precision, and control. By managing padding on all sides—top, bottom, left, and right—they can fine-tune the spacing within their layouts to achieve clean, professional, and visually appealing designs easily.

By using Content Area Padding, end users can:

• Design outer areas with different colors.
• Add transparent borders.
• Gain precise control over padding, borders, and spacing.

• Use row-level padding to manage spacing without disrupting the row's content.

The following GIF displays how end users can apply padding around content within their rows.

Reference the white label end user guide to learn more about the end user experience. You can clone the Markdown files in this GitHub repository and customize the instructions for your application's end users.

Prerequisites

Prior to activating Content Area Padding, ensure you have the following:

• A Beefree SDK plan

• An application in the Developer Console with a Client ID and Client Secret

Activation

To activate Content Area Padding, you'll need to complete the following:

• Enable the toggle in the Developer Console.

Developer Console Steps

Take the following steps to activate the feature within the Developer Console:

1. Log in to your Developer Console account.

2. Navigate to the application you'd like to activate it for.

3. Click on Details.

4. Click Application configuration.

5. Navigate to the Services section.

   1. Toggle on the Enable content area padding option located in the second section.

Once you toggle on the feature, the Content Area Padding option will be available to your application's end users. In the builder, they can locate the option inside the Layout section under the ROWS tab.

Optional Functionality

This section lists optional functionality available for Content Area Padding, including the option to set restrictions and permissions for feature access.

Content Defaults

Content defaults refer to the predefined settings for Content Area Padding that serve as the base configuration for all content within your application. By utilizing Content defaults, you can maintain uniformity across the user interface without needing to apply manual adjustments for each row.

{
  "row": {
    "padding": "20px",
    "paddingLeft": "25px",
    "paddingRight": "20px",
    "paddingTop": "15px",
    "paddingBottom": "10px"
  }
}

Learn more about Content Area Padding for Content defaults.

Advanced Permissions

Advanced Permissions in the context of Content Area Padding refer to the granular control settings that you can use to manage who can view and not view padding options within your application. These permissions ensure that only authorized users have access to adjust padding settings.

The following JSON displays an example of the show and locked boolean options with the padding configuration.

{
  "padding": {
    "show": true,
    "locked": false
  }
}

Learn more about Content Area Padding for Advanced Permissions.

Row AddOn | Simplified Rows Schema

With Row AddOns, you can create custom row structures that your users can gain inspiration from and design with. They give you greater control over the UI, enabling you to further personalize the experience you provide to your end users.

Simplified Rows Schema

The Simplified Rows Schema optimizes the definition of data structures, leading to consistent and reusable configurations. By implementing Content Area Padding within this schema, padding settings for Row AddOns are standardized, ensuring data uniformity. This uniformity simplifies custom API development and database integration by aligning data structures with application requirements.

Learn more about Content Area Padding for Simplified Rows Schema.

Additional Considerations

Consider the following when using Content Area Padding:

• Content Area Padding is compatible with the Brand Management API. However, note that the Brand Management API is not compatible with the mobileStyles property.

Introduction

Custom AddOns are useful when there is a feature you'd like to offer within your application that is not available in our AddOn Marketplace within the Developer Console. In these instances, you can develop your own Custom AddOns for your application's end users.

Example of a Custom AddOn

Let’s say you embedded our email editor in your event engagement platform, which has a feature that allows event marketers to insert an event ticket’s QR code in marketing campaigns sent to create more engagement around an event.

• You want those marketers, users of your platform, to be able to easily include a QR code in the emails they send to remind people about the event. That way ticket holders can use the QR code to quickly get into the event venue.

• So you decide to create a “QR Code” addon: “QR Code” becomes a new tile in the Content tab in the editor.

• Marketers drag and drop the tile, click on Select event to indicate which event the QR is for, and use the editor to style that section of the message (e.g. size, padding, etc.).

• The QR code is created dynamically by your platform, at the time the email is sent to a ticket buyer.

• The feature is specific to your application.

Availability

Custom AddOns are an advanced feature. As a result, the feature is available on the following plans:

• Superpowers

• Enterprise

Of course, there are exceptions to this requirement.

• Testing: if you are not yet on a Superpowers or Enterprise plan, and you want to test building a Custom AddOn:

  • Create a development application.

  • Request an upgrade to the Superpowers plan.

  • Test as much as you want. If and when you decide that you wish to deploy your Custom AddOn in production, we will ask you to upgrade your production application to the Superpowers or Enterprise plan.

• Development of a Partner AddOn:

  • You provide features that could be a good fit as an extension of our editors

  • You are not a Beefree SDK customer

  • Learn more about Partner AddOns

Getting started

Log into the Beefree SDK Console and locate any application that is on the Superpowers or Enterprise plans. Click on Details to navigate to the application details page. In the lower part of the page, locate the Application configuration section and click on AddOns.

You will be taken to a page that lists the addons that have been installed for this application. Since you are just getting started, the list is likely empty. Click on Create a custom addon to start the process of creating a Custom AddOn.

Refer to the AddOn Development documentation for all the details on building your addon.

Understanding storage & content delivery options

When you configure a builder application, you have four options for image & file storage:

• Beefree SDK storage: unless you select another option, images will be hosted in Beefree SDK’s own AWS S3 bucket. for details about potential fees associated with this option.

• An existing builder application: to connect the selected application’s storage to an already existing application. After selecting this option the two applications will share their storage.

• Your own AWS S3 bucket: instead of using Beefree SDK’s AWS S3 bucket to store & deliver files, you can use your own. See .

• Your own file system: if your application already has a place where images and other assets are stored, you can leverage it. This option is only available on Beefree SDK paid plans. See using .

Custom File System Provider

When working with your own custom file system provider, there are many considerations to keep in mind. Follow the steps outlined in the documentation to ensure you configure this feature successfully for this storage option.

Images vs. other files

End users can upload images, PDFs, and other documents to the builder. For instance, they can link a button to download a PDF report.

Reference to learn more about the end user experience with the File manager.

If you need more control on what files users should be able to upload, you may activate in the Privacy & Security section of your app’s configuration. In alternative, you may consider .

About Beefree SDK storage

How images are stored & delivered

By default, images used in emails and pages created with the builder are stored in Beefree SDK’s file storage system. Beefree SDK uses service for storage, and leverages Amazon’s Content Delivery Network () for fast content delivery.

Storage and delivery fees

• There are no charges for storing images & other documents.

• There are no charges for delivering images & other documents up to a total of 5TB of delivery traffic per 30-day period.

• Above 5TB of data traffic recorded in a 30-day period, you will be billed $0.01 per GB of data transferred.

• Beefree SDK customers that exceed 50 GB of image data traffic on the Free plan in a given month will be moved to our .

Enabling the Move File Feature for Your File Manager

You can enable the move icon for files within the File manager. This move icon allows your end users to move their files between folders, locations, and so on within the File manger. They can access the move icon directly on the file within the File manager. The move icon is a folder with an arrow pointing right inside it. End users click this icon to initiate the process of relocating the corresponding file to a new destination.

If you are using the Beefree AWS S3 Bucket, take the following steps to enable this feature for your File manager.

Using the Beefree AWS S3 Bucket

If you are using your own AWS S3 bucket, take the following steps to activate the Move File feature:

1. Ensure that your FSP is updated to the latest version.

2. Navigate to the .

3. Locate the Move File configuration toggle.

4. Toggle the feature on.

The Move Feature will be available in your application.

FAQs on Beefree SDK Storage fees

Why do you charge for traffic when using BEE storage?

When you use the Beefree SDK S3 storage, your images are delivered via a Content Delivery Network (AWS Cloudfront), and AWS bills us based on the traffic generated by those assets when you send emails or publish web pages created with Beefree SDK. A large amount of monthly traffic (5TB) is included in your Beefree SDK paid subscription at no charge.

If you exceed the 5TB monthly traffic allotment, we ask you to cover the cost of the service (for a few of our customers that generate a lot of image data traffic, that cost has grown to exceed their Beefree SDK subscription fee). Also, note that this scenario is quite rare: it applies to less than 3% of our customers.

When does the traffic counter reset?

• If you’re on a paid plan, billed monthly, the counter will reset on the same days as your UIDs and CSAPI calls, i.e., on the day your subscription to Beefree SDK is renewed.

• If you’re on a paid plan, billed yearly, the counter will reset on the 1st day of each month.

• If you’re on a free plan, the counter will reset on the 1st day of each month.

You can always see when the current period starts and ends in your application details, in the Statistics widget:

I’m on an annual plan. If I exceed the traffic quota in a month, when will I be billed?

You’ll be billed annually by summing up any paid traffic you may have accumulated during the past 12 months, unless such total were to exceed $1,000. In that case, we will send you an invoice. The same is true for additional user fees (UIDs) and additional API calls.

Do I get notified when I’m about to exceed the quota?

For the moment, only subscriptions on paid plans will be notified by our Customer Success team. If you’re on a free plan, you may check your usage by logging into the , and going into the application details, in the Statistics widget.

I’m using Beefree SDK storage. What can I do to avoid getting charged?

You can switch to or .

I connected my application’s storage to an already existing one. How will the billing work?

All traffic generated is charged to the shared storage. E.g.: an Email Builder application shares its storage with a Popup and a Page applications. In this case, the Email Builder application will be charged for the traffic generated by Email + Popup + Page.

Are there any restrictions when connecting an application’s storage to an already existing one?

• It’s not possible to link a development app to a production app.

• An app can be linked to another just once.

• The same shared storage can be shared across different applications within the same subscription

Can I connect my dev app storage to a production app?

No, this is not possible. You can either connect production apps included in the same subscription or dev apps included in the same subscription.

Can I get a history of my monthly traffic usage?

Please contact your account manager for this. If you are not sure how to do this, please and submit a support ticket asking for your usage history.

Color picker palette overview

The builder’s color palette gathers a list of the default colors to display from multiple sources in order to create a convenient palette of color selections when the editor loads.

Specifically, colors are gathered as follows:

• 3 colors from the body (message background, content background, link) + black (#000000)

• custom colors (as many as customers want)

• 7 most recently used colors

Use the options outlined below to customize the default color palette.

Choosing the default colors in the color picker

The builder allows you to configure a custom color palette (per user), by modifying the client-side configuration. This, for instance, allows you to provide users with easy access to their company’s brand colors.

If no color profile is provided, then the builder will continue to suggest a color palette based on the colors used in the template that is being loaded.

Advanced Permissions for the Color Picker

Through setting for the color picker, you can control the visibility of, and access to, color codes, the slider, and swatches that appear within builder. These customization options enable you to control access to various elements of the color picker for different end users of your application.

A few of the benefits of applying advanced permissions to the Color Picker are the following:

• Enhanced brand control – Gain granular control over color selection to ensure brand consistency.

• Improved user experience – Streamline the interface by showing only necessary elements.

A few scenarios in which these advanced permissions are particularly helpful include the following:

• Customizing the color picker UI based on user roles or workflows.

• Hiding unnecessary UI elements to improve accessibility and reduce distractions.

• Enforcing strict brand color guidelines by limiting available color options.

Configuration Steps

Take the following steps

1. Update the beeConfig File: Open the beeConfig file and locate the section for advancedPermissions. Within this section, ensure there is a field for components and add a new entry specifically for the colorPicker.

2. Define Permission Settings: Within the color picker section, specify the necessary parameters that determine user access. Set the relevant parameters to either true or false, depending on whether the feature should be enabled or restricted for the end user.

Code Sample

The following code sample displays an example of how to add advanced permissions for the color picker to your configuration.

Available Settings

The table below outlines the configurable parameters for the color picker.

Disabling the color history

The builder will remember recently selected colors and add them to your color palette. If the browser’s privacy settings allow it, the color picker history will be saved in the browser’s local storage.

If you want the color palette to be static such that recently selected colors are not included, then you can disable the history in your configuration.

Disabling the template's base colors

The builder by default adds colors found in the template’s body section to the color palette.

If you want the color palette to only show the colors you pass in via the bee config document, then you must disable the base colors.

Overview

Beefree SDK offers the option to custom the Line height for designs within the builder. This provides end users with greater control over typography and design. The Line height widget includes both preset values with clear indicators, and a custom input field for precise adjustments. This degree of control supports workflows that require consistent, accessible, and brand-compliant typography.

Benefits

Line height includes the following benefits:

• Clear Presets – Easily select from predefined Line height values for quick adjustments.

• Custom Input – Enter exact Line height values (in percentage) for fine-tuned control.

• Full Compatibility – Works smoothly with co-editing, history tracking, and undo/redo functions.

• CSS Customization – Ensure brand consistency with advanced CSS styling options.

The following GIF displays an example of how your application's end users can utilize Line height throughout their content creation process.

Prerequisites

Line height is available in the Beefree SDK builder by default. The only requirement is that you have the builder embedded with your application and can load it successfully.

Advanced Permissions

You can use with Line height to show or hide the widget for the following module types:

Title

The following code snippet shows an example of how to set advanced permissions for Line height in the Title content block.

Paragraph

The following code snippet shows an example of how to set advanced permissions for Line height in the Paragraph content block.

List

The following code snippet shows an example of how to set advanced permissions for Line height in the List content block.

Button

The following code snippet shows an example of how to set advanced permissions for Line height in the Button content block.

Table

The following code snippet shows an example of how to set advanced permissions for Line height in the Table content block.

Form

The following code snippet shows an example of how to set advanced permissions for Line height in the Form content block.

Custom CSS Classes

You can use the following CSS classes to customize styles related to Line height on the Frontend of your application.

• line-height-select--cs for the select element

• line-height-select-wrapper--cs for the select element wrapper

• line-height-custom-input-wrapper--cs for the custom input wrapper

• line-height-custom-input--cs for the custom input element

Customizable Labels

You can use customizable labels to override the default text for Line height in the Beefree SDK builder and add your own.

• bee-line-height-widget-custom-option allows users to customize the label for the last option in the Select component. The default value is Custom.

Additional Consideration

Consider the following behaviors when using the Line height widget:

• The minimum value is 0.5.

• The maximum value is 3.

• When you select the Custom option from the Line height drop-down menu, you can click plus (+) or minus (-) to increase or decrease the Line height value. The Line height value will increase or decrease in increments of 0.1.

• If you manually type in a value with two numbers after the decimal, for example 0.57, the Line height will be rounded to the first number as the final value. So, the final value would be 0.6.

A richer content creation experience

Beefree SDK is a complete content design and creation platform for you to build upon. Our objective is to help you create a fantastic content creation experience for your customers inside your software applications.

As this may go beyond the interactions that happen within our email, page, and popup builders, we created an API to offer more assistance. We call it the Content Services API: it exposes a set of services that will help you provide a better experience with how emails, pages, and popups are created, updated, and transformed into different formats.

Overview

The Content Services API (CSAPI) – helps you achieve the following:

• Retrieving the HTML of an email, page or popup created with a Beefree builder, so you can build a custom UX flow for saving messages. With the CSAPI, you can ask the Beefree system for the HTML whenever you need it.

• Updating the HTML of an email, page or popup created with a Beefree builder, without user interaction. Why? For example, the HTML of an email template might need to be updated (e.g. to resolve a newly discovered rendering issue in an email client), and you don’t want to ask your users to open the email with the builder and resave it.

• Outputting partial HTML that enables you to reuse code, increase consistency across your templates, and easily maintain your code.

• Generating a thumbnail from the HTML, because thumbnails are always nice to have, for all sorts of reasons 🙂

• Generating a PDF from the HTML, as your users may want to share or print an email or a page, and PDF is great for that.

• Merging shared content () into emails and pages that use it (e.g. update 30 emails that use the same footer).

• Use to make template-wide design changes to existing templates quickly and easily.

• Generate versions of emails from JSON templates, ensuring emails look sharp and easy to read on any device.

• to generate SMS, Metadata (Preheader and Subject), or Summary text from JSON templates.

Getting the HTML from a message JSON

This service allows the host application to build a custom workflow that doesn’t rely on the onSave callback in the editor (). Check our .

A Few Common Use Cases

Getting newer, better HTML

The first reason for this API to exist is a common use case: a transactional message was created months ago, it does not need to be edited in the editor, but its HTML code needs to be updated to benefit from fixes or changes that resolve rendering issues.

As you know, HTML for email is a mix of old markup – needed by email clients with a lack of support for standards – and advanced tricks used to take advantage of modern email client capabilities. The result is an environment that changes continuously, driven by the discovery of new techniques and by software updates released by the most popular email clients and browsers.

Having the ability to update the HTML without user interaction in the editor means ensuring that your customers can take advantage of the latest fixes or improvements, even if the messages are transactional notifications created years ago and never edited.

Displaying the preview for incorrectly saved messages

It’s not common, but it may happen that a browser crashes before the user saves a message they are working on. In this scenario, using the autosave or the onChange callbacks are enough to prevent any work loss. However, the host application ends up storing a message JSON without the HTML counterpart.

This presents the problem as the two files are out of sync, making things hard for the host application to get a preview, and, therefore, hard for the user to understand if they are looking at the right version of the message.

Using the API the host application can generate an updated HTML from the latest JSON, solving the issue.

Eliminating the need for “Save” buttons

A step further in the use case described above. Some modern applications remove any “Save” button from the UI, autosaving the work every time a change is applied (e.g. Google Docs). Through the onChange callback, your application can reproduce this behavior, and get the HTML from the saved JSON, when needed.

Getting additional output formats

The API provides some useful services that offer additional message formats, reducing the development effort in the host application.

Generating a PDF file from an HTML

A dedicated endpoint that transforms an HTML into a PDF document and supports the following options:

Page orientation

Landscape and portrait as available values.

Page size

Letter, A4, A3, and Full as available values.

While the other values split the message into pages, the Full option returns a single page using 900px as the page width and the proportional height.

PDF is often used in most approval processes, but is also a perfect format for printers. Check our .

Generating image files from an HTML

An endpoint that creates an image from an HTML source supporting the following options:

Width The image width in pixels

Height The image height in pixels

When the height is not provided, the API applies a proportional value based on the given width, keeping the image aspect ratio. When the Height value is provided, but not proportional to the given width: If it’s higher: the proportional value applies If it’s lower: the image is cropped

Check our .

Merging saved rows in existing messages

What if a footer is shared by 10 messages and needs to be updated in all of them? The feature was created precisely to address the scenario of content that is shared across multiple emails, pages, or popups, and it is used in conjunction with the Content Services API.

The of the Content Services API allows you to update a row across multiple messages. More specifically, it allows the host application to update an element in an existing JSON document. This means that, for instance, you could create a feature that takes care of updating existing messages in the background, without any further action by your users.

The of the Content Services API is a complementary method, designed to retrieve the assets which contain saved rows, so that you know which assets need update using the Merge method.

There are many use cases, including:

• updating headers & footers;

• changing the expiration date in a seasonal offer;

• making price changes, link changes, etc. in content that otherwise can be re-used “as is”

• etc.

Getting started

You can use ready-to-go AddOns to extend the functionality of Beefree SDK (you can also ).

To browse and install existing AddOns, log into the and click on Details to navigate to the application details page.

In the lower part of the page, locate the Application configuration section and click on AddOns.

You will be taken to a page that lists the AddOns that have been installed for this application. If you are just getting started, the list will be empty.

Click on Browse Partner AddOns to get the list of ready-to-install AddOns. We call them Partner AddOns because they were developed by companies that partnered with us to extend Beefree SDK’s core functionality.

You will deal directly with those companies with regard to signing up for an account, cost, support, etc.

You will instead click on Create a Custom AddOn if you want to for Beefree SDK.

Installing an AddOn

When you click on the Browse Partner AddOns button, a list of AddOns is displayed. You can browse them and select what you need to install.

After installing a Partner AddOn, you will need to configure it by clicking on the Edit action. A form will be displayed.

At the top of the form you will find the AddOn name and some links to the AddOn documentation. If any signup is required, that is the company that you will need to contact.

Below that, you will see the following form fields:

• API Key Shown if this is an AddOn where a signup is required (you will be provided with an API key once you have signed up). Contact the provider of the AddOn if that is the case, so that you can learn about signing up, costs involved, the type of support they provide, etc.

• Handle A unique identifier for this AddOn. You will use this unique identifier to pass information to the AddOn from your application, if and when needed.

• Enabled A toggle element to enable and disable the AddOn. When toggled OFF, the AddOn is not visible to end users of the builder in your application.

• Icon If you want to customize the icon associated with the tile shown in the builder Content tab, you canupload an image from your local PC. Choose an image that is small in size: we recommend a 64 x 64 pixel SVG file.

• Labels

  • Title: This is the name that will be used for the tile in the builder’s Content tab (e.g. “Countdown timer”).

  • Call-to-action button: The label for the call-to-action button (e.g. “Select a Countdown Timer”), which is shown to end users on the button to configure the AddOn.

  • Placeholder text: The message shown to end users in the builder stage when the tile is first dragged and dropped into it.

With the following setup…

… you would get the following outcome:

Title for the content tile

Placeholder text and button

It displays when the AddOn is added to the editing stage and invites the user to take the next step.

AddOn selection button in content properties

When the AddOn content is selected, the same button is displayed in the content properties.

Visit our to learn more about how to configure custom and partner addons.

When to use it

This feature allows the host application to pass custom headers when it triggers a call to their services. The custom headers are added to and to calls.

For example, this could be useful for the security teams of , which would like to pass a JWT (JSON Web Token) when the user, through the file manager, triggers a call to their .

It may be also be used to protect application or customer-hosted content delivered to the editor, such as custom rows or other host app-specific content. The extra token helps the host application to apply an authentication layer to the contacted endpoints.

How it works

To activate this feature, the host application must add a specific element to the :

Please note that all custom headers will be prefixed with “X-BEE-“ identifier. For instance, in the example above, the header will be sent to the host app as X-BEE-Authorization.