Learn how to create custom targeting attributes in Builder to go beyond built-in targeting options.
Define custom attributes to tailor content delivery based on user roles, preferences, or other unique conditions for a more dynamic and personalized user experience.
- Make sure you're familiar with the basics of Targeting Content.
- You make custom targeting attributes in the Settings and apply them in the Visual Editor.
- In your code, pass custom targeting attributes to Builder’s API or set them globally using
setUserAttributes().
- Go to Space Settings.
- Under the Targeting section, click Edit button for Custom Targeting.
- Click + New Target Attribute button.
- Define targeting properties, such as
Name,Type, andEnumin the Custom targeting attributes dialogue. - Click Save.
The targeting properties:
- Name specifies the name of the custom targeting attribute.
- Type determines how values are entered. A
Stringtype provides a text box as an input, while abooleantype includes a toggle switch to selecttrueorfalse. - Enum is available only for
Stringtypes. This option replaces the text box with a dropdown menu, requiring users to select from predefined options when targeting content.
This video below shows how to create custom targeting attributes in Settings.
Target content using custom targeting attributes by setting conditions with the defined attributes.
The process is similar to targeting with built-in attributes, with custom targeting attributes included in the list of options for creating targeting conditions.
- Open the content entry you want to target.
- Click the Targeting icon at the top of the Visual Editor.
- Click + Add Target.
- Choose a targeting attribute from the dropdown and set its value based on the attribute type.
The video below covers setting up custom targeting attributes in the Visual Editor.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
isProUser: true,
userType: ["admin", "designer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example shows how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
isProUser: true,
userType: ["admin", "designer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values in a Content API request through userAttributes with the targeting conditions set in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data.
For custom targeting attributes, include the required data in your request using builder.get() or builder.getAll().
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();Alternatively, use setUserAttributes() to define targeting attributes once and apply them across multiple content requests.
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, pass the attributes as query parameters when making requests through the Content or GraphQL API.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)This example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the Visual Editor. You can also create a Section model.
For instance, you can create two versions of a page:
- One that displays the latest landing page created by the marketing team for the upcoming launch event, when
userTypeisadminormarketer. - Another that displays the regular landing page for all other users not defined in
userType.
Define as many custom targeting attributes as needed to fit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
userType: ["admin", "marketer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the Visual Editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the Visual Editor. You can also use a Section Model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
isProUser: true,
userType: ["admin", "designer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
isProUser: true,
userType: ["admin", "designer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
<script lang="ts">
import { fetchOneEntry, Content } from "@builder.io/sdk-svelte";
export async function load({ params }) {
const entry = await fetchOneEntry({
apiKey: /* YOUR PUBLIC API KEY HERE */
model: "page", // Replace with your model name
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
urlPath: params.path,
device: ['mobile']
}
});
return {
entry
};
}
</script>
<Content
model="page"
content={entry}
/>For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
<script lang="ts">
import { fetchOneEntry, Content } from "@builder.io/sdk-svelte";
export async function load({ params }) {
const entry = await fetchOneEntry({
apiKey: /* YOUR PUBLIC API KEY HERE */
model: "page", // Replace with your model name
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
urlPath: params.path,
device: ['mobile']
}
});
return {
entry
};
}
</script>
<Content
model="page"
content={entry}
/>For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
<script setup>
import { fetchOneEntry, Content } from "@builder.io/sdk-vue";
const route = useRoute()
const { data: entry } = await useAsyncData('builder-entry', () =>
fetchOneEntry({
apiKey: /* YOUR PUBLIC API KEY HERE */
model: "page", // Replace with your model name
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
urlPath: route.path,
device: ['mobile']
}
})
)
</script>
<template>
<Content
v-if="entry"
model="page"
:content="entry"
/>
</template>For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
<script setup>
import { fetchOneEntry, Content } from "@builder.io/sdk-vue"
const route = useRoute()
const { data: entry } = await useAsyncData('builder-entry', () =>
fetchOneEntry({
apiKey: /* YOUR PUBLIC API KEY HERE */
model: "page", // Replace with your model name
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
urlPath: route.path,
device: ['mobile']
}
}
)
</script>
<template>
<Content
v-if="entry"
model="page"
:content="entry"
/>
</template>For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
Content,
fetchOneEntry,
type BuilderContent,
} from '@builder.io/sdk-angular';
@Component({
selector: 'app-mycomponent',
standalone: true,
imports: [Content, CommonModule],
template: `
<!-- If content is found, render it. Otherwise show a 404 message -->
<ng-container *ngIf="content; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>
`,
})
export class MyComponent {
apiKey = 'YOUR_PUBLIC_API_KEY';
// Replace with the model name in your Builder space, e.g. "page" or "collectionHero"
model = 'YOUR_MODEL_NAME';
content: BuilderContent | null = null;
async ngOnInit() {
const urlPath = window.location.pathname || '';
const content = await fetchOneEntry({
apiKey: this.apiKey,
model: this.model,
userAttributes: {
// Built-in targeting attributes
urlPath,
// Custom attributes you want to target in your Builder editor
isProUser: true,
userType: ['admin', 'designer'],
},
});
if (!content) {
return;
}
this.content = content;
}
}
For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
Content,
fetchOneEntry,
type BuilderContent,
} from '@builder.io/sdk-angular';
@Component({
selector: 'app-mycomponent',
standalone: true,
imports: [Content, CommonModule],
template: `
<!-- If content is found, render it. Otherwise show a 404 message -->
<ng-container *ngIf="content; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>
`,
})
export class MyComponent {
content: BuilderContent | null = null;
constructor(private route: ActivatedRoute) {}
async ngOnInit() {
this.route.data.subscribe((data) => {
this.content = data;
});
}
if (!content) {
return;
}
}import type { ResolveFn } from '@angular/router';
import { fetchOneEntry } from '@builder.io/sdk-angular';
export const MyComponentResolver: ResolveFn<any> = async () => {
return fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: /* YOUR MODEL NAME */,
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
});
};For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
builder.init(/* ADD YOUR PUBLIC API KEY */);
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const builderModelName = "YOUR_MODEL_NAME";
const collectionHeroContent = await builder
.get(builderModelName, {
userAttributes: {
// built in targeting attribute
urlPath: "/" + (page?.join("/") || ""),
// custom targeting attribute
isProUser: true,
userType: ["admin", "designer"]
},
prerender: false,
})
.toPromise();
return (
<>
{/* Render the Builder page */}
<BuilderContent
model={builderModelName}
content={collectionHeroContent}
/>
</>
);
}For more examples, see Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor.
For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the fetchOneEntry() or fetchEntries() methods.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
},
})Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also use a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { builder, Content } from "@builder.io/react-sdk";
export default async function Page({ params }: { params: { page: string[] } }) {
const { page } = await params;
const entry = await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY HERE */,
model: "YOUR MODEL NAME",
userAttributes: {
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath: ,
device: ['mobile']
},
})
return (
<>
{/* Render the Builder page */}
<Content
model={"YOUR_MODEL_NAME"}
content={entry}
/>
</>
);
}For more information on different example use cases, visit Targeting Cheatsheet.
Targeting matches the values provided in a content API request through userAttributes with the targeting conditions set for your content in the Visual Editor. For built-in attributes like device or urlPath, Builder automatically extracts the necessary targeting data from your request.
For custom targeting attributes, include the required data in your request using the builder.get() or builder.getAll() methods.
const content = await builder.get('myModelName', {
userAttributes: {
//user defined attribute
user: ["admin", "designer"],
paidUser: true,
// Built in
urlPath,
device: ['mobile']
}
}).promise();You can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:
builder.setUserAttributes({
user: ["admin", "designer"],
});
const model1Content = await builder.get('Model1').promise();
const model2Content = await builder.get('Model2').promise();Alternatively, you can pass the attributes as query string parameters when making requests through the Content or GraphQL APIs.
const response = await fetch(`https://cdn.builder.io/api/v3/content/my-model?apiKey=YOUR_API_KEY&userAttributes.user=admin,designer`)The following example explains how to define custom targeting attributes in a Page model and send them as query parameters to target content based on conditions set in the visual editor. You can also create a Section model.
For example, create two versions of the page: one that displays the premium version when isProUser is true and another that displays the basic version for non-paid users.
You can define as many custom targeting attributes as needed to suit your use case.
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { builder } from '@builder.io/sdk';
@Component({
selector: 'app-mycomponent',
standalone: true,
imports: [Content, CommonModule],
template: `
<ng-container *ngIf="content; else notFound">
<builder-component
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-component>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>
`,
})
export class MyComponent {
// Replace with the model name in your Builder space, e.g. "page" or "collectionHero"
content: BuilderContent | null = null;
model: /*YOUR MODEL NAME*/
async ngOnInit() {
const urlPath = window.location.pathname || '';
const content = await builder.get(this.model, {
userAttributes: {
urlPath,
// Custom attributes you want to target in your Builder editor
isProUser: true,
userType: ['admin', 'designer'],
},
}).toPromise();
if (!content) {
return;
}
this.content = content;
}
}Targeting attributes store user input based on their type and determine how values are defined in content API requests. The API request must include the exact value to properly display the targeted content.
For example, userType with the value premium is passed to the Content API request.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
await fetchOneEntry({
apiKey: /* ADD YOUR PUBLIC API KEY */
model: /* YOUR MODEL NAME */
userAttributes: {
userType: "premium" // String
}
})The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a string type.
When making a request to the Content API, a string value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // userType is defined as "String" type
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
In the Targeting section, the userType attribute is defined as a String type.
When making a request to the Content API, a String value is passed to userType, ensuring it aligns with the type declaration from Settings.
const content = await builder.get('myModelName', {
userAttributes: {
userType: "premium" // String
}
}).promise();The targeting condition is set using the custom defined userType attribute, with premium as the expected value of type String.
You can create and use custom types with plugins like Shopify, Cloudinary, BigCommerce, Magento, and others. These plugins provide rich interfaces for inputs such as colors, forms, or products. The stored values depend on the editor and may not always be immediately clear.
For more details on stored values, see Extending the UI with custom types in the Making a Plugin.
Take your targeting a step further by scheduling your content and creating A/B tests to measure your Page or Section engagement.
