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

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 using custom CSS.

Sample Configuration

Available themes:

• light

• dark

var beeConfig = {
      uid: config.uid,
      ...
      loadingSpinnerTheme: 'dark'
      ...
}

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'],
        ...  

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.

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:

var beeConfig = {
        uid: config.uid,
        sidebarPosition: 'right',
        ...  

Overview

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.

Use cases

By setting up your Content defaults, you’ll be able to address styling and branding needs for you and your customers.

Create a more consistent UX between your application and the editor

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.

Match your customers’ branding

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.

Create a more consistent experience within the editor

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.

Define custom social blocks

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

How it works

To set up the content styles you will need to add the contentDefaults object to beeConfig:

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  ...
  contentDefaults: {
    title: { ... },
    text: { ... },
    image: { ... },
    row: { ... },
    button: { ... },
    divider: { ... },
    social: { ... },
    dynamic: { ... },
    video: { ... },
    form: { ... },
    icons: { ... },
    menu: { ... },
    spacer: { ... },
    paragraph: { ... },
    list: { ... },
    carousel: { ... },
    table: { ... },
    general: { ... },
  }
}

Available content settings

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

Title

The title content default inside the beeConfig sets default properties and styling for title elements in the editor. It includes heading levels, alignment, padding, and mobile-specific styles to ensure consistency and responsiveness across different devices.

titleDefaultConfig: {
  bold: true
},
titleDefaultStyles: {
  h1: {
    color: 'red',
    'font-size': '34px',
    'font-family': 'Arial, sans-serif',
    'font-weight': '700',
    'link-color': 'blue',
    'line-height': '120%',
    'text-align': 'center',
    'direction': 'ltr',
    'letter-spacing': 0,
  },
  h2: {
    color: 'red',
    'font-size': '24px',
    'font-family': 'Arial, sans-serif',
    'font-weight': '700',
    'link-color': 'blue',
    'line-height': '120%',
    'text-align': 'center',
    'direction': 'ltr',
    'letter-spacing': 0,
  },
  h3: {
    color: 'black',
    'font-size': '14px',
    'font-family': 'Arial, sans-serif',
    'font-weight': '700',
    'link-color': 'blue',
    'line-height': '120%',
    'text-align': 'center',
    'direction': 'ltr',
    'letter-spacing': 0,
  },
},
contentDefaults: {
  title: {
    hideContentOnMobile: true,
    defaultHeadingLevel: 'h3',
    blockOptions: {
      align: 'center',
      paddingTop: '5px',
      paddingRight: '5px',
      paddingBottom: '5px',
      paddingLeft: '5px',
    },
    mobileStyles: {
      textAlign: "center",
      fontSize: "30px",
      paddingTop: "20px",
      paddingRight: "20px",
      paddingBottom: "20px",
      paddingLeft: "20px",
    },
  }
}

Text

The text content default within the beeConfig provides a default HTML string and sets the styles for text blocks, including color, font, and line height. It also includes options for padding and visibility on mobile devices to ensure a consistent appearance across different screen sizes.

text: {
  html: 'This is default text for block...',
  styles: {
    color: "#e63c60",
    linkColor: "#e63c60",
    fontSize: '22px',
    lineHeight: "200%",
    fontFamily: "'Comic Sans MS', cursive, sans-serif",
  },
  blockOptions: {
    paddingBottom: "20px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "20px",
    hideContentOnMobile: true
  },
  mobileStyles: {
    paddingTop: "30px",
    paddingRight: "30px",
    paddingBottom: "30px",
    paddingLeft: "30px",
  },
}

Image

The image content defaults in the BeeConfig define the properties for images, including attributes like alt, src, and href, as well as styling details such as dimensions, border radius, and padding. It also specifies mobile-specific styles to ensure proper alignment and spacing on different devices.

image: {
  alt: "My Alt Label",
  href: "http://www.google.com",
  src: "https://react.semantic-ui.com/images/wireframe/white-image.png",
  width: "250px" // optional - 100% default
  borderRadius: "30px",
  blockOptions: {
    paddingBottom: "0px",
    paddingLeft: "0px",
    paddingRight: "0px",
    paddingTop: "0px",
    align: "center",     
    hideContentOnMobile: true
  },
  mobileStyles: {
    textAlign: "right",
    paddingTop: "10px",
    paddingRight: "10px",
    paddingBottom: "10px",
    paddingLeft: "10px",
  },
}

Image Parameters

Row

The row content default in the BeeConfig specifies various styling properties for rows, including background colors, vertical alignment, border radius, and spacing. It also includes options for mobile-specific styles, such as stacking and padding configurations.

  row: {
    styles: {
      backgroundColor: "red",
      contentAreaBackgroundColor: "green",
      verticalAlign: "bottom",
      columnsBorderRadius: "10px",
      columnsSpacing: "20px",
      columnsStackOnMobile: false,
      columnsReverseStackOnMobile: true,
      columnsPadding: "42px",
      columnsBackgroundColor: "yellow",
    }
  },
}

Row Parameters

The following table lists the row content default parameters and their corresponding descriptions and data types.

Button

The button content default in the BeeConfig specifies the appearance and behavior of buttons, including attributes such as label, hyperlink, width, and styles like font, color, and padding. It also defines block options for padding and alignment, as well as mobile-specific styles for responsiveness.

button: {
  label: "My New Label",
  href: "http://www.google.com ",
  width: "35%",
  styles: {
    color: "#ffffff",
    fontSize: '22px',
    fontFamily: "'Comic Sans MS', cursive, sans-serif",
    backgroundColor: "#FF819C",
    borderBottom: "0px solid transparent",
    borderLeft: "0px solid transparent",
    borderRadius: "25px",
    borderRight: "0px solid transparent",
    borderTop: "0px solid transparent",
    lineHeight: "200%",
    maxWidth: "100%",
    paddingBottom: "5px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "5px"
  },
  blockOptions: {
    paddingBottom: "20px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "20px",
    align: "center",
    hideContentOnMobile: true
  },
  mobileStyles: {
    paddingBottom: "10px",
    paddingLeft: "10px",
    paddingRight: "10px",
    paddingTop: "10px",
    textAlign: "center",
    fontSize: "40px",
  },
  hoverStyles:{
    color: "#FFFFFF"
    backgroundColor: "#16688B",
    borderBottom: "0px solid transparent",
    borderLeft: "0px solid transparent",
    borderRight: "0px solid transparent",
    borderTop: "0px solid transparent",
  }
}

Divider

The divider content default in the BeeConfig specifies the appearance of dividers, including properties such as width, line style, and alignment. It also defines block options for padding and visibility on mobile, as well as mobile-specific styles for alignment and padding.

divider: {
  width: '50%',
  line: "10px solid #BBBBBB",
  align: "right",
  blockOptions: {
    paddingBottom: "20px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "20px",
    hideContentOnMobile: true
  },
  mobileStyles: {
    align: 'left',
    paddingLeft: "10px",
    paddingRight: "10px",
  },
}

Social

The social content default in the BeeConfig specifies the display of social media icons, including their type, name, image properties, and link. It also defines the block options for alignment and padding, with specific styles for mobile devices.

social: {
  icons: [
    {
      type: 'custom',
      name: 'Facebook',
      image: {
        prefix: 'https://www.facebook.com/',
        alt: 'Facebook',
        src: `https://img.icons8.com/dusk/64/000000/facebook-new--v2.png`,
        title: 'Facebook',
        href: 'https://www.facebook.com/'
      },
      text: ''
    }
  ],
  blockOptions: {
    align: "center",
    hideContentOnMobile: true,
    paddingBottom: "10px",
    paddingLeft: "10px",
    paddingRight: "10px",
    paddingTop: "10px",
  },
  mobileStyles: {
    paddingTop: "10px",
    paddingRight: "10px",
    paddingBottom: "10px",
    paddingLeft: "10px",
    textAlign: "right",
  },
}

Dynamic

The dynamic content default in the BeeConfig specifies the block options, including padding and the ability to hide content on mobile. This ensures a consistent design by managing spacing and visibility across different devices.

dynamic: {
    blockOptions: {
      paddingBottom: "20px",
      paddingLeft: "20px",
      paddingRight: "20px",
      paddingTop: "20px",
      hideContentOnMobile: true,
    }
  }

Video

The video content default in the BeeConfig specifies block options, including padding and the ability to hide content on mobile devices, ensuring a consistent appearance across different platforms. Additionally, it defines mobile-specific styles to enhance the user experience on smaller screens.

video: {
  blockOptions: {
    paddingBottom: "20px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "20px",
    hideContentOnMobile: true,
  },
  mobileStyles: {
    paddingTop: "40px",
    paddingRight: "40px",
    paddingBottom: "40px",
    paddingLeft: "40px",
  },
}

Form

The form content default in the BeeConfig defines the structure and styling for form elements, including fonts, colors, alignments, and padding, ensuring a consistent layout across different devices. It also includes options for mobile-specific styles to improve usability on smaller screens.

form: {
  structure: {...}, // see form docs
  styles: {
    width: "100px"
    fontSize: "14px",
    fontFamily: "'Comic Sans MS', cursive, sans-serif",
    fontWeight: '700',
  },
  labelsOptions: {
    color: "#000000",
    lineHeight: "200%",
    fontWeight: "",
    fontStyle: "",
    align: "left",
    position: "top"
    letterSpacing: 1,
    minWidth: 30,
  },
  fieldsOptions: {
    color: "#000000",
    backgroundColor: "#ffffff",
    outlineColor: "#3AAEE0",
    borderRadius: "4px",
    borderTop: "1px solid transparent",
    borderRight: "1px solid transparent",
    borderBottom: "1px solid transparent",
    borderLeft: "1px solid transparent",
    paddingBottom: "5px",
    paddingLeft: "5px",
    paddingRight: "5px",
    paddingTop: "5px",
  },
  buttonsOptions: {
    color: "#ffffff",
    backgroundColor: "#3AAEE0",
    borderRadius: "4px",
    borderTop: "0px solid transparent",
    borderRight: "0px solid transparent",
    borderBottom: "0px solid transparent",
    borderLeft: "0px solid transparent",
    lineHeight: "200%",
    align: "center",
    width: "100%",
    maxWidth: "100%",
    paddingBottom: "5px",
    paddingLeft: "20px",
    paddingRight: "20px",
    paddingTop: "5px",
    marginBottom: "0px",
    margingLeft: "0px",
    marginRight: "0px",
    marginTop: "0px",
  },
  blockOptions: {
    align: "center",
    paddingBottom: "10px",
    paddingLeft: "10px",
    paddingRight: "10px",
    paddingTop: "10px",
    hideContentOnMobile: true,
    hideContentOnDesktop: false,
    backgroundColor: "#FF819C",
  },
  mobileStyles: {
    textAlign: "right",
    fontSize: "25px",
    paddingTop: "20px",
    paddingRight: "20px",
    paddingBottom: "20px",
    paddingLeft: "20px",
  },
}

Icons

The icons content default in the BeeConfig specifies the properties for displaying icon items, such as the image source, text, size, and link attributes. It also includes styles for the icon's appearance and mobile-specific configurations to ensure proper alignment and padding across devices.

icons: {
  items: [
    {
      image: "https://react.semantic-ui.com/images/wireframe/white-image.png",
      textPosition: "right",
      text: "Company name",
      alt: "Company name",
      title: "Company name",
      href: "https://www.acme.com",
      target: "_blank",
      width: "128px",
      height: "48px",
    }
  ],
  styles: {
    color: "#000000",
    fontSize: "14px",
    fontFamily: "'Comic Sans MS', cursive, sans-serif",
    fontWeight: '700',
  },
  blockOptions: {
    align: "center",
    paddingBottom: "0px",
    paddingLeft: "0px",
    paddingRight: "0px",
    paddingTop: "0px",
    hideContentOnMobile: true,
    hideContentOnDesktop: false,
    itemSpacing: "10px",
    iconHeight: "50px",
  },
  iconSpacing: {
    paddingBottom: "5px",
    paddingLeft: "5px",
    paddingRight: "5px",
    paddingTop: "5px",
  },
  mobileStyles: {
    textAlign: "right",
    fontSize: "50px",
    paddingTop: "20px",
    paddingRight: "20px",
    paddingBottom: "20px",
    paddingLeft: "20px",
  },
}

Menu

The menu content default in the BeeConfig defines the properties for menu items, including text, links, and target attributes. It also sets the styles for the menu's appearance and behavior, such as font styles, colors, spacing, and mobile-specific configurations like hamburger icon settings.

menu: {
  items: [
    {
      text: "Contact us"
      link: {
        href: "https://www.acme.com/contact-us",
        title: "Contact us",
        target: "_blank"
      }
    }
  ],
  styles: {
    color: "#000000",
    linkColor: "#0068A5",
    fontSize: "14px",
    fontFamily: "'Comic Sans MS', cursive, sans-serif",
    fontWeight: '700',
  },
  hamburger: {
    mobile: false,
    foregroundColor: "#ffffff",
    backgroundColor: "#000000",
    iconSize: "36px",
    iconType: "normal" // or "rounded"
  },
  blockOptions: {
    align: "center",
    paddingBottom: "0px",
    paddingLeft: "0px",
    paddingRight: "0px",
    paddingTop: "0px",
    hideContentOnMobile: true,
    hideContentOnDesktop: false,
  },
  itemsSpacing: {
    paddingBottom: "5px",
    paddingLeft: "5px",
    paddingRight: "5px",
    paddingTop: "5px",
  },
  mobileStyles: {
    textAlign: "right",
    fontSize: "50px",
    paddingTop: "10px",
    paddingRight: "10px",
    paddingBottom: "10px",
    paddingLeft: "10px",
  },
}

Spacer

The spacer content in the BeeConfig is used to add vertical spacing between elements in the layout. It allows for hiding the spacer on mobile devices through the hideContentOnMobile option.

spacer: {
  height: "60px",
  blockOptions: {
    hideContentOnMobile: true    
  }
}

Paragraph

The paragraph content configuration in BeeConfig specifies the default styles such as color, font size, alignment, line height, and spacing for paragraphs. It also defines block options and mobile styles to ensure consistent rendering on different devices.

paragraph: {
  styles: {
    color: '#000000',
    fontSize: '14px',
    fontFamily: 'inherit',
    fontWeight: '400',
    lineHeight: '120%',
    textAlign: 'left',
    direction: 'ltr',
    letterSpacing: '0px',
    linkColor: '#0068a5',
    paragraphSpacing: '16px',
  },
  blockOptions: {
    paddingTop: '10px',
    paddingRight: '10px',
    paddingBottom: '10px',
    paddingLeft: '10px',
  },
  mobileStyles: {
    textAlign: "right",
    fontSize: "50px",
    paddingTop: "60px",
    paddingRight: "60px",
    paddingBottom: "60px",
    paddingLeft: "60px",
  },
}

List

The list content default in BeeConfig sets the basic styling for list elements, including options like color, font size, alignment, and list type. It also ensures consistent spacing and padding across devices by defining both block options and mobile-specific styles.

list: {
  styles: {
    color: '#000000',
    fontSize: '14px',
    fontFamily: 'inherit',
    fontWeight: '400',
    lineHeight: '120%',
    textAlign: 'left',
    direction: 'ltr',
    letterSpacing: '0px',
    linkColor: '#0068a5',
    liSpacing: '0px',
    liIndent: '40px',
    listType: 'ul', // or 'ol'
    listStyleType: 'revert',
    startList: '1',
  },
  blockOptions: {
    paddingTop: '10px',
    paddingRight: '10px',
    paddingBottom: '10px',
    paddingLeft: '10px',
  },
  mobileStyles: {
    textAlign: "center",
    fontSize: "24px",
    paddingTop: "20px",
    paddingRight: "20px",
    paddingBottom: "20px",
    paddingLeft: "20px",
  },
}

Additionally, listStyleType supports the following: revert, auto, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.

Carousel

The carousel content default in BeeConfig sets the basic padding for carousel elements and provides an option to hide content on mobile devices. It also defines mobile-specific padding to ensure a consistent appearance across different screen sizes.

carousel: {
  blockOptions: {
    paddingBottom: "10px",
    paddingLeft: "10px",
    paddingRight: "10px",
    paddingTop: "10px",
    hideContentOnMobile: true,
  },
  mobileStyles: {
    paddingTop: "20px",
    paddingRight: "20px",
    paddingBottom: "20px",
    paddingLeft: "20px",
  },
}

Table

The table content default in BeeConfig specifies the initial styling and layout properties for table elements, including rows, cells, and headers. It sets text styles, colors, padding, alignment, and optional alternate row and header styles to ensure consistency across different table instances.

{
   ...
   table: {
      rows: [{
        cells: [
          {html: "new-default-text"},{html: "second text"}
        ]
      }, {
        cells: [
          {html: "third"}, {html: "last text"}
        ]
      }],
      headers: [{
        cells: [{html: "header 1"},{html: "header 2"}]
      }],
      styles: {
        color: "red",
        fontFamily: "'Merriweather', serif",
        fontWeight: "700",
        fontSize: "17px",
        textAlign: "right",
        lineHeight: "200%",
        letterSpacing: "8px",
        direction: "rtl",
        linkColor: "yellow",
        backgroundColor: "blue",
        border: "11px solid green",
        alternateRowBackgroundColor: "yellow",
        headersFontSize: "30px",
        headersFontWeight: "400",
        headersTextAlign: "center",
        headersBackgroundColor: "red",
        headersColor: "green",
      },
      blockOptions: {
        paddingBottom: "17px",
        paddingLeft: "15px",
        paddingRight: "14px",
        paddingTop: "13px",
      }
    },
}

Note: If contentDefault values for the Table module are incorrectly formatted, the following onWarning will be triggered (this applies to incorrect values for rows and headers, not all contentDefaults), and the default table will be used instead:

{code: 1730, message: 'Content defaults for [Table] module are not valid'}

If the user tries to load a template that contains an improperly structured Table (for example, if a row does not contain all of its cells), the template will not load, and the onError will be triggered.

The following code displays an example error for this scenario:

{ 
   code: 2250,
   message: 'Bump template validation error',
   detail: 'page/rows/0/columns/0/modules/0/descriptor/table/rows: improperly structured field (each row must contain the same number of cells)',   
}

General

The general content default in the BeeConfig specifies the overall styling for the email template, such as background color, content area width, and default font. These settings help maintain a consistent look and feel throughout the template.

general: {
  backgroundColor: "#efefef",
  contentAreaBackgroundColor: "#efefef",
  contentAreaWidth: "600px",
  defaultFont: "'Comic Sans MS', cursive, sans-serif",
  linkColor: "#efefef"
}

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 Custom CSS 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

December 5, 2024 Releases

Add New Social and Form | Release on December 5th

Form

Social

Add New Attributes and Title Bar | Release on December 5th

1. Button, Image, Video

2. Sidebar Title

3. Rows

November 7, 2024 Releases

Mobile Stage Mode, History, and Empty States | Released on November 7th

Changes Font Stye and Drag-and-Drop Widgets | Released on November 7th

1. Form Components

2. Social Widget

3. Icons Widget

4. Menu Widget

5. Form Widget

6. Carousel Widget

October 10, 2024 Releases

Form Edit Modal | Released on October 10th

1. Form Edit Modal - Text Inputs

2. Form Edit Modal - Required and Read Only Toggles

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.

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"])

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