Translations

You have seen that entities and components texts can be easily translated directly by adding an object containing a list of languages and their translations as value. If you want to centralize all those translations into the same object in the didomiConfig and serve those everywhere by IDs, this section will explain you how to do that.

Where do I add my translations ?

A translation object needs to be added in the translations array of the didomiConfig object and contains 2 attributes to be configured properly:

window.didomiConfig = {
entities: [...],
containers: [...],
components: {...},
translations: [
{
id: "TRANSLATION_1_ID",
content: {
fr: "Contenu en Français",
en: "English Content"
}
}
]untitled:Untitled-3
};

Props

Name

Type

Description

id

String

ID of the translation. It will be used to link the translation with a text field with translation support from the entities or components object.

content

Object

Contains an object with each language as a key and its translated text as a value.

Example

Let's take an example where we need to translate an entity name and a text component content.

window.didomiConfig = {
entities: [
{
id: "purpose-social-network",
name: "TRANSLATION_PURPOSE_ID" // We assign TRANSLATION_PURPOSE_ID
}
],
containers: [...],
components: {
activeComponents: [
{
id: "section-text",
type: "text",
options: {
content: "TRANSLATION_TEXT_ID" // We assign TRANSLATION_TEXT_ID
}
}
]
},
translations: [
{
id: "TRANSLATION_PURPOSE_ID", // We create TRANSLATION_PURPOSE_ID
content: {
fr: "Réseaux sociaux",
en: "Social networks"
}
},
{
id: "TRANSLATION_TEXT_ID", // We create TRANSLATION_TEXT_ID
content: {
fr: "Un texte traduit",
en: "A translated text"
}
}
]
};

If you are using an inline configuration for the components, you can directly use the ID for all the attributes that support translation.

<didomi-text content="TRANSLATION_TEXT_ID">