> For the complete documentation index, see [llms.txt](https://docs.beefree.io/beefree-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.beefree.io/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/builder-addons/addons/addons-configuration.md).

# AddOns Configuration

Learn more about client-side configuration for Custom and Partner AddOns.

## Adding client-side configurations for AddOns <a href="#adding-client-side-configurations-for-addons" id="adding-client-side-configurations-for-addons"></a>

Once you have initialized Beefree SDK, you can pass a series of [configuration parameters](/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/getting-started/readme/installation/configuration-parameters.md) to it.

The **AddOn section** of the configuration allows you to override the parameters you configured in the [Beefree SDK Console](https://dam.beefree.io/devmain), 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.

```javascript

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.

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

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

```javascript

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

```

{% hint style="info" %}
**Note:** The `editable` boolean has a default value of **false**. If this boolean is set to **true**, the content related to that content AddOn will become editable.
{% endhint %}

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

## 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 important 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 | <p>The text string displayed in the button that triggers the AddOn action.</p><p></p><p>It’s displayed in:</p><ul><li>The content placeholder (before any content is applied)</li><li>The content properties</li></ul>   |
| `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. **Note:** This parameter has no effect for row or mixed content AddOns. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.beefree.io/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/builder-addons/addons/addons-configuration.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.