---
title: "Set up interactive personalization"
slug: "set-up-interactive-personalization"
abstract: "Use the Cloud SDK to show your site visitors personalized content from a live interactive experience created in Sitecore Personalize."
---
# Set up interactive personalization

You can use the Cloud SDK [`personalize`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize.html "@sitecore-cloudsdk/personalize") package to run interactive experiences[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N669e38db82af3] that are live in Sitecore Personalize. You typically run interactive experiences in components in a webpage, not necessarily on the webpage itself. Running the experience will return an API response, which contains the personalized content. You can use the API response to display content to your site visitor or take other actions, depending on your application requirements.

This walkthrough describes how to:

:::walkthrough
1. [Find the friendly ID in Sitecore Personalize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-interactive-personalization.html#find-the-friendly-id-in-sitecore-personalize)
2. [Run the experience on your site](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-interactive-personalization.html#run-the-experience-on-your-site)
3. [Verify that the experience is running](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-interactive-personalization.html#verify-that-the-experience-is-running)
:::

> [!note]
> **Before you begin**
> -   Have a live [interactive experience in Sitecore Personalize](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-interactive-experiences.html) to work with.
>
> -   In your code editor, open the root folder of your web app.
>
> -   [Install and initialize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK") the Cloud SDK and the `personalize` package.

## Find the friendly ID in Sitecore Personalize

The first step to running an interactive experience is to find its friendly ID[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N668cdaabae6a5].

To find the friendly ID:

1. In Sitecore Personalize, click **Experiences**.
2. Click the live interactive experience you want to run.
3. On the page of the experience, click **Build summary**. The friendly ID is in the **Details** pane.

    ![The friendly ID of an interactive experience.](https://doc.sitecore.com/api/markdown-image/sdk/en/developers/005/cloud-sdk/images/cdk-interactive-experience.jpg)

4. Make a note of the friendly ID. You'll use it in the next procedure to run the experience.

## Run the experience on your site

After finding the friendly ID of the experience, you update your Cloud SDK code in the source code of your web app and run the experience on your site.

::::tabs
:::tab{title="JSS Next.js"}
To run the experience:

1. In your code editor, in the source code of your web app, open one of your components, for example, `src/components/Promo.tsx`.
2. At the top of the file, import `useEffect` from `react` and the `personalize` function from the `browser` module of the `personalize` package.

    ```typescript
    import { useEffect } from "react";
    import { personalize } from "@sitecore-cloudsdk/personalize/browser";
    ```

3. In the `Default` component, on the first line of the function body, paste the following code, then save your changes:

    ```typescript
    const getPersonalizeData = async () => {
      const personalizeResponse = await personalize({
        channel: "WEB",
        friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>"
      });

      console.log("This experience is now running:", personalizeResponse);
    }

    useEffect(() => {
      getPersonalizeData();
    });
    ```

    Replace the placeholder value with the friendly ID of your experience.

    When the webpage loads, this code runs the experience and logs its API response to the console.

    > [!tip]
    > In production, we recommend you pass [more event and experiment data](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/cloud-sdk-personalize-personalizedata.html "PersonalizeData") to the `personalize` function to make sure that your web app captures rich event data.

:::
:::tab{title="Next.js"}
To run the experience:

1. In your code editor, in the source code of your web app, create a component, for example, `src/app/components/Promo.tsx`.
2. Paste the following code into `Promo.tsx`, then save your changes:

    ```typescript
    "use client";
    import { useEffect } from "react";
    import { personalize } from "@sitecore-cloudsdk/personalize/browser";

    export default function Promo(){
      return (<></>);
    }
    ```

    This code imports `useEffect` from `react` and the `personalize` function from the `browser` module of the `personalize` package.

3. Inside the default function, before the `return` statement, paste the following code, then save your changes:

    ```typescript
    const getPersonalizeData = async () => {
      const personalizeResponse = await personalize({
        channel: "WEB",
        friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>"
      });

      console.log("This experience is now running:", personalizeResponse);
    }

    useEffect(() => {
      getPersonalizeData();
    });
    ```

    Replace the placeholder value with the friendly ID of your experience.

    When the webpage loads, this code runs the experience and logs its API response to the console.

    > [!tip]
    > In production, we recommend you pass [more event and experiment data](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/cloud-sdk-personalize-personalizedata.html "PersonalizeData") to the `personalize` function to make sure that your web app captures rich event data.

:::
::::

## Verify that the experience is running

After updating your code, it's a good idea to check that the experience is running on your site.

::::tabs
:::tab{title="JSS Next.js"}
To verify that the experience is running:

1. In your terminal, enter `npm run start:production` to start your JSS Next.js app.

    > [!tip]
    > If your app fails to compile due to linting errors, consider [disabling ESLint rules](https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules).

2. In your web browser, navigate to your JSS Next.js app, typically at `http://localhost:3000`.
3. In your web browser's developer tools, on the **Console** tab, verify that you see the following log in the console:

    ```text
    This experience is now running: {<...>}
    ```

    This log contains the response that was created for this experience in Sitecore Personalize.

4. In the developer tools, on the **Network** tab, in the **Filter** field, paste the following URL: `edge-platform.sitecorecloud.io`.

    Doing this lists the network requests made to Sitecore.

5. In the list of requests, click a `POST` request with a status of `200 OK` and a name that starts with **personalize**.
6. In the request details pane, click the **Response** tab for the request.

    The API response appears. This is the response that was created for this experience in Sitecore Personalize.

:::
:::tab{title="Next.js"}
To verify that the experience is running:

1. In your terminal, enter `npm run dev` to start your Next.js app, then open the `products` page of your app in your web browser.
2. In your web browser's developer tools, on the **Console** tab, verify that you see the following log in the console:

    ```text
    This experience is now running: {<...>}
    ```

    This log contains the response that was created for this experience in Sitecore Personalize.

3. In the developer tools, on the **Network** tab, in the **Filter** field, paste the following URL: `edge-platform.sitecorecloud.io`.

    Doing this lists the network requests made to Sitecore.

4. In the list of requests, click a `POST` request with a status of `200 OK` and a name that starts with **personalize**.
5. In the request details pane, click the **Response** tab for the request.

    The API response appears. This is the response that was created for this experience in Sitecore Personalize.

:::
::::

## Next steps

You've now successfully run the experience on your site and received the API response for the experience in your web app. You can now proceed to work with the response, for example, by displaying its content on your site.

Next, you can:

- Learn more about [running personalizations](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-personalization.html "Personalization").
- Run Sitecore Personalize [web experiences](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-web-personalization.html "Set up web personalization").
- Explore the reference documentation for the [`personalize`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize.html "@sitecore-cloudsdk/personalize") package.
- Set up other Sitecore DXP capabilities, such as using [tracking](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking.html "Tracking") to capture [`VIEW`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-view-events.html "Set up VIEW events"), [`IDENTITY`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-identity-events.html "Set up IDENTITY events"), and [custom](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-custom-events.html "Set up custom events") events.

[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N669e38db82af3]: A type of personalization (experience or experiment) created in Sitecore Personalize typically by developers, and delivered to site visitors via APIs.
    
    An [interactive experience](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-interactive-experiences.html) or [interactive experiment](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-interactive-experiences.html) enables developers to create dynamic content by using APIs to access back-end systems for maximum server-side personalization. These personalizations are used to show offers or operational messages with personalized, dynamic content.

[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N668cdaabae6a5]: A [unique identifier](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/manage-experiment-details.html) that Sitecore Personalize assigns to every experience and experiment. Cloud SDK developers use the friendly ID to run a specific interactive experience or interactive experiment.