> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display content with inline segmentation

> Learn how to display personalized content with inline segmentation.

export const Affinity = () => <Tooltip tip="Affinity is a preference score that Algolia calculates for each user based on their behavior. It reflects how likely a user is to prefer a specific facet-value pair and helps personalize their search results." cta="Affinity" href="/doc/guides/personalization/advanced-personalization/configure/prerequisites/consider-requirements-limits#affinities">
    affinity
  </Tooltip>;

Inline segmentation lets you display personalized content to users based on their profile affinities.
It checks the user profile against a set of conditions and renders content if the user matches the segment.

Inline segmentation is useful in these cases:

* Promoting brand stores
* Highlighting product categories
* Showcasing category-based recommendations
* Suggesting relevant search filters

## Before you begin

This guide assumes that you're familiar with [React](https://react.dev/) and [fetching a user profile](/doc/guides/personalization/advanced-personalization/implement/guides/fetching-a-user-profile#fetch-a-user-profile).

It also assumes that you've [configured the Advanced Personalization feature](/doc/guides/personalization/advanced-personalization/configure#set-up-personalization).

<Callout icon="credit-card" color="#c084fc">
  This feature isn't available on every plan.
  Refer to your [pricing plan](https://www.algolia.com/pricing) to see if it's included.
</Callout>

## Preview

<Frame caption="Storefront displaying inline segmentation for users who like Apple">
  <img src="https://mintcdn.com/algolia/aN8Lr52w2iijNnTe/images/guides/advanced-personalization/inline-segmentation.png?fit=max&auto=format&n=aN8Lr52w2iijNnTe&q=85&s=70f204c7110320eb8bdd2bd3dba5b54b" alt="Storefront displaying inline segmentation for users who like Apple" width="1886" height="606" data-path="images/guides/advanced-personalization/inline-segmentation.png" />
</Frame>

## Create a reusable segment component

First, create a reusable `PersonalizationSegment` component:

```jsx React icon=code theme={"system"}
import { usePersonalizationProfile } from "./PersonalizationProfileContext";

export function usePersonalizationSegment({ segment }) {
  const userProfile = usePersonalizationProfile();
  return segment(userProfile);
}

export function PersonalizationSegment({ segment, children, fallback = null }) {
  const userBelongsToSegment = usePersonalizationSegment({ segment });
  return userBelongsToSegment ? children : fallback;
}
```

To access the user profile, see the [`usePersonalizationProfile`](/doc/guides/personalization/advanced-personalization/implement/guides/fetching-a-user-profile#fetch-a-user-profile) React Hook.

## Implement dynamic inline segmentation

Use the `PersonalizationSegment` component to conditionally render content based on user affinities:

```jsx React icon=code theme={"system"}
function Page() {
  return (
    <PersonalizationSegment
      segment={(userProfile) => {
        return userProfile.affinities.some(
          (affinity) =>
            affinity.name === "brand" &&
            affinity.value === "Apple" &&
            affinity.score >= 10,
        );
      }}
    >
      <BannerApple />
    </PersonalizationSegment>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}
```

In this example, the `BannerApple` component only renders if the user has an <Affinity /> for the brand "Apple" with a score of 10 or more.

## Optional: add fallback content

You can provide fallback content for users who don't match the segment:

```jsx React icon=code theme={"system"}
function Page() {
  return (
    <PersonalizationSegment
      segment={(userProfile) => {
        return userProfile.affinities.some(
          (affinity) =>
            affinity.name === "brand" &&
            affinity.value === "Apple" &&
            affinity.score >= 10,
        );
      }}
      fallback={<BannerGeneric />}
    >
      <BannerApple />
    </PersonalizationSegment>
  );
}
```

## Optional: support static segment declarations

For more flexibility, you can declare segments statically.
This is useful when you need to load serialized segments from an external source.

### Define static segments

Store your static segment definitions:

```js JavaScript icon=code theme={"system"}
// segments.js
export const appleSegment = {
  conditions: [
    {
      name: "brand",
      value: "Apple",
      score: 10,
    },
  ],
};
```

### Update the segment component

Update the `PersonalizationSegment` component to handle both dynamic and static segments:

```jsx React icon=code theme={"system"}
import { usePersonalizationProfile } from "./PersonalizationProfileContext";

function checkUserBelongsToSegment(userProfile, segment) {
  return segment.conditions.every((condition) =>
    userProfile.affinities.some(
      (affinity) =>
        affinity.name === condition.name &&
        affinity.value === condition.value &&
        affinity.score >= condition.score,
    ),
  );
}

export function usePersonalizationSegment({ segment }) {
  const userProfile = usePersonalizationProfile();
  return typeof segment === "function"
    ? segment(userProfile)
    : checkUserBelongsToSegment(userProfile, segment);
}

export function PersonalizationSegment({ segment, children, fallback = null }) {
  const userBelongsToSegment = usePersonalizationSegment({ segment });
  return userBelongsToSegment ? children : fallback;
}
```

### Use static segments in your app

Now you can use static segments in your `PersonalizationSegment` component:

```jsx React icon=code theme={"system"}
import { appleSegment } from "./segments";

function Page() {
  return (
    <PersonalizationSegment segment={appleSegment}>
      <BannerApple />
    </PersonalizationSegment>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}
```