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
Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { builder } from '@builder.io/sdk';
import { BuilderComponent, BuilderContent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export const getServerSideProps = (async ({ resolvedUrl }) => {
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: resolvedUrl,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Inline localization: resolved JSON
}).toPromise();
return { props: { content } };
}) satisfies GetServerSideProps<{ content: BuilderContent | null }>
export default function Page({ content }: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
import { fetchOneEntry, Content, BuilderContent } from '@builder.io/sdk-react'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export const getServerSideProps = (async ({ resolvedUrl }) => {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: { urlPath: resolvedUrl },
locale: 'en-FR',
})
return { props: { content } };
}) satisfies GetServerSideProps<{ content: BuilderContent | null }>
export default function Page({ content }: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (!content) return <div>404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
locale="en-FR"
/>
)
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export default async function Page({ params }) {
const path = `/${params?.slug || ''}`;
// Fetch localized content using builder.get()
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: path,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR',
}).toPromise();
if (!content) return <div>404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import { fetchOneEntry, Content } from '@builder.io/sdk-react'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export default async function Page({ params }) {
const path = `/${params?.slug || ''}`;
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: { urlPath: path },
locale: 'en-FR',
})
if (!content) return <div>Loading or 404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import React, { useState, useEffect } from 'react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export default function App() {
const [content, setContent] = useState(null);
useEffect(() => {
builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: window.location.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Inline localization: resolved JSON
}).toPromise()
.then((fetchedContent) => setContent(fetchedContent))
}, []);
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import React, { useEffect, useState } from 'react';
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export default function App() {
const [localizedContent, setLocalizedContent] = useState(null);
useEffect(() => {
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: { urlPath: pathname },
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR' , // Use your specific locale
})
.then((content) => setLocalizedContent(content))
}, []);
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={localizedContent}
locale="en-FR"
/>
);
}
Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import type { LoaderArgs } from '@remix-run/node'
import { json, useLoaderData } from '@remix-run/react'
import { fetchOneEntry, Content } from '@builder.io/sdk-react'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function loader({ request }: LoaderArgs) {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: { urlPath: new URL(request.url).pathname },
locale: 'en-FR',
})
return json({ content })
}
export default function ProductLocalizedPage() {
const { content } = useLoaderData<typeof loader>();
if (!content) return <div>404</div>
return <Content model={model} apiKey={apiKey} content={content} locale="en-FR"/>
}
Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function loader({ request }) {
const url = new URL(request.url);
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: url.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Inline localization: resolved JSON
}).toPromise();
return json({ content });
}
export default function Page() {
const { content } = useLoaderData();
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import { fetchOneEntry, Content } from '@builder.io/sdk-react'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export default async function ProductLocalized() {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: { urlPath: '/localizaed-path' },
locale: 'en-FR',
})
if (!content) return <div>404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
locale="en-FR"
/>
)
}
Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import { useLoaderData, json } from '@remix-run/react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function loader({ request }) {
const url = new URL(request.url);
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: url.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Inline localization: resolved JSON
}).toPromise();
return json({ content });
}
export default function Page() {
const { content } = useLoaderData();
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
<!-- src/routes/your-page/+page.svelte -->
<script>
import { Content } from '@builder.io/sdk-svelte';
export let data;
</script>
{#if !data.content}
<div>404</div>
{:else}
<Content
model={data.BUILDER_MODEL}
apiKey={data.BUILDER_PUBLIC_API}
content={data.content}
locale="en-FR"
/>
{/if}In your +page.js file, fetch the entry with the locale parameter:
// src/routes/your-page/+page.js
import { fetchOneEntry } from '@builder.io/sdk-svelte';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function load({ url }) {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: url.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
});
return {
content,
BUILDER_MODEL,
BUILDER_PUBLIC_API
};
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
<script>
import { onMount } from 'svelte';
import { Content, fetchOneEntry } from '@builder.io/sdk-svelte';
import { page } from '$app/stores';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
let content = null;
onMount(() => {
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: $page.url.pathname,
locale: 'en-FR'
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
})
.then((fetchedContent) => {
content = fetchedContent;
});
});
</script>
{#if !content}
<div>Loading or 404</div>
{:else}
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
{content}
locale="en-FR"
/>
{/if}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
<template>
<div v-if="!content">404</div>
<Content
v-else
:model="BUILDER_MODEL"
:api-key="BUILDER_PUBLIC_API"
:content="content"
locale="en-FR"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Content, fetchOneEntry } from '@builder.io/sdk-vue';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
const content = ref(null);
onMounted(() => {
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: window.location.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
})
.then((fetchedContent) => {
content.value = fetchedContent;
});
});
</script>Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
<!-- pages/product-localized.vue -->
<script setup lang="ts">
import { useAsyncData, useRoute } from '#app'
import { Content, fetchOneEntry } from '@builder.io/sdk-vue'
import type { BuilderContent } from '@builder.io/sdk-vue'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
const route = useRoute();
const { data: content } = await useAsyncData<BuilderContent | null>(
'localized',
() =>
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: route.path,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
})
)
</script>
<template>
<div v-if="!content">404</div>
<Content
v-else
:model="BUILDER_MODEL"
:api-key="BUILDER_PUBLIC_API"
:content="content"
locale="en-FR"
/>
</template>Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
// src/routes/your-page/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { Content, fetchOneEntry } from '@builder.io/sdk-qwik';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Server-side data loading
export const useContent = routeLoader$(async ({ url }) => {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: url.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
});
return { content };
});
export default component$(() => {
const data = useContent();
if (!data.value.content) {
return <div>Loading or 404</div>;
}
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={data.value.content}
locale="en-FR"
/>
);
});Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { fetchOneEntry, BuilderContent } from '@builder.io/sdk-angular';
@Component({
selector: 'app-root',
template: `
<div *ngIf="!content">Loading or 404</div>
<app-content
*ngIf="content"
[model]="BUILDER_MODEL"
[apiKey]="BUILDER_PUBLIC_API"
[content]="content"
locale="en-FR">
</app-content>
`,
})
export class AppComponent implements OnInit {
BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
content: BuilderContent | null = null;
constructor(private location: Location) {}
ngOnInit() {
fetchOneEntry({
model: this.BUILDER_MODEL,
apiKey: this.BUILDER_PUBLIC_API,
userAttributes: {
urlPath: this.location.path(),
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
})
.then(content => this.content = content)
}
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { BuilderContent } from '@builder.io/sdk-angular';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
@Component({
selector: 'app-root',
template: `
<div *ngIf="!content">404</div>
<app-content
*ngIf="content"
[model]="BUILDER_MODEL"
[apiKey]="BUILDER_PUBLIC_API"
[content]="content"
locale="en-FR"
>
</app-content>
`,
})
export class AppComponent implements OnInit, OnDestroy {
BUILDER_MODEL = BUILDER_MODEL;
BUILDER_PUBLIC_API = BUILDER_PUBLIC_API;
content: BuilderContent | null = null;
private subscription: Subscription = new Subscription();
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.subscription.add(
this.activatedRoute.data.subscribe((data: any) => {
this.content = data.content;
})
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Resolver to fetch the data from the server:
// app.resolver.ts
import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
import { fetchOneEntry } from '@builder.io/sdk-angular';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export const appResolver: ResolveFn<any> = (
route: ActivatedRouteSnapshot
) => {
const urlPath = `/${route.url.join('/')}`;
return fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
});
};Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements for each locale, such as text or images.
When using the Content API, set the locale parameter when calling builder.get() to return the entry with localized values resolved in the response. The API processes the localization and returns content ready for rendering. Pass the locale as a prop to the <BuilderComponent> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to render.
The following example shows fetching and rendering inline-localized content:
import React from 'react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function getServerData({ location }) {
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: location.pathname,
},
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Inline localization: resolved JSON
}).toPromise();
return {
props: { content }
};
}
export default function App({ serverData }) {
const { content } = serverData;
if (!content) return <div>404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
locale="en-FR"
/>
);
}Use inline localization to manage locale-specific content within a single entry by localizing individual fields. This approach maintains consistency across entries while customizing specific elements, such as text or images, for each locale.
When using the Content API, set the locale parameter at the root level when calling fetchOneEntry() to return the entry with localized values resolved in the response. Pass the locale as a prop to the <Content> component to provide component-level context for rendering the correct localized content.
The locale value is a string, such as "en-FR", that specifies which localized version of the content to resolve.
The following example shows fetching and rendering inline-localized content:
import React from 'react';
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function getServerData({ location }) {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: location.pathname,
},
locale: 'en-FR'
});
return {
props: { content }
};
}
export default function App({ serverData }) {
const { content } = serverData;
if (!content) return <div>404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
locale="en-FR"
/>
);
}- For inline localization, set the
localein theoptionsobject when callingbuilder.get()to return content with localized fields in the response. - Additionally, provide the
localeas a prop to theBuilderComponentto provide component-level context so that the Visual Editor and runtime display the correct localized content. However, this step isn't required for Data models. - The
localeproperty is a string that specifies the locale for rendering the content, in this example,"en-FR".
// app.component.ts
import { Component, OnInit } from '@angular/core';
import {builderComponent, BuilderContent} from "@builder.io/angular"
@Component({
selector: 'app-root',
template: `
<builder-component
[model]="modelName"
[apiKey]="apiKey"
[content]="localizedContent"
locale="en-FR"
/>
</app-content>
`,
})
export class AppComponent implements OnInit {
modelName = 'ADD YOUR MODEL NAME';
apiKey = 'YOUR PUBLIC API KEY HERE';
localizedContent: BuilderContent | null;
ngOnInit() {
builder.get(modelName, {
model: this.modelName,
userAttributes: { urlPath: this.pathname },
options: { locale: 'en-FR' },
})
.then(content => this.localizedContent = content)
}
}
Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { builder } from '@builder.io/sdk';
import { BuilderComponent, BuilderContent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export const getServerSideProps = (async ({ resolvedUrl }) => {
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: resolvedUrl,
},
}).toPromise();
return { props: { content } };
}) satisfies GetServerSideProps<{ content: BuilderContent | null }>
export default function Page({ content }: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// pages/your-page.js
import React from 'react';
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { Content, fetchOneEntry, BuilderContent } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export const getServerSideProps = (async ({ resolvedUrl }) => {
const localizedContent = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: resolvedUrl,
locale: 'en-FR' // Add locale to userAttributes for content targeting
},
});
return {
props: {
localizedContent
}
};
}) satisfies GetServerSideProps<{ localizedContent: BuilderContent | null }>;
export default function Page({ localizedContent }: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (!localizedContent) {
return <div>Content not found</div>;
}
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={localizedContent}
/>
);
}Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export default async function Page({ params }) {
const path = `/${params?.slug || ''}`;
// Fetch localized content using builder.get()
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: path,
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR',
},
}).toPromise();
if (!content) return <div>404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export default async function Page({ params }) {
const path = `/${params?.slug || ''}`;
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: path,
locale: 'en-FR' // Add locale here
},
});
if (!content) return <div> 404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
/>
);
}Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import React, { useState, useEffect } from 'react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export default function App() {
const [content, setContent] = useState(null);
useEffect(() => {
builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: window.location.pathname,
locale: 'en-FR'
},
}).toPromise()
.then((fetchedContent) => setContent(fetchedContent))
}, []);
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import React, { useEffect, useState } from 'react';
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export default function App() {
const [localizedContent, setLocalizedContent] = useState(null);
useEffect(() => {
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: pathname,
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR' , // Use your specific locale
},
})
.then((content) => setLocalizedContent(content))
}, []);
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={localizedContent}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// app/routes/your-page.jsx
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function loader({ request }) {
const url = new URL(request.url);
const pathname = url.pathname;
// Fetch localized content on the server
const localizedContent = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: pathname,
locale: 'en-FR' // Add locale here
},
});
return json({
localizedContent
});
}
export default function YourPage() {
const { localizedContent } = useLoaderData();
return (
<Content
model="your-model-name"
apiKey={process.env.BUILDER_PUBLIC_API_KEY}
content={localizedContent}
/>
);
}Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function loader({ request }) {
const url = new URL(request.url);
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: url.pathname,
locale: 'en-FR'
},
}).toPromise();
return json({ content });
}
export default function Page() {
const { content } = useLoaderData();
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// app/routes/your-page.jsx
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function loader({ request }) {
const url = new URL(request.url);
const pathname = url.pathname;
// Fetch localized content on the server
const localizedContent = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: pathname,
locale: 'en-FR' // Add locale to userAttributes for content targeting
},
});
return json({
localizedContent
});
}
export default function YourPage() {
const { localizedContent } = useLoaderData();
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={localizedContent}
/>
);
}Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import { useLoaderData, json } from '@remix-run/react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function loader({ request }) {
const url = new URL(request.url);
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: url.pathname,
locale: 'en-FR'
},
}).toPromise();
return json({ content });
}
export default function Page() {
const { content } = useLoaderData();
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example shows fetching and rendering a fully localized content entry using content entry localization:
<!-- src/routes/your-page/+page.svelte -->
<script>
import { Content } from '@builder.io/sdk-svelte';
export let data;
</script>
{#if !data.content}
<div>404</div>
{:else}
<Content
model={data.BUILDER_MODEL}
apiKey={data.BUILDER_PUBLIC_API}
content={data.content}
/>
{/if}In your +page.js file, fetch the entry and pass the locale:
// src/routes/your-page/+page.js
import { fetchOneEntry } from '@builder.io/sdk-svelte';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function load({ url }) {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: url.pathname,
locale: 'en-FR', // Use your specific locale
},
});
return {
content,
BUILDER_MODEL,
BUILDER_PUBLIC_API
};
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
<script>
import { onMount } from 'svelte';
import { Content, fetchOneEntry } from '@builder.io/sdk-svelte';
let localizedContent = null;
const modelName = 'your-model-name';
const apiKey = 'YOUR_PUBLIC_API_KEY';
onMount(() => {
fetchOneEntry({
model: modelName,
apiKey: apiKey,
userAttributes: {
urlPath: window.location.pathname,
locale: 'en-FR' // Use your specific locale
},
})
.then((content) => {
localizedContent = content;
});
});
</script>
<Content
model={modelName}
apiKey={apiKey}
content={localizedContent}
locale="en-FR"
/>Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
<template>
<div v-if="!content">404</div>
<Content
v-else
:model="BUILDER_MODEL"
:api-key="BUILDER_PUBLIC_API"
:content="content"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Content, fetchOneEntry } from '@builder.io/sdk-vue';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
const content = ref(null);
onMounted(() => {
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: window.location.pathname,
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
},
})
.then((fetchedContent) => {
content.value = fetchedContent;
});
});
</script>Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
<!-- pages/product-localized.vue -->
<script setup lang="ts">
import { useAsyncData, useRoute } from '#app'
import { Content, fetchOneEntry } from '@builder.io/sdk-vue'
import type { BuilderContent } from '@builder.io/sdk-vue'
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
const route = useRoute();
const { data: content } = await useAsyncData<BuilderContent | null>(
'localized',
() =>
fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: route.path,
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
},
})
)
</script>
<template>
<div v-if="!content">404</div>
<Content
v-else
:model="BUILDER_MODEL"
:api-key="BUILDER_PUBLIC_API"
:content="content"
/>
</template>Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// src/routes/your-page/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { Content, fetchOneEntry } from '@builder.io/sdk-qwik';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Server-side data loading
export const useContent = routeLoader$(async ({ url }) => {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: url.pathname,
locale: 'en-FR'
},
});
return { content };
});
export default component$(() => {
const data = useContent();
if (!data.value.content) {
return <div>Loading or 404</div>;
}
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={data.value.content}
/>
);
});Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { fetchOneEntry, BuilderContent } from '@builder.io/sdk-angular';
@Component({
selector: 'app-root',
template: `
<div *ngIf="!content">Loading or 404</div>
<app-content
*ngIf="content"
[model]="BUILDER_MODEL"
[apiKey]="BUILDER_PUBLIC_API"
[content]="content"
>
</app-content>
`,
})
export class AppComponent implements OnInit {
BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
content: BuilderContent | null = null;
constructor(private location: Location) {}
ngOnInit() {
fetchOneEntry({
model: this.BUILDER_MODEL,
apiKey: this.BUILDER_PUBLIC_API,
userAttributes: {
urlPath: this.location.path(),
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
},
})
.then(content => this.content = content)
}
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { BuilderContent } from '@builder.io/sdk-angular';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
@Component({
selector: 'app-root',
template: `
<div *ngIf="!content">404</div>
<app-content
*ngIf="content"
[model]="BUILDER_MODEL"
[apiKey]="BUILDER_PUBLIC_API"
[content]="content"
>
</app-content>
`,
})
export class AppComponent implements OnInit, OnDestroy {
BUILDER_MODEL = BUILDER_MODEL;
BUILDER_PUBLIC_API = BUILDER_PUBLIC_API;
content: BuilderContent | null = null;
private subscription: Subscription = new Subscription();
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.subscription.add(
this.activatedRoute.data.subscribe((data: any) => {
this.content = data.content;
})
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Resolver to fetch the data from the server:
// app.resolver.ts
import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
import { fetchOneEntry } from '@builder.io/sdk-angular';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export const appResolver: ResolveFn<any> = (
route: ActivatedRouteSnapshot
) => {
const urlPath = `/${route.url.join('/')}`;
return fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath,
// see https://www.builder.io/c/docs/add-remove-locales.
locale: 'en-FR', // Use your specific locale
},
});
};Use Whole-content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter when calling builder.get() to fetch the localized entry that matches the targeting rules.
The locale value is a string, such as "en-FR", that specifies which localized entry to render.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import React from 'react';
import { builder } from '@builder.io/sdk';
import { BuilderComponent } from '@builder.io/react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
// Initialize Builder
builder.init(BUILDER_PUBLIC_API);
export async function getServerData({ location }) {
const content = await builder.get(BUILDER_MODEL, {
userAttributes: {
urlPath: location.pathname,
locale: 'en-FR'
},
}).toPromise();
return {
props: { content }
};
}
export default function App({ serverData }) {
const { content } = serverData;
if (!content) return <div>Loading or 404</div>
return (
<BuilderComponent
model={BUILDER_MODEL}
content={content}
/>
);
}Use content entry localization to manage separate entries for each locale. This approach returns a fully localized entry by targeting the locale as a user attribute, rather than resolving individual fields at runtime.
When using the Content API, set the locale as a targeting attribute in the userAttributes parameter to fetch the localized entry that matches your targeting rules. For example, in fetchOneEntry(), include the locale in the userAttributes parameter.
The locale value is a string, such as "en-FR", that specifies which localized entry to return.
The following example fetching and rendering a fully localized content entry using Content entry localization:
import React from 'react';
import { Content, fetchOneEntry } from '@builder.io/sdk-react';
const BUILDER_MODEL = /* ADD YOUR MODEL NAME */;
const BUILDER_PUBLIC_API = /* YOUR PUBLIC API KEY HERE */;
export async function getServerData({ location }) {
const content = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API,
userAttributes: {
urlPath: location.pathname,
locale: 'en-FR'
},
});
return {
props: { content }
};
}
export default function App({ serverData }) {
const { content } = serverData;
if (!content) return <div>404</div>
return (
<Content
model={BUILDER_MODEL}
apiKey={BUILDER_PUBLIC_API}
content={content}
/>
);
}The following example defines a route for the /my-page endpoint. When a user navigates to this endpoint, the app makes a request to the Builder API to fetch the HTML content for the specified URL, req.url.
To retrieve the localized content, the code sets:
- the
localequery parameter in the request URL to the desired locale value,myLocale - the
userAttributes.localequery parameter to the same value.
These query parameters allow Builder to know which locale to use when resolving any localized values in the content.
// my-app.js
app.get("/my-page", async (req, res) => {
const url = new URL('https://cdn.builder.io/api/v1/html/${modelName}')
url.searchParams.set('apiKey', apiKey);
url.searchParams.set('url', req.url);
// myLocale can be any locale that you've added,
// visit https://www.builder.io/c/docs/add-remove-locales.
url.searchParams.set('locale', myLocale);
url.searchParams.set('userAttributes.locale', myLocale);
const { data } = await fetch(url).then((res) => res.json());
// Use the following for Pages and Sections. It is not
// needed for Data models.
res.send(`
<html>
<head>
<!-- Your normal head contents -->
</head>
<body>
${data.html}
</body>
</html>
`);
});
This code snippet localizes the entire page by passing the locale and userAttributes.locale parameters in the URL query string when fetching the page content from the Builder API.
This tells Builder to return the content with the appropriate localized values based on the specified locale.
The following is an example of specifying a locale in the class and then using the locale in the template:
// src/app/my-component/my.component.ts
export class MyComponent {
options = {
// myLocale can be any locale that you've added,
// see https://www.builder.io/c/docs/add-remove-locales.
userAttributes: { locale: myLocale },
locale: myLocale
};
}In the MyComponent class, define the options object with userAttributes and locale properties:
- The
userAttributesproperty is an object that contains thelocaleproperty with the value ofmyLocale. - The
localeproperty is also set tomyLocale.myLocalecan be any locale that you have added to your Builder account.
// src/app/my-component/my.component.html
<builder-component
[options]="options"
model="page"
locale="myLocale"
>
</builder-component>In the MyComponent template, use the builder-component element with a model attribute set to page and the options attribute is set to the options object, defined in the class.
With this configuration, when the component is rendered, Builder uses the options object to fetch the content for the page model with the specified myLocale locale. The userAttributes property in the options object is used to identify the current user's locale.
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: /* YOUR PUBLIC API KEY */,
locale: new Intl.DateTimeFormat().resolvedOptions().locale
userAttributes: {
urlPath: window.location.pathname,
},
});You may encounter "[object Object]" displaying instead of your localized text content. This typically occurs when localized fields are not properly resolved.
To solve this issue:
- When using inline localization, ensure you are passing the
localeinto both the API call and the component. - If using the Web Components API, pass locale information into the
optionsattribute rather than alocaleattribute, as shown below.
<builder-component
model="page"
api-key="your-api-key"
options='{"locale": "fr-CA"}'>
</builder-component>- If dynamically setting the locale with
setUserAttributes(), ensure the code calling the function is defined before Builder scripts are loaded. - Update your Builder SDK version.
When your codebase and Builder localization are successfully integrated, you can use any Builder localization techniques.
