Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This feature is available on Beefree SDK paid plans only.
With Content Defaults, you can define how content looks when dragged into an email or page.
When adding new content elements through the Content tab, you may want a default style that matches one of these options:
your application’s color scheme;
your user’s branding guidelines;
the look & feel of the template used to create the message or page.
For example, here is how a button dragged into the stage looks by default:
The background color is always light blue (HEX code #3AAEE0).
The font size is always 16px.
The font is Arial, unless a different Default font was set for the template loaded in the editor.
The border radius is set at 4.
The CTA is a formally correct, but laconic “Button”.
Instead, when applying Content defaults, the button dragged by your users could look out of the box like this:
We’ve used a dark grey color (HEX code #555555), an Ubuntu font at 22px in Bold, with a border radius of 10 and a nice “READ MORE” call-to-action.
Content Defaults are part of the Configuration parameters passed to your Beefree application during startup, so you can have different sets of them for different users.
By setting up your Content defaults, you’ll be able to address styling and branding needs for you and your customers.
If your application uses dark grey for the primary CTA, then you probably would want a default button in the Beefree builders to follow that style.
If your application has brand settings that are used for your app’s UI or for assets managed in your application, you may want those to apply also to default content in the Beefree editors.
If you’ve customized how the editor looks like, either through Themes or Custom CSS, you may want default content to adhere to the same style.
Since the Social block is one of the available Content defaults, you can define what social platforms – either present in the Beefree editors or added by you – are included when a social block is added to a message or page. For example, you can have a default social block with three platforms defined in the Beefree system and a fourth, custom one (Messenger):
To set up the content styles you will need to add the contentDefaults
object to beeConfig
:
You can add all the content styles, some of them or just one. It is up to your application to create them for all the users or for a segment, as there are no related server-side settings; basically you can customize them each time the editor starts.
All the contents use the same pattern, but the object must match the content schema for the type of content (described in the following section).
Please note that the default text inside html
is required.
Additionally, listStyleType
supports the following: revert, auto, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.
Note: If content defaults are incorrectly formatted, the following onWarning will be triggered and the default table will be used instead:
If the user tries to load a template that contains a malformed Table (for example if a row in it does not contain all its cells), the template is not loaded, and the onError is triggered.
The following code displays an example error for this scenario.
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:
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:
This feature is available on Beefree SDK only.
This feature is available on Beefree SDK paid plans only.
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 using custom CSS.
Available themes:
light
dark
This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
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.
This feature is available on Beefree SDK Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
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
Please note that emoji support may be determined by the OS or browsers used. Some browsers do not support, or may display emojis incorrectly.
To display custom groups, the application must pass the groups settings in the configuration at initialization, like so:
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.
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.
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
Building upon the default tab configuration option, in Beefree SDK v3 you may also re-organize the way tabs are ordered.
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.
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.
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.
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.
For the best possible results, please follow these best practices:
Avoid using generic global styles. (e.g. *, p, input, etc.) that could propagate to the editing stage.
Use CSS selectors to select specific elements and groups (e.g. body.bee–cs h3).
Do not attempt to pass JavaScript or any other scripts via CSS.
Ensure the custom CSS URL is hosted over HTTPS.
Do not link to CSS files hosted on GitHub, or by any 3rd party.
Never style elements on the stage, since those styles will not appear in the final HTML, and therefore lead to a confusing user experience.
Please note that classnames with the --cs
suffix are reliable selectors for customCSS.
Other selectors such as the following should be avoided as much as possible:
Nested tag structure (e.g. div > div > div
)
Siblings (input + label
)
Classnames without –cs (e.g. .icons__item)
Prefixed classname selectors (e.g. div[class^="StageModuleIcons_itemRow"]
)
Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.
Classnames in CSS are identifiers used to define and apply specific styles to HTML elements. They enable developers to target elements more efficiently and apply styles across multiple elements consistently. Classnames make it easier to manage and control the appearance of web pages through styling.
Reference classnames for custom CSS.
This article lists the classnames for different buttons within the sidebar, aimed at developers seeking to customize or understand the styling applied to these components. You can use this information to more easily modify or enhance the user interface of your web application.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for buttons within the content area of the sidebar.
This section lists the Add-on sidebar widget sub-elements and classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Carousel sidebar widgets, sub-elements, and classnames.
This section lists the Dynamic sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Icons sidebar widgets, sub-elements, and classnames.
This section lists the Image sidebar widgets, sub-elements, and classnames.
This section lists the List sidebar widgets, sub-elements, and classnames.
This section lists the Menu sidebar widgets, sub-elements, and classnames.
This section lists the Paragraph sidebar widgets, sub-elements, and classnames.
This section lists the Social sidebar widgets, sub-elements, and classnames.
Social Icon Item
This section lists the classnames for buttons within the row area of the sidebar.
This table lists the classnames for buttons within the settings area of the sidebar.
Favicon item
Radiogroups in the context of our web application refer to a UI component that groups together a set of radio buttons, allowing users to select one option from multiple choices. Each radiogroup is associated with specific classnames that define the appearance and behavior of the grouped buttons within the sidebar's layout. These classnames, such as radiogroup--cs
and radiogroup-button--cs
, are crucial for ensuring consistent and functional navigation in your application's user interface.
This section will cover widget classnames for content in the sidebar. This section will list the classnames for the following sidebar tabs:
This section lists the classnames for widgets and content within the row area of the sidebar.
This section lists the classnames for widgets and content within the Row & Content area of the sidebar.
This section lists the classnames for widgets and content within the Content area of the sidebar.
This section lists the classnames for widgets and content within the Settings area of the sidebar.
Content Area Alight
This section covers classnames for the column structure widget.
This section discusses and lists the various CSS classnames relevant to the application's sidebar widgets where textual input is required. These classnames facilitate the styling and functional integration of widgets such as URLs, images, alt texts, and more, providing a comprehensive guide for developers to enhance the user interface effectively.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for widgets within the Content tab.
This section lists the classnames for widgets within the Rows tab.
This section lists the classnames for widgets within the Settings tab.
The various classnames and data-qa
attributes associated with entities within the application that feature sliders. These identifiers are crucial for styling and testing purposes, tailored to different areas like Add-On, Button, Form, and Image entities where sliders are a key component.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for sliders within the Content tab.
This section lists the classnames for sliders within the Settings tab.
This feature is available on Beefree SDK and above. If you're on the Essentials plan, for free to try this and other Core-level features.
This feature is available on Beefree SDK and above. If you're on the Core or Essentials plan, for free to try this and other Superpowers-level features.
If you're looking to hide certain UI elements, we recommend you first check if that can be accomplished with , as it may be easier to implement.
Sub-Element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-elemet | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Sub-element | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Sidebar Tab | Deprecated Classnames | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Widget | Deprecated | New Classnames |
---|
Entity | Sidebar Widget | Deprecated | New Classnames | Data-QA | Notes |
---|
Entity | Deprecated | New Classnames | Data-QA | Notes |
---|
NA |
|
|
NA |
|
|
Special links |
|
|
Link file |
|
|
Add custom special link |
|
|
Add new attribute |
|
|
Delete |
|
|
NA |
|
|
Change image | NA |
|
Delete | NA |
|
NA |
|
|
NA | NA |
|
Edit |
|
|
Delete |
|
|
Add new field |
|
|
NA |
|
|
Button |
|
|
Change image |
|
|
Apply effects |
|
|
Delete |
|
|
NA |
|
|
NA |
|
|
Special links |
|
|
Link file |
|
|
Add custom special link |
|
|
Add new attribute |
|
|
Delete |
|
|
NA |
|
|
NA |
|
|
Delete |
|
|
Link file |
|
|
NA |
|
|
Button |
|
|
Delete |
|
|
Change image |
|
|
Apply effects |
|
|
Choose image |
|
|
Change video |
|
|
Select condition |
|
|
Add condition |
|
|
Edit condition |
|
|
Open builder |
|
|
Add new |
|
|
Delete |
|
|
Add favicon |
|
|
Change favicon |
|
|
Delete |
|
|
NA | NA |
|
NA |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
List |
|
|
Form Label Options |
|
|
|
|
|
Dynamic Content |
|
|
NA |
|
|
Rows |
|
|
Form - Label |
|
|
Form - Button |
|
|
Social |
|
|
Icons |
|
|
URL |
|
|
Alt Text |
|
|
Dynamic Image > Dynamic URL |
|
|
Web page > URL |
|
|
Send email > Mail to |
|
|
Send email > Subject |
|
|
Send email > Body |
|
|
Tel > Tel |
|
|
Send SMS> Tel |
|
|
Send SMS > Message |
|
|
Attributes |
|
|
URL |
|
|
Title |
|
|
Item > Title |
|
|
Item > Alt text |
|
|
Item > URL |
|
|
Item > Image URL |
|
|
Item > Alt text |
|
|
Item > Icon Text |
|
|
Item > Title |
|
|
Field label |
|
|
Block identifier |
|
|
Row background image |
|
|
Row background video |
|
|
Row background image |
|
|
Title |
|
|
Description |
|
|
Subject |
|
|
Preheader |
|
|
Add-On (Image) |
|
|
|
| data-qa was moved from a div to the actual input element |
Button |
|
|
|
| data-qa was moved from a div to the actual input element |
Form |
|
|
|
| data-qa was moved from a div to the actual input element |
Image |
|
|
|
| data-qa was moved from a div to the actual input element |
Content Area Width |
|
|
| data-qa was moved from a div to the actual input element |
This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
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 Custom CSS feature.
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.
The properties that make up a theme are divided into sections for clarity and easy of use.
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).
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.
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).
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).
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.
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).