---
title: "personalize"
slug: "cloud-sdk-personalize-browser-personalize"
abstract: "The personalize function runs interactive experiences and experiments that are live in Sitecore Personalize from the browser side."
---
# personalize

|     |     |
| --- | --- |
| Type | Function |
| Import path | `@sitecore-cloudsdk/personalize/browser` |

From the browser side, runs [interactive experiences and experiments](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-personalization.html "Personalization") that are live in Sitecore Personalize. Automatically captures [UTM parameters](https://en.wikipedia.org/wiki/UTM_parameters) from the URL of the webpage where the function runs.

## Signature

```typescript
export async function personalize(
  personalizeData: PersonalizeData,
  opts?: { timeout?: number }
): Promise<unknown | null | FailedCalledFlowsResponse>
```

## Parameters

| Name | Type | Description |
| --- | --- | --- |
| `personalizeData` | [`PersonalizeData`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize/cloud-sdk-personalize-browser/interfaces/cloud-sdk-personalize-personalizedata.html "PersonalizeData") | Required.<br><br>Event and experiment data. |
| `opts` | [`object`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize/cloud-sdk-personalize-browser/functions/cloud-sdk-personalize-browser-personalize.html#UUID-3f920165-96a6-2e21-7e95-eed4136c938d_section-idm190156511677369231 "Opts properties") | Optional.<br><br>Additional personalization options. |

### `Opts` properties

| Name | Type | Description | Value |
| --- | --- | --- | --- |
| `timeout` | `integer` | Optional.<br><br>The number of milliseconds before the function times out and returns an error.<br><br>For example, for the function to time out in 10 seconds, set the value to `10000`.<br><br>Minimum: `0`. | `10000` |

## Return value

Returns the API response of the interactive experience or experiment.

## Examples

:::tab{title="Next.js"}

Example 56. Running the personalize function

:::tab{title="Next.js"}
> [!note]
> To run this function, you have to first [initialize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize/cloud-sdk-personalize-browser/functions/cloud-sdk-core-browser-cloudsdk.html "CloudSDK") the Cloud SDK.
>
> See [more examples](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize/cloud-sdk-personalize-browser/functions/interactive-personalization.html "Interactive personalization") and [other data](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize/cloud-sdk-personalize-browser/functions/cloud-sdk-personalize-personalizedata.html "PersonalizeData") you can include in the event.

Here's an example of how to use the `personalize` function:

```typescript
"use client"; // Used only in Next.js App Router
import { personalize } from "@sitecore-cloudsdk/personalize/browser";

export default function Component(){
  const runPersonalization = async () => {
    const personalizeData = {
      channel: "WEB",
      friendlyId: "running_shoes_popup_02"
    };

    const personalizeResponse = await personalize(personalizeData);
    console.log("Ran personalization.", personalizeResponse);
  };

  return (
    <div>
      <button onClick={runPersonalization}>run personalization</button>
    </div>
  );
};
```

`personalizeRes` contains the API response that the experience or experiment was configured to return.

:::

:::

:::tab{title="JSS Next.js"}

Example 57. Running the personalize function

:::tab{title="JSS Next.js"}
Here's an example of how to use the `personalize` function:

```typescript
import { useEffect } from "react";
import { personalize } from "@sitecore-cloudsdk/personalize/browser";
import {
  CdpHelper,
  useSitecoreContext,
} from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';

// ...

const SitecorePage = ({
  notFound,
  componentProps,
  layoutData,
  headLinks,
}: SitecorePageProps): JSX.Element => {
  // ...
  const {
    sitecoreContext: { route, variantId, site },
  } = useSitecoreContext();

  const language = route.itemLanguage || config.defaultLanguage;
  const pageId = route.itemId;
  const componentId = 'your_component_id';
  const scope = customScope || process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE;
  const friendlyId = CdpHelper.getComponentFriendlyId(
    pageId,
    componentId,
    language,
    scope,
  );

  // Ensure the module is initialized with CloudSDK().initialize() beforehand...

  // Run personalization:
  const personalizeRes = await personalize({
    channel: "WEB",
    friendlyId,
  });

  console.log("Personalized content:", personalizeRes);
  };
  // ...
};
```

`personalizeRes` contains the API response that the experience or experiment was configured to return.

:::

:::