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.
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
You can load the configuration changes via a new instance event. Here’s an example:
Discover the configuration parameters within Beefree SDK.
Once you have initialized your Beefree application, you can pass a series of configuration parameters to it.
The following code displays an example of a default configuration:
The following table provides a description of the parameters.
The following table provides descriptions of the events and methods:
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 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.
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.
Parameter | Description | Required | Default |
---|---|---|---|
Events and Methods | Description | Required | Default |
---|---|---|---|
Here is an overview of the different workspaces and their differences. Please for more information on using AMP in Beefree SDK.
default | mixed | amp_only | html_only |
---|
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:
trackChanges
Track message changes in the editor via the “onChange” callback. See “Tracking message changes” for further details.
No
false
specialLinks
An array of custom links that may be used in the message (e.g. unsubscribe). See “extending the editor” for further details.
No
[]
mergeTags
An array of merge tags that may be used in the message (e.g. first name of the recipient). See “extending the editor” for further details.
No
[]
mergeContents
An array of content elements that may be used in the message (e.g. small blocks of HTML). See “extending the editor” for further details.
No
[]
preventClose
Whether an alert should be shown when the user attempts to leave the page before saving.
No
false
editorFonts
Customize the list of available fonts in the editor’s text toolbar and the BODY settings panel. See “Font management” for further details.
No
See “Font management” for the default object.
roleHash
Identifies the user role:
Minimum length is 8, maximum is 30
Alphanumerical string only: No whitespaces, no special characters such as “_” and “-“
See “Roles and permissions” for further details.
No
""
rowDisplayConditions
Allows for conditional statements in email messages. See “Display Conditions” for further details.
No
{}
workspace
Configure the initial workspace for loading the editor. Currently used for AMP content visibility. See “Workspaces” for further details.
No
{type : 'default'}
contentDialog
Allows to exchange data with BEE Plugin using a UI layer you control. See the “Content Dialog” page for the complete reference.
No
{}
defaultForm
This should contain a structure
object with the form data.
See “Passing forms to the builder” for further details.
No
{}
commenting
Enables commenting on content blocks and rows. See Commenting for further details.
No
false
commentingThreadPreview
Enables a pop-over preview on the stage for comments.
No
true
commentingNotifications
Enables notifications of new comments in co-editing.
No
true
disableLinkSanitize
Disables link validation for URLs, including telephone number or SMS to enable merge content use.
No
false
loadingSpinnerDisableOnSave
Controls the visibility of the builder in a loading state.
No
false
loadingSpinnerDisableOnDialog
Controls the visibility of the builder in a loading state.
No
false
Stage message | HTML content | HTML & AMP content | HTML & AMP content | HTML content |
Content tiles | HTML content tiles | HTML & AMP content tiles | HTML & AMP content tiles | HTML content |
AMP sidebar properties | No | Yes | Yes | No |
Available in preview | HTML content | HTML & AMP content | HTML & AMP content | HTML content |
onSave callback files | HTML | HTML & AMP | HTML & AMP | HTML |
Loading a template with AMP content | The onWarning is triggered | Template loads | Template loads | Template loads |
Loading a template with HTML content only | Template loads | Template loads | Template loads | Template loads |
Availability of the hide on AMP/HTML property | Not available | Yes | Yes | Yes |
Behavior for hidden for HTML/AMP content | The onWarning is triggered | Both are visible | Only “hidden for HTML” content is visible | Only “hidden for AMP” content is visible |
uid
An alphanumeric string that identifies the user and allows the plugin to load resources for that user (e.g. images).
Min length: 3 characters
Can contain letters from a to z (uppercase or lowercase), numbers and the special characters _ (underscore) and – (dash)
It is a string and not a numeric value
It uniquely identifies a user of the Plugin. When we say “uniquely”, we mean that:
It will be counted as a unique user for monthly billing purposes.
Images (and other files) used by the user when creating and editing messages will be associated with it and not visible to other users (when using the default storage).
Yes
container
Identifies the id of div element that contains BEE Plugin
Yes
language
4-letter language identifier (e.g. “en-US”, ISO 639-1 format).
Available Languages
No
"en-US"
English: | en-US |
---|---|
Spanish:
es-ES
French:
fr-FR
Italian:
it-IT
Portuguese:
pt-BR
Indonesian:
id-ID
Japanese:
ja-JP
Chinese:
zh-CN
Traditional Chinese:
zh-HK
German:
de-DE
Danish:
da-DK
Swedish:
sv-SE
Polish:
pl-PL
Hungarian:
hu-HU
Russian:
ru-RU
Korean:
ko-KR
Dutch:
nl-NL
Finnish:
fi-FI
Czech:
cs-CZ
Romanian:
ro-RO
Norwegian (Bokmål):
nb-NO
Slovenian:
sl-SI