To localize content with Builder, integrate localization into the codebase to keep the app and Builder content in sync. You can choose one of two approaches:
- Inline localization
- Content entry localization
Integrating localization with Builder Data models is the same as with Page or Section models except that you don't render anything in your code for a Data model. This means that for integrating a Data model, you don't need BuilderComponent for Gen 1 or Content for Gen 2 SDKs.
For more detail on setting up localization in the Builder Data model UI, visit Localizing Data Models.
For example, given a greeting object with localized values for en-US and fr-Fr, Builder transforms it to Hello or Bonjour depending on the locale:
// orginal object with values for each locale
"greeting": {
"en-US": "Hello",
"fr-Fr": "Bonjour"
}Builder transforms the object to use the value that corresponds to the locale, as follows:
// locale=en-US
"greeting": "Hello"// locale=fr-Fr
"greeting": "Bonjour"Ideally, you want your app to dynamically adjust to the user's locale.
You can automatically determine the user’s locale based on their system settings by using the Intl.DateTimeFormat() locale and passing it into the locale option:
const res = await fetchOneEntry({
model: 'page',
apiKey,
options: {
locale: new Intl.DateTimeFormat().resolvedOptions().locale
},
userAttributes: {
urlPath: window.location.pathname,
},
});When your codebase and Builder localization are successfully integrated, you can use any Builder localization techniques.