AddOns Configuration

Learn how to configure Custom and Partner AddOns.

Adding client-side configurations for AddOns

Once you have initialized Beefree SDK, you can pass a series of configuration parameters to it.

The AddOn section of the configuration allows you to override the parameters you configured in the Beefree SDK Console, on a per-user basis.

For example:

• You can have an AddOn enabled at the application level, but disabled for users on a lower plan (so they have to upgrade to a higher plan in your app to get it).

• You could change the language used for the AddOn text labels depending on the language used for the builder, for that user.

• Etc.

Example

The following code displays an AddOn configuration example.

addOns: [
  {
    enabled: true,
    id: "", 
    label: 'Default title label override',
    ctaLabel: 'Default CTA label override',
    placeholder: 'Default stage placeholder override',       
  },
  {
    enabled: false,
    id: "",
  }
]

AddOns Configuration in the Client Config

The following code snippet shows an example of how to configure an AddOn of type Paragraph.

      
      addOns: [
        {
          id: "paragraph",
          editable: true,
        },
      ],
      

In the following code snippet, you can see additional examples of AddOn configurations for other content types.

      addOns: [
        {
          editable: true,
          id: "html",
        },
        {
          editable: true,
          id: "button",
        },
      ],

Supported AddOn IDs for Configuration

When configuring your code for AddOns, it's important to note that each AddOn has a specific type that is identified by its id. Below are the supported content types that can be used as AddOn IDs:

• Image: For adding and configuring images.

• HTML: For embedding custom HTML code.

• Mixed: For a combination of various content types.

• Row: To structure content in rows.

• Paragraph: For text paragraphs.

• Button: To add call-to-action buttons.

• Title: For headings and subheadings. Set the id to heading in your configuration.

• List: For ordered and unordered lists.

• Menu: For navigation menus.

• Icon: To include icons.

Using these IDs correctly when defining your AddOn configurations ensures that the correct content type is implemented within your application.

Note: The editable property is a boolean with a default value of false. If this boolean is set to true, the content related to that content AddOn will become editable.

Parameters

This section provides an overview of what each parameter does.

Understanding the Parameters

• enabled: Determines if the AddOn is available within your application. Set to false to disable the AddOn.

• id: A unique identifier for the AddOn. This is critical for distinguishing between different AddOns.

• label: A brief text that represents the AddOn’s purpose or content. It is displayed within the user interface.

• ctaLabel: Call-to-Action text encouraging the user to interact with the AddOn.

• placeholder: A short guide or prompt displayed before the AddOn content is initialized or added.

• editable: Controls whether the AddOn's content can be edited by the end user. When set to true, editing features are enabled.

Parameter	Type	Description
enabled	Boolean	When false, the AddOn content is not displayed in the Content tab.
id	Number	Identifies the AddOn by using the handle provided in the configuration form.
label	Text String	The text string displayed for the AddOn tile in the Content tab
ctaLabel	Text String	The text string displayed in the button that triggers the AddOn action. It’s displayed in: The content placeholder (before any content is applied) The content properties
placeholder	Text	Text displayed in the content placeholder to provide further information about the content.
editable	Boolean	A boolean with a default value of false. If this boolean is set to true, the content related to that content AddOn will become editable.