DeepL

Automatically translate content for different language templates using the DeepL addOn.

The DeepL AddOn is only available for Superpowers and Enterprise plans.

MLT Automatic Bulk Translation with DeepL

The new DeepL addOn available in the Developer Console empowers your end users to translate all the translatable content within their designs using the new translate button. This feature requires that you have Multi-language templates configured for your application, and that you have a DeepL API key. Once you configure both within your host application, your end users will be able to automatically translate the translatable content within the different language versions of their designs. Also, now your end users can have up to six different language versions of their designs. Visit the Automatic Translations white label end user documentation to learn more about how this feature works for your application's end users.

The following content types qualify as translatable content:

Modules and translatable properties Header Meta information

Modules and translatable properties	Header Meta information
Button: `label` - The text displayed on the button. Paragraph: `html` - The HTML content of the paragraph. Heading/Title: `text` - The textual content of the heading or title. List: `html` - The HTML content of the list. Image: `alt` - The alternative text for the image. Video: `thumbAlt` - The alternative text for the video's thumbnail. Icon: `text`, `alt`, `title` - The textual content, alternative text, and title of the icon. Menu: `text`, `title` - The textual content and title of the menu.	Title Description Subject Preheader

Button: label - The text displayed on the button.
Paragraph: html - The HTML content of the paragraph.
Heading/Title: text - The textual content of the heading or title.
List: html - The HTML content of the list.
Image: alt - The alternative text for the image.
Video: thumbAlt - The alternative text for the video's thumbnail.
Icon: text, alt, title - The textual content, alternative text, and title of the icon.
Menu: text, title - The textual content and title of the menu.

Title
Description
Subject
Preheader

The HTML translatable property refers to the text within the HTML tags of the element itself. For the "Button" module, the translatable property is "label," which specifies the text displayed on the button. In the "Paragraph" module, the translatable property is "html," indicating the HTML content within the paragraph tags. For "Heading/Title," the property is "text," representing the textual content of the heading or title. The "List" module also uses "html," referring to the HTML content within the list tags. The "Image" module has the "alt" property, which provides alternative text for the image. In the "Video" module, "thumbAlt" denotes the alternative text for the video's thumbnail. The "Icon" module includes "text," "alt," and "title," covering the textual content, alternative text, and title of the icon, respectively. Lastly, the "Menu" module uses "text" and "title" for its textual content and title.

The following video shows a template with Heading, Paragraph, and List modules. When the Translate button is clicked, the text within the translatable properties for those modules are translated. The following section displays a JSON example with a translation in Spanish.

Example JSON Translation

Example JSON with Spanish Translation

In the following JSON, English is the primary language and Spanish is set as the translation language.

{
  "page": {
    "body": {
      "container": {
        "style": {
          "background-color": "#FFFFFF"
        }
      },
      "content": {
        "computedStyle": {
          "linkColor": "#0068A5",
          "messageBackgroundColor": "transparent",
          "messageWidth": "500px"
        },
        "style": {
          "color": "#000000",
          "font-family": "Arial, Helvetica, sans-serif"
        },
        "type": "page-properties",
        "webFonts": []
      },
      "description": "Empty template for BEE",
      "head": {
        "meta": {
          "description": "Enjoy a heartwarming moment with your furry friends while savoring your morning coffee. Learn about life's lessons and the importance of hard work together.",
          "subject": "Morning Coffee Conversations with Pets",
          "title": "Morning Coffee Conversations with Pets",
          "translations": {
            "es-ES": {
              "title": "Café matinal Conversaciones con mascotas",
              "description": "Disfrute de un momento entrañable con sus amigos peludos mientras saborea su café matutino. Aprendan juntos las lecciones de la vida y la importancia del trabajo duro.",
              "subject": "Café matinal Conversaciones con mascotas"
            }
          }
        }
      },
      "language": {
        "label": "English",
        "value": "en-US"
      },
      "rows": [
        {
          "columns": [
            {
              "grid-columns": 12,
              "modules": [
                {
                  "descriptor": {
                    "computedStyle": {
                      "hideContentOnDesktop": false,
                      "hideContentOnMobile": false
                    },
                    "heading": {
                      "prompt": "00000000-0000-0000-0000-000000000000",
                      "style": {
                        "color": "#555555",
                        "direction": "ltr",
                        "font-family": "inherit",
                        "font-size": "23px",
                        "font-weight": "700",
                        "letter-spacing": "0px",
                        "line-height": "120%",
                        "link-color": "#E01253",
                        "text-align": "center"
                      },
                      "text": "Morning Coffee Conversations with Pets",
                      "title": "h1",
                      "translations": {
                        "es-ES": {
                          "text": "Café matinal Conversaciones con mascotas"
                        }
                      }
                    },
                    "style": {
                      "padding-bottom": "0px",
                      "padding-left": "0px",
                      "padding-right": "0px",
                      "padding-top": "0px",
                      "text-align": "center",
                      "width": "100%"
                    }
                  },
                  "locked": false,
                  "type": "newsletter-modules-heading",
                  "uuid": "11111111-1111-1111-1111-111111111111"
                },
                {
                  "descriptor": {
                    "computedStyle": {
                      "align": "center",
                      "hideContentOnMobile": false
                    },
                    "divider": {
                      "style": {
                        "border-top": "1px solid #BBBBBB",
                        "width": "100%"
                      }
                    },
                    "style": {
                      "padding-bottom": "10px",
                      "padding-left": "10px",
                      "padding-right": "10px",
                      "padding-top": "10px"
                    }
                  },
                  "locked": false,
                  "type": "newsletter-modules-divider",
                  "uuid": "22222222-2222-2222-2222-222222222222"
                },
                {
                  "descriptor": {
                    "computedStyle": {
                      "hideContentOnAmp": false,
                      "hideContentOnDesktop": false,
                      "hideContentOnHtml": false,
                      "hideContentOnMobile": false
                    },
                    "paragraph": {
                      "computedStyle": {
                        "linkColor": "#0068a5",
                        "paragraphSpacing": "16px"
                      },
                      "html": "<p>Once upon a time, a man sat at his kitchen table, enjoying his morning coffee as his two dogs and one cat gathered around him. With a warm cup in hand, he began to share with his furry companions the harsh reality of life after school. \"You see,\" he explained, \"we have to work every day to earn money so we can afford simple pleasures like pizza.\"</p>\n<p>The man's pets listened intently, their eyes filled with curiosity as he continued to elaborate on the importance of hard work and dedication. \"It may seem daunting at first,\" he reassured them, \"but with perseverance and a positive attitude, we can achieve our goals.\" The dogs wagged their tails in agreement, while the cat purred softly in approval.</p>\n<p>As the morning sun streamed through the windows, casting a warm glow over the kitchen, the man smiled at his beloved pets. \"Remember,\" he said affectionately, \"life is full of challenges, but as long as we stick together and work hard, we can enjoy the simple pleasures that make it all worthwhile.\" And with that heartwarming sentiment, they continued their morning ritual of coffee and conversation, grateful for each other's company.</p>",
                      "prompt": "33333333-3333-3333-3333-333333333333",
                      "style": {
                        "color": "#000000",
                        "direction": "ltr",
                        "font-family": "inherit",
                        "font-size": "14px",
                        "font-weight": "400",
                        "letter-spacing": "0px",
                        "line-height": "120%",
                        "text-align": "left"
                      },
                      "translations": {
                        "es-ES": {
                          "html": "<p>Érase una vez un hombre sentado a la mesa de su cocina, disfrutando de su café matutino mientras sus dos perros y un gato se reunían a su alrededor. Con una taza caliente en la mano, empezó a compartir con sus peludos compañeros la dura realidad de la vida después de la escuela. \"Veréis\", explicó, \"tenemos que trabajar todos los días para ganar dinero y poder permitirnos placeres sencillos como la pizza\"</p>\n<p>Las mascotas del hombre escuchaban atentamente, con los ojos llenos de curiosidad, mientras él seguía explicando la importancia del trabajo duro y la dedicación. \"Al principio puede parecer desalentador\", les tranquilizó, \"pero con perseverancia y una actitud positiva, podemos conseguir nuestros objetivos\" Los perros movieron la cola en señal de acuerdo, mientras el gato ronroneaba suavemente en señal de aprobación.</p>\n<p>Mientras el sol de la mañana se colaba por las ventanas, arrojando un cálido resplandor sobre la cocina, el hombre sonrió a sus queridas mascotas. \"Recordad\", les dijo cariñosamente, \"la vida está llena de retos, pero mientras permanezcamos unidos y trabajemos duro, podremos disfrutar de los placeres sencillos que hacen que todo merezca la pena\" Y con ese sentimiento reconfortante, continuaron su ritual matutino de café y conversación, agradecidos por la compañía mutua.</p>"
                        }
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

How to activate

This section discusses the prerequisites and steps you need to take to get started with this feature.

Prerequisites

Ensure the Multi-language templates feature is toggled on inside of the Developer Console.
DeepL API key
Note: DeepL offers a free tier for their plans. You can obtain an API key from DeepL for free to get started with this feature.

Activate the addOn in the Developer Console

Take the following steps to activate this feature:

Log in to the Beefree SDK Developer Console.
Navigate to the application you'd like install the addOn in.
Install the DeepL addOn.
Provide the requested details.
Save your changes.

Auto Translation Configuration Parameter

Activate this feature by adding the new configuration parameter templateLanguageAutoTranslation and setting it to true.

The following code sample displays an example of the templateLanguageAutoTranslation, templateLanguage, and templateLanguages parameters.

// Configuration for the bee plugin
// Configuration for the bee plugin
var beeConfig = {
  uid: 'fakeUid123',
  container: 'bee-plugin-container',
  templateLanguageAutoTranslation: true,
  templateLanguage: {
    value: 'en-US',
    label: 'English'
  },
  templateLanguages: [
    { value: 'it-IT', label: 'Italian' },
    { value: 'fr-FR', label: 'French' },
    { value: 'es-ES', label: 'Spanish' },
    { value: 'ru-RU', label: 'Russian' },
    { value: 'el-GR', label: 'Greek' },
    { value: 'hy-AM', label: 'Armenian' }
  ]
};

If you have a custom top bar in your application, take the following additional steps:

Describe how to translate a template:
1. translateTemplate → bee.translateTemplate({ language: 'it-IT' })
Describe how to reset a translation:
1. resetTemplateTranslation → bee.resetTemplateTranslation({ language: 'it-IT' })

Translate a Template

A function to translate the template to a specified language using the Beefree SDK.

React Translate a Template example

import React from 'react'; // Importing React
import { bee } from 'bee-plugin'; // Importing the bee plugin

// Define a functional component
const TranslateTemplateButton = () => {
  // Function to translate the template to Italian
  const translateTemplate = () => {
    bee.translateTemplate({ language: 'it-IT' }); // Calling the translateTemplate function with Italian language code
  };

  // Returning a button that triggers the translateTemplate function when clicked
  return (
    <button onClick={translateTemplate}>
      Translate Template to Italian
    </button>
  );
};

export default TranslateTemplateButton; // Exporting the component

JavaScript Translate a Template example

// Function to translate the template to Italian
function translateTemplate() {
  bee.translateTemplate({ language: 'it-IT' }); // Calling the translateTemplate function with Italian language code
}

// Adding an event listener to the button with id 'translateButton'
// When the button is clicked, the translateTemplate function is triggered
document.getElementById('translateButton').addEventListener('click', translateTemplate);

HTML example

<!-- Button that will translate the template to Italian when clicked -->
<button id="translateButton">Translate Template to Italian</button>

Reset a Translation

A function to reset the translation of the template to its original state using Beefree SDK.

React Reset a Translation example

import React from 'react'; // Importing React
import { bee } from 'bee-plugin'; // Importing the bee plugin

// Define a functional component
const ResetTemplateTranslationButton = () => {
  // Function to reset the template translation to the original state
  const resetTemplateTranslation = () => {
    bee.resetTemplateTranslation({ language: 'it-IT' }); // Calling the resetTemplateTranslation function with Italian language code
  };

  // Returning a button that triggers the resetTemplateTranslation function when clicked
  return (
    <button onClick={resetTemplateTranslation}>
      Reset Template Translation
    </button>
  );
};

export default ResetTemplateTranslationButton; // Exporting the component

Reset a Translation JavaScript example

// Function to reset the template translation to the original state
function resetTemplateTranslation() {
  bee.resetTemplateTranslation({ language: 'it-IT' }); // Calling the resetTemplateTranslation function with Italian language code
}

// Adding an event listener to the button with id 'resetButton'
// When the button is clicked, the resetTemplateTranslation function is triggered
document.getElementById('resetButton').addEventListener('click', resetTemplateTranslation);

HTML example

<!-- Button that will reset the template translation when clicked -->
<button id="resetButton">Reset Template Translation</button>

Error handling

If errors occur, onWarning or onError will be triggered. If the request completes successfully there’s no direct feedback.

The following errors are returned by the backend service when something goes wrong during the translation.

Code	Message	HTTP Status	Details
6001	Unauthorized	401
6050	Generic Error	500
6100	Bad Request	400	E.g. 'sourceLanguage' and 'targetLanguage' must be defined
6150	Validation Error	400	E.g. language X is not supported
6200	Bump service error	[error returned by the Bumper]	E.g. Error while computing the fields to translate
6250	Bump service error	500	E.g. Error while applying the translation
6350	Provider service error	500	[error returned by DeepL]

PreviousInstalling Partner AddOns NextStability AI

Last updated 3 months ago