Introduction to Brand Tone

The Apply a Brand Tone feature is an optional enhancement to the AI Writing Assistant AddOn. This feature allows your application's end users to define which brand tone they want the AI Writing Assistant to use when generating text. This definition provides OpenAI with additional brand tone context it considers when generating text to return to your end user. The result is more precise, accurate, and useable copy for your application's end users.

By configuring the AI Writing Assistant to reflect a specific brand tone, you empower end users to create designs that consistently align with their brand identity, reducing the need for manual adjustments to the AI's responses. This feature can improve workflows through organic and beneficial adoption of the AI Writing Assistant, positioning your application as a powerful tool.

To learn more about the end user experience and what it looks like to utilize this feature on the frontend, visit the Apply a Brand Tone white label end user documentation. The markdown file is also available in our white label docs repository.

Prerequisites

Prior to getting started, ensure you have the following:

• A

• The AI Writing Assistant AddOn enabled in the .

• OpenAI API Key

This section will walk you through how to add the Apply brand tone option to the integrated within your host application.

At a high-level, this section will cover how to take the following steps and successfully integrate Brand Tone:

Take the following steps to configure the AI Writing Assistant to include Brand Tone:

1. Add the ai-integration AddOn to your beeConfig object under the addOns array.

2. Add the isBrandTonesEnabled setting and set the boolean to true. This is the only required setting to enable this feature.

The following code snippet provides an example configuration for integrating the AddOn with the settings for managing Brand Tones:

You can control the different settings for the Brand Tone using the following booleans. You can use these boolean flags to allow or restrict user actions.

For example:

• Set isBrandTonesEnabled: true if you want to enable the Brand Tones feature.

• Set canDeleteBrandTones: false to prevent end users from deleting existing tones.

The following table provides details about each setting and how you can customize them.

This section explains how to add hooks for data storage and management.

Hooks allow your application to store and manage Brand Tone data. By defining the brandTone hook, you ensure communication between your system and Beefree SDK, enabling users to create and manage Brand Tones effectively.

1. Define the Hook

Add the brandTone hook to your beeConfig object. This hook handles all Brand Tone-related actions like retrieving, saving, and deleting tones.

Sample Code:

2. Implement the Handler Logic

The brandTone hook supports various actions.

The handler receives the resolve and reject methods to fulfill the Promise for the requested data or action. Use reject only for issues encountered on your application's side, such as errors in data retrieval. Always call resolve after processing the data within your system.

Alongside resolve and reject, the handler also receives an object containing action and data properties. The action determines the specific scenario in the Brand Tones flow, while the data is used to store any necessary changes.

Refer to the table below for details on when and how each action will be triggered.

• The Brand Tone feature is available only through the AI Writing Assistant AddOn with OpenAI as the provider.

• Configuring hooks for data storage is required to enable this feature successfully.

• Thoroughly test your implementation to ensure smooth communication between the SDK and your system.

Overview

The debug parameter in the beeConfig is an optional object that enables internal debugging features within the Beefree SDK editor. It's designed to help developers inspect configurations, translations, and data structures more easily during development.

How to Use

You can pass the debug parameter directly in your beeConfig object when initializing the editor. Alternatively, you can set or update it live using the loadConfig method—no need to refresh the editor.

Example (in beeConfig):

const beeConfig = {
  debug: {
    all: true,                 // Enables all debug features
    inspectJson: true,        // Shows an eye icon to inspect JSON data for rows/modules
    showTranslationKeys: true // Displays translation keys instead of localized strings
  }
};

Set it live (no refresh needed):

The debug parameter in the Beefree SDK configuration accepts the following parameters:

• all (boolean): Enables all available debug options (inspectJson and showTranslationKeys). Use this during heavy debugging sessions.

• inspectJson (boolean): Adds an eye icon in the toolbar that allows you to inspect the specific JSON used for that element. Useful for understanding how your configuration is being rendered.

The debug parameter is particularly helpful in the following scenarios:

• You're troubleshooting UI rendering issues tied to configuration JSON.

• You need to inspect what exact data is being used for rows/modules.

• You're working on translations and want to ensure correct keys are being used.

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 : 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. , , , and others);

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

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

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 Account Owner has the following additional privileges, compared to Admins:

Overview

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

Frequently used terms

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

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

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

  • Email Builder

  • Page Builder

  • Popup Builder
• 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.

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

Properties

The UID parameter:

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

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

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

It’s entirely up to you, as the host application, to determine 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.

UIDs in production are counted separately from UIDs in a . For example, if you have the following UID in both a production and development application, the unique UID will be counted twice toward your plan's allotment.

In this scenario, Beefree SDK will treat these as two distinct users, and count this UID twice—once for each environment. Reference for more information on Beefree SDK plan types and their corresponding uid allotments.

Beefree SDK is an embeddable no-code builder that gives your end users the freedom to design stunning emails, landing pages, and popups—without writing a single line of code. It’s easy to configure, intuitive to personalize, and built to scale with your needs—whether you're a startup or an enterprise. Built with both developers and end users in mind, it’s designed to integrate easily into your application, scale as your product grows, and provide a flexible, white-label design experience.

For developers, Beefree SDK is easy to work with. You can personalize the design experience by adding simple configuration parameters. Want to enable or disable a feature? Just check a box in the Developer Console, hit save, and the changes are immediately reflected on the frontend. No complicated setup required.

For your end users, Beefree SDK is an intuitive drag-and-drop editor with everything end users need to bring their creative ideas to life—whether they’re creating an email campaign, a landing page, or an attention-grabbing popup. Content blocks like titles, images, lists, tables, buttons, and more are all available right out of the box.

Beefree SDK includes the following features and more:

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

Prior to getting started with the authorization process, ensure you reference the . Reference both the and the to get the latest information.

You can install Beefree SDK using either or :

Using npm

Using Yarn

Package Details:

• TypeScript Support: Included

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.

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

If you are thinking of moving from a different content creation platform to the Beefree SDK, know that you are in good hands. Thousands of applications have been using our embeddable content builders since 2014, which means that our team has encountered a large variety of scenarios and guided customers like you through all sorts of migrations. We're here to help.

We're known for providing a high level of support, which includes everything from the detailed technical docs that you are reading on this site, , and all the way to dedicated Slack channels for . We will learn about your business with an initial consultation followed by meetings with solution engineers, and set you up with an extended proof-of-concept period that allows you to get everything ready for your migration.

If your users have created a library of designs in your legacy tool, we know one of the key questions is always: "How do I get existing designs into Beefree without having to ask my users to recreate them from scratch?"

We've got you covered here:

Your customers' existing designs will not need to be recreated from scratch in the Beefree builder. You can leverage the to take standard HTML emails and turn them into our proprietary JSON format.

For a quick introduction to the benefits of this handy tool, see .

Overview

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

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

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

Switching between workspaces might change:

• content visibility on the stage

• tiles availability in the content tab

• available previews

• outputs when saving a content

• …and more!

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

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

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

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

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

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

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

Then, you can load those workspaces at runtime:

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

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

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

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

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

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

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

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

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

Overview

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

This article will cover steps for the following processes:

• Sign up for an account in the Developer Console

• How to create an application

The first step to experimenting with and embedding Beefree SDK's visual builders is to.

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

1. Navigate to the .

   1. Complete the required fields to create an account.

   2. Once the form is complete, click Sign up to embed Beefree SDK

Once the application is activated, you'll notice Client ID appears.

1. Click Details to obtain your Client Secret and add any Application configurations you'd like to start exploring.

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.

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.

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

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 for the current user

• Updating settings for the editor’s

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

This page discusses how to configure Anthropic as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable Anthropic as your new provider.

Prior to getting started, ensure you have the following:

• A

• The AI Writing Assistant AddOn enabled in the .

This page discusses how to configure Azure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable Azure OpenAI as your new provider.

Prior to getting started, ensure you have the following:

• Beefree SDK .

• An Azure OpenAI account, API Key, URL Provider, and Deployment ID.

Development applications are available with any Beefree SDK paid plan.

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.

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. Development applications are only available on paid plans.

To create a development application, take the following steps:

1. Log in to your

Introduction

This page discusses the core concepts related to installing Beefree SDK within your application. These core concepts are the following:

• Installing the within your application.

• Understanding the Authorization process and how to successfully authenticate server-to-server.

• Adding the required Beefree SDK configuration to your application.

By the end of this guide, you'll understand the core concepts related to how you can install the package, authenticate, and get started with Beefree SDK. You'll have working a local environment set up on your machine to experiment with.

For a quick start, visit our , , and Quickstart guides, which each include complete sample code by framework.

Prior to integrating Beefree SDK, ensure you have completed the following:

1. Signed up for a account.

   1. within the Developer Console

   2. Obtained a Client ID and Client Secret for that application

2. Node.js installed.

This section covers the core concepts for installing Beefree SDK within your application and launching a local environment.

The concepts covered in this section are the following:

You can install Beefree SDK using either or :

Using npm

Using Yarn

Package Details:

• TypeScript Support: Included

• License: Apache-2.0

• Repository:

This section discusses the authentication process. It explains important concepts related to how to successfully authenticate using a server-to-server call.

The secure authentication flow requires a server-to-server call to obtain a JWT token. This process ensures your client credentials remain protected.

At a high level, the steps you need to take throughout the authentication process are the following:

1. Secure Credentials

   1. Never expose client_id or client_secret in frontend code.

   2. Store them in backend environment variables (.env).

• Call Beefree SDK’s loginV2 and include the following required parameters:

  • client_id

  • client_secret

1. Frontend Handling

   1. Fetch token only from your proxy.

   2. Extract access_token from response.

   3. Initialize SDK: new BeefreeSDK(access_token)

The following table lists and describes the required authentication parameters.

Example Implementation (Node.js)

This section discusses how to initialize Beefree SDK.

Create a container element in your HTML where the editor will render:

Beefree SDK requires a configuration object with the required container property. are also available to customize the builder, but container is the only required one for initializing Beefree SDK.

The following code snippet shows an example of this:

Alternative approach:

The following table explains the container property.

Initialize the editor with a template JSON object:

Reference the in GitHub for example templates.

The following table lists template management methods that are important for getting started.

Implement automatic token refresh to maintain uninterrupted sessions:

How to use:

1. Get a fresh token from your backend

2. Pass it to updateToken()

Enable real-time collaboration with these additional methods:

How to use:

1. Generate a unique session-id on your server

2. Call join() with the same ID for all collaborators

Q: Can I use the SDK without server-side authentication? A: While possible for testing, production implementations must use server-side auth for security.

Q: How do I customize the editor's appearance? A: The SDK supports UI customization through . While the Configuration parameters provides a high level example, there are several configuration options outlined throughout the comprehensive technical documentation.

Q: What happens when the token expires? A: When your token expires after 12 hours:

1. The editor will become unresponsive

2. You must proactively:

3. Best practice is to refresh tokens before expiration (recommended at 11 hours)

Q: Where can I find sample templates? A: Visit our for examples.

This comprehensive guide covers all aspects of Beefree SDK integration, from initial setup to advanced features.

Remember to:

• Always use server-side authentication

• Implement proper token refresh logic

• Test thoroughly before production deployment

• Monitor for Beefree SDK updates and new features

Overview

This document discusses the data flow of your API key from the moment you activate an AddOn with AI functionality within your Beefree SDK Developer Console. In this document, you learn more about Beefree SDK’s security practices, frameworks, and protocols in reference to protecting your sensitive data assets.

Data Flow Diagram

The following diagram provides a visualization of the data flow for your AI AddOn API key. In the following diagram, OpenAI is shown as an example. However, this same flow applies to other AI provides available through Beefree SDK AddOns.

These providers include:

• Azure OpenAI

• Azure Cognitive Vision

• DeepL

• Stability AI

• Anthropic

This data flow diagram illustrates the flow of data and the key components involved in securing the API key from developer input to end user interaction.

The following list shows each component within the data flow diagram along with the component’s description.

• Developer Console: This is where the developer inputs the API key, initiating the process.

• AI AddOn: This is where the developer enters their API key that they received from their AI Provider, and activates the AddOn for their host application.

• Data Store: The encrypted API key is stored securely in the data store.

The flow and management of your API key is designed to ensure its security. Security measures are implemented as soon as you enter your API key into the Developer Console. Once you enter your API key, it is immediately encrypted over . From there, the encrypted API key is securely stored in the Beefree data store. Your API key remains encrypted both at rest and during transit.

When the end user types a prompt into the AddOn, their prompt is forwarded through a proxy. The proxy receives the request, retrieves the API key, and forwards both the API key and the prompt to the AI Provider. The AI Provider processes the request and forwards the response to the proxy. The proxy then delivers the response to the AI AddOn, which displays the response in your application’s frontend to the end user.

Note: The proxy does not log any personal data and only facilitates secure communication from request to response. Throughout this process, the API key remains in the backend, preserving its security and ensuring no personal data is processed by the application. This approach is .

For additional information, we recommend you reference our and our .

The provides your application's end users with access to the the Write with AI button for text-based content blocks within the builder. When your end users click this button, a modal appears prompting them to submit a prompt to the AI Assistant. This is the portion of their journey that interacts with the provider that you configured within the . Beefree SDK offers a variety of providers as options for enabling the AI Writing Assistant AddOn for your application's end users. These providers each include their own set of benefits, and ultimately, the one you select for your configuration should be the provider with the set of benefits that most closely aligns with the goals you have for your application.

This page outlines and discusses each of the available provider options, and their corresponding set of benefits.

This section discusses each of the available providers.

is a versatile and widely recognized provider in the AI space. By integrating OpenAI into your application through the , your end users gain access to advanced generative text capabilities powered by GPT models. These models are known for their ability to create natural-sounding, coherent text across various use cases, such as marketing copy, email drafts, and creative writing. OpenAI's API also supports a high level of customization, allowing you to fine-tune the model's behavior to align with your application's goals.

This page discusses how to configure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable OpenAI as your new provider.

Prior to getting started, ensure you have the following:

• An OpenAI account and API Key.

• The AI Writing Assistant AddOn enabled in the .

Read this technical documentation to learn more about how to configure AI within your host application.

AI addresses common issues in crafting effective subject lines, pre-headers, and titles, such as vague messaging, lack of urgency, and limited personalization. By utilizing AI, users can generate compelling copy for email campaigns and landing pages. The key benefits include optimizing title formats for character count and mobile responsiveness, avoiding common mistakes, and expediting the copy creation process. This tool aims to enhance efficiency in marketing endeavors by providing a solution to errors commonly encountered in title and subject line composition. The feature is applicable to both Page and Email applications within the builder.

• Beefree SDK Superpowers or Enterprise plan subscription

Overview

Configuration parameters allow you to customize the Beefree SDK editor to match your application's requirements. This comprehensive guide covers all available parameters, from required settings to advanced customization options.

How Configuration Works

When initializing Beefree SDK, you pass a configuration object (beeConfig) that defines the editor's behavior, appearance, and functionality. The configuration is structured with high-level parameters that may contain nested sub-parameters for granular control.

const bee = new BeefreeSDK(token);
bee.start(beeConfig, template);

Complete Configuration Structure

Here's a comprehensive configuration object showing all available high-level parameters:

var beeConfig = {
    // REQUIRED PARAMETERS
    container: 'beefree-sdk-container',
    
    // CORE EDITOR SETTINGS
    language: 'en-US',
    autosave: 30,
    trackChanges: true,
    preventClose: false,
    
    // CONTENT CUSTOMIZATION
    specialLinks: [],
    mergeTags: [],
    mergeContents: [],
    
    // APPEARANCE & UI
    sidebarPosition: 'left',
    editorFonts: {},
    defaultColors: [],
    disableColorHistory: false,
    disableBaseColors: false,
    
    // TITLE BLOCK CUSTOMIZATION
    titleDefaultStyles: {},
    titleDefaultConfig: {},
    titleMaxLevel: 'h3',
    
    // WORKSPACE & LAYOUT
    workspace: {
        type: 'default',
        editSingleRow: false
    },
    
    // ADVANCED FEATURES
    commenting: false,
    commentingThreadPreview: true,
    commentingNotifications: true,
    contentDialog: {},
    defaultForm: {},
    rowDisplayConditions: {},
    rowsConfiguration: {},
    advancedPermissions: {},
    hooks: {},
    metadata: {},
    
    // PERMISSIONS & SECURITY
    roleHash: '',
    disableLinkSanitize: false,
    
    // LOADING & PERFORMANCE
    loadingSpinnerDisableOnSave: false,
    loadingSpinnerDisableOnDialog: false,
    
    // CALLBACK FUNCTIONS
    onSave: function(jsonFile, htmlFile, ampHtml, templateVersion, language) {},
    onChange: function(jsonFile, response) {},
    onSaveAsTemplate: function(jsonFile) {},
    onAutoSave: function(jsonFile) {},
    onSend: function(htmlFile) {},
    onLoad: function(jsonFile) {},
    onError: function(errorMessage) {},
    onWarning: function(alertMessage) {},
    onLoadWorkspace: function(workspace) {},
    onFilePickerInsert: function(data) {},
    
    // DEBUGGING & DEVELOPMENT
    debug: {
        all: false,
        inspectJson: false,
        showTranslationKeys: false
    },
    
    // LOCALIZATION
    translations: {}
};

Required Parameters

This parameter is mandatory for Beefree SDK initialization:

• Type: string

• Default: 'en-US'

• Description: Sets the editor interface language

Available Languages:

• Type: number | false

• Default: false

• Description: Enables automatic saving at specified intervals (in seconds). Set to false to disable.

• Type: boolean

• Default: false

• Description: Enables change tracking to monitor template modifications via the onChange callback.

• Type: boolean

• Default: false

• Description: Shows an alert when users attempt to leave the page before saving changes.

• Type: array

• Default: []

• Description: Array of custom link objects for special actions (e.g., unsubscribe links).

• Type: array

• Default: []

• Description: Array of merge tag objects for dynamic content personalization.

• Type: array

• Default: []

• Description: Array of reusable content blocks that can be inserted into templates.

• Type: string

• Default: 'left'

• Options: 'left', 'right'

• Type: object

• Default: See Font Management documentation

• Description: Customizes available fonts in the text toolbar and body settings.

• Type: array

• Default: []

• Description: Array of hex color codes for the default color palette.

• Type: boolean

• Default: false

• Description: Disables the color history feature in color pickers.

• Type: boolean

• Default: false

• Description: Disables the base color palette in color pickers.

• Type: object

• Default: {}

• Description: Default styling for title blocks at different heading levels.

• Type: object

• Default: {}

• Description: Default configuration settings for title blocks.

• Type: string

• Default: 'h3'

• Options: 'h1', 'h2', 'h3'

• Type: object

• Default: {type: 'default'}

• Description: Configures the editor workspace type and behavior.

• Type: string

• Default: 'default'

• Options: 'default', 'mixed', 'amp_only'

• Type: boolean

• Default: false

• Description: Enables single-row editing mode.

• Type: object

• Description: Mobile design mode configuration.

• Type: boolean

• Default: false

• Description: Enables collaborative commenting on content blocks and rows.

• Type: boolean

• Default: true

• Description: Shows comment preview popover on the stage.

• Type: boolean

• Default: true

• Description: Enables notifications for new comments in collaborative editing.

• Type: object

• Default: {}

• Description: Configuration for custom content dialogs to exchange data with external systems.

• Type: object

• Default: {}

• Description: Default form structure for form blocks.

• Type: object

• Default: {}

• Description: Enables conditional display logic for email rows.

• Type: object

• Default: {}

• Description: Configuration for row behavior and appearance.

• Type: object

• Default: {}

• Description: Granular permission controls for different user roles.

• Type: object

• Default: {}

• Description: Custom hooks for extending editor functionality.

• Type: object

• Default: {}

• Description: Custom metadata configuration for templates.

• Type: string

• Default: ''

• Description: Alphanumeric identifier for user roles (8-30 characters, no special characters).

• Type: boolean

• Default: false

• Description: Disables URL validation to allow merge tags in links.

• Type: object

• Default: SDK default whitelist for both body and head

• Description: Customizes the HTML Sanitizer's allowed tags, attributes, link protocols, comments, data-* attributes, and ARIA attributes. Configurable independently for the HTML content block (body) and for Custom Head HTML (head). See for the full reference and examples.

• Type: boolean

• Default: false

• Description: Controls loading spinner visibility during save operations.

• Type: boolean

• Default: false

• Description: Controls loading spinner visibility during dialog operations.

• Type: function

• Parameters: (jsonFile, htmlFile, ampHtml, templateVersion, language)

• Description: Called when user saves the template.

• Type: function

• Parameters: (jsonFile, response)

• Description: Called when template content changes (requires trackChanges: true).

• Type: function

• Parameters: (jsonFile)

• Description: Called when user saves template as a new template.

• Type: function

• Parameters: (jsonFile)

• Description: Called during automatic save operations.

• Type: function

• Parameters: (htmlFile)

• Description: Called when user triggers send action.

• Type: function

• Parameters: (jsonFile)

• Description: Called when template is loaded into the editor.

• Type: function

• Parameters: (errorMessage)

• Description: Called when errors occur in the editor.

• Type: function

• Parameters: (alertMessage)

• Description: Called when warnings are triggered.

• Type: function

• Parameters: (workspace)

• Description: Called when workspace is successfully loaded.

• Type: function

• Parameters: (data)

• Description: Called when files are inserted via file picker integration.

• Type: object

• Default: {all: false, inspectJson: false, showTranslationKeys: false}

• Description: Debug mode configuration for development.

• Type: object

• Default: {}

• Description: Custom translations to override default interface text.

• Always validate uid and roleHash on your server

• Use advancedPermissions to restrict user capabilities based on roles

• Implement proper authentication before initializing the SDK

• Set appropriate language based on user preferences

• Use preventClose: true for important editing sessions

• Provide meaningful error handling in onError callback

• Enable debug.all: true during development

• Use trackChanges: true to monitor template modifications

• Implement all relevant callbacks for complete functionality

This comprehensive configuration guide serves as your single source of truth for all Beefree SDK parameters. Most parameters are documented with their type, default value, description, and practical examples to help you customize the editor to meet your specific requirements.