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.

What are Custom Languages?

In Beefree SDK, Custom Languages allow you to accomplish two things:

• Translate the default text in the builder to your preferred language.

• Override the default text in the builder to your preferred text, even if you keep the same language.

Translating the default text in the builder is useful when you have diverse end users and you'd like to provide them with a builder experience that resonates with them.

Overriding the default text in the builder with your preferred text is useful when you want to customize the builder experience and apply your application's unique tone.

This page discusses how you can accomplish both use cases with Custom Languages. Keep in mind that you can utilize Custom Languages for overriding default text in the builder, even if you are not translating any of it to another language.

Before getting started, ensure you access and familiarize yourself with the beefree-sdk-assets-languages GitHub repository. This repository includes important JSON files for you to utilize to accomplish the steps outlined on this page.

Important: Familiarize yourself with the beefree-sdk-assets-lanaguges GitHub repository prior to continuing into the steps.

How to Use Custom Languages

This section includes two examples on how to use Custom Languages based on the above scenarios.

Example One: Overriding Default Text

In the .en-US JSON file, you'll find the following section at the beginning:

{
    "bee-common-top-bar": {
        "actions": "Actions",
        "help": "Help",
        "preview": "Preview",
        "save": "SAVE",
        "save-as-template": "Save as template",
        "show-structure": "Show structure",
    },

This JSON includes the default text in the builder, which you can see in the image of the Top bar below.

By adding the translations parameter to the beeConfig with the following configuration, the top bar can easily be customized.

const beeConfig = {
  uid: config.uid,
  container: 'bee-plugin-container',
  translations: {
    'bee-common-top-bar': {
      'actions': 'Design Management',
      'send-test': 'Test your design',
      'help': 'Need support? Contact us.',
      'preview': 'View your masterpiece',
      'save': 'Save changes',
      'save-as-template': 'Download your design',
      'show-structure': 'Show outline',
    },
  },

The following image shows how this configuration appears in the builder.

Example Two: Translating Default Text

Translating the content to another language follows the same approach. The following configuration overrides the default text with the Spanish translation.

const beeConfig = {
  uid: config.uid,
  container: 'bee-plugin-container',
  translations: {
    'bee-common-top-bar': {
      'actions': 'Acciones',
      'send-test': 'Enviar prueba',
      'help': 'Ayuda',
      'preview': 'Vista Previa',
      'save': 'GUARDAR',
      'save-as-template': 'Guardar como plantilla',
      'show-structure': 'Mostrar estructura',
    },

The following image shows the result of the configuration with the Spanish configuration.

Using a Translation URL

You can 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...
};

Additional Examples

Overriding the Help icon label in the default toolbar

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

Overriding the Rows tab label in the sidebar

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

Overriding the Preheader

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

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"
        }
    }
}

Overriding AI Writing Assistant Default Text

You can override the default text for the AI Writing Assistant. The following configuration sample includes the AI component and the various default text fields you can override.

const beeConfig = {
  uid: config.uid,
  container: 'bee-plugin-container',
  translations: {
    'bee-common-top-bar': {
      'actions': 'Design Management',
      'send-test': 'Test your design',
      'help': 'Need support? Contact us.',
      'preview': 'View your masterpiece',
      'save': 'Save changes',
      'save-as-template': 'Download your design',
      'show-structure': 'Show outline',
    },
    'mailup-bee-common-component-ai': {
      'welcome-body-title': 'Welcome to Your Design Journey',
      'welcome-body-subtitle': 'Start creating stunning emails with ease.',
      'welcome-example': 'Example: Explore our templates to get inspired.',
      'welcome-heading-title': 'Craft Your Message',
      'welcome-heading-subtitle': 'Make every word count with our tools.',
      'welcome-heading-example': 'Example: Write a compelling subject line.',
      'welcome-list-title': 'Key Features to Explore',
      'welcome-list-subtitle': 'Discover what makes our editor unique.',
      'welcome-list-example': 'Example: Drag-and-drop functionality.',
      'welcome-button-title': 'Get Started Now',
      'welcome-button-subtitle': 'Click to begin your design adventure.',
      'welcome-button-example': 'Example: Create your first email.',
    },
  },
};

Paragraph Block

The following image shows the results for the overwritten default text for AI Paragraph Assistant based on the above configuration.

Title Block

The following image shows the results for the overwritten default text for AI Title Assistant based on the above configuration.

List Block

The following image shows the results for the overwritten default text for AI List Assistant based on the above configuration.

Button Block

The following image shows the results for the overwritten default text for AI Button Assistant based on the above configuration.

Reference the Customize Prompt Suggestions section of the AI Writing Assistant page for additional customization options and details.

Confirmation Dialogs

The following section lists translations that correspond with Confirmation Dialogs for Rows, Columns, Modules, and the File Manager.

Delete Row

This list details the translations corresponding with the Delete Row Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete row

  • confirmation-dialogs.delete-row-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

• Primary Button: 🆕 Delete

  • confirmation-dialogs.delete-button

Reference the corresponding classnames for Delete Row.

Delete Column

This list details the translations corresponding with the Delete Column Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete column

  • confirmation-dialogs.delete-column-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

• Primary Button: 🆕 Delete

  • confirmation-dialogs.delete-button

Reference the corresponding classnames for Delete Column.

Delete Module

This list details the translations corresponding with the Delete Module Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete module

  • confirmation-dialogs.delete-module-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

• Primary Button: 🆕 Delete

  • confirmation-dialogs.delete-button

Reference the corresponding classnames for Delete Module.

Hide Row on Mobile with Module Already Hidden on Desktop

This list details the translations corresponding with the Hide Row on Mobile Confirmation Dialog.

Translations Variations

• Title: 🆕 Hide row

  • confirmation-dialogs.hide-row-confirmation-title

• Heading: 🆕 Are you sure you want to hide this?

  • confirmation-dialogs.hide-row-confirmation-heading

Reference the corresponding classnames for Hide Row on Mobile with Module Already Hidden on Desktop.

Remove Custom Display Condition

This list details the translations corresponding with the Remove Custom Display Condition Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete display condition

  • confirmation-dialogs.delete-display-condition-confirmation-title

Reference the corresponding classnames for Remove Custom Display Condition.

Confirm Delete Single File

This list details the translations corresponding with the Confirm Delete Single File Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete {filename}

  • confirmation-dialogs.delete-file-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

• Primary Button: 🆕 Delete

  • confirmation-dialogs.delete-button

Reference the corresponding classnames for Confirm Delete Single File.

Confirm Delete Multiple Files

This list details the translations corresponding with the Confirm Delete Multiple Files Confirmation Dialog.

Translations Variations

• Title: 🆕 Delete {count} files

  • confirmation-dialogs.delete-files-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

• Primary Button: 🆕 Delete

  • confirmation-dialogs.delete-button

Reference the corresponding classnames for Confirm Delete Multiple Files.

Confirm Update Existing File | Custom FSP

Note: This section is relevant if both the Custom FSP and ConfirmOverwriteModalEnabled are activate.

This list details the translations corresponding with the Confirm Update Existing File Confirmation Dialog.

Text Updates:

• Title: 🆕 Replace {filename}

  • confirmation-dialogs.replace-file-confirmation-title

• Secondary Button: 🆕 Keep

  • confirmation-dialogs.keep-button

Reference the corresponding classnames for Confirm Update Existing File.

Confirm Update Existing File

This list details the translations corresponding with the Update Existing File Confirmation Dialog.

Translations Variations

• Title: 🆕 File {filename} already exists

  • confirmation-dialogs.file-already-exists-title

• Heading: 🆕 Do you want to replace or keep both files?

  • confirmation-dialogs.replace-file-confirmation-heading

Reference the corresponding classnames: Not applicable.

File Manager - Move File Replace Confirmation

This list details the translations corresponding with the Move File Replace Confirmation Dialog.

Translations Variations

• Title: 🆕 File {filename} already exists

  • confirmation-dialogs.file-already-exists-title

• Heading: 🆕 Do you want to replace or keep both files?

  • confirmation-dialogs.replace-file-confirmation-heading

Reference the corresponding classnames: Not applicable.

Sample language file

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