Custom Languages

You can choose one of 20+ languages for the visual builder's UI when initializing the builder. If you want to use custom language strings, however, you will need to use a Custom Language. 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.

Using a Translation URL

You may now override the default Beefree SDK language file by providing a URL to your own translations. This is an advanced feature and will replace all languages used by the editor with the languages defined in the custom file.

var beeConfig = {
      uid: config.uid,
      ...
      translationsUrl: 'https://www.yourdomain.com/xx-XX.json',
      ...
}

Using a JSON Object

The easiest method to override specific text labels is to pass a JSON object in your beeConfig, which contains the segments of the language file you want to override.

var beeConfig = {
    uid: config.uid,
    // additional configuration properties...
    language: 'en-US',
    translations: {
        'bee-common-widget-bar': {
            content: 'MODULES',
        },
        // additional translations...
    },
    // other properties...
};

Example: overriding the Help icon label in the default toolbar

var beeConfig = {
      uid: config.uid,
      ...
      translations: {
         "bee-common-top-bar": {
           help: "Support"
         },
      }
      ...
}

Example: overriding the Rows tab label in the sidebar

var beeConfig = {
      uid: config.uid,
      ...
      translations: {
          "bee-common-widget-bar": {
            "structure": "Catalog"
          }
        },
      }
      ...
}

Example: overriding the Preheader

{
    "translations": {
        "bee-head-meta-preheader": {
            "name": "New Preheader",
            "placeholder": "New Enter Preheader"
        }
    }
}

Example: Defining or adding a translation for "email"

The following code defines a translation object where the title for "bee-settings-details" is set to "New Email Details" specifically for the "email" field.

translations: {
    "bee-settings-details": {
        "title": {
            "email": "New Email Details"
        }
    }
}

Sample language file

Check out our Github repository for starter language templates in all supported languages.