---
title: "Integrate a React app using the Engage SDK package"
slug: "integrate-engage-sdk-react"
abstract: "How to integrate a React app with Sitecore CDP by installing the Engage SDK npm package."
---
# Integrate a React app using the Engage SDK package

> [!note]
> If your organization has a [JSS Next.js](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/javascript-services-sdk--jss--for-next-js.html) or a JSS Angular application connected to SitecoreAI, implement Sitecore CDP\-related functionality on your SitecoreAI site using the [Sitecore Cloud SDK](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/sitecore-cloud-sdk-for-javascript.html) instead. See also a [comparison of the Cloud SDK and the Engage SDK](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/en/cloud-sdk-comparison-charts.html).

This topic explains how to integrate your React app using the Engage SDK package.

This walkthrough describes how to:

> [!note]
> **Before you begin**
> -   [Collect the required details](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/collect-required-details.html "Collect required details") about your Sitecore CDP instance.
>
> -   Have a React app to integrate.

## Install and initialize @sitecore/engage

The first step to integrating your app is to install and initialize the `@sitecore/engage` package.

To install and initialize the package:

1. In your terminal, open the root folder of your React app.
2. Install the Engage SDK by running the following command:

    ```shell
    npm install @sitecore/engage
    ```

3. In your code editor, open the root folder of your React app.
4. In the `src` folder, create a file called `engage.js`.
5. In `engage.js`, paste the following code:

    ```javascript
    import { createContext, useContext, useState, useEffect, useCallback } from "react";
    import { init } from "@sitecore/engage";

    const EngageContext = createContext();

    function EngageProvider({ children }) {
      const [engage, setEngage] = useState({});

      const loadEngage = useCallback(async () => {
        const engage = await init({
          clientKey: "<client_key_PLACEHOLDER>",
          targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
          pointOfSale: "<point_of_sale_PLACEHOLDER>",
          cookieDomain: "<cookie_domain_PLACEHOLDER>",
          cookieExpiryDays: 365,
          forceServerCookieMode: false,
          includeUTMParameters: true,
          webPersonalization: true /* boolean or object. See Settings object for all options. Set to `false` if you don't have Personalize. */
        });

        setEngage(engage);
      }, []);

      useEffect(() => {
        loadEngage();
      }, [loadEngage]);

      return <EngageContext.Provider value={engage}>{children}</EngageContext.Provider>;
    }

    function useEngage() {
      const engage = useContext(EngageContext);
      return engage;
    }

    export { EngageProvider, useEngage };
    ```

    Replace the placeholder values with [the required details from your Sitecore CDP instance.](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/preparing-to-integrate/collect-required-details.html "Collect required details")

    > [!important]
    > **Cookie consent**
    > In production, only load the Engage SDK and set cookies if your site visitor grants consent. See also a [code example](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/cookies.html "Cookies") to check if your site visitor accepts cookies.

    > [!important]
    > **Content Security Policy (CSP)**
    > To ensure that the Engage SDK script loads, you might have to add the following to your [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP):
    >
    > -   Your [Stream API target endpoint](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/collect-required-details.html#UUID-60c4c930-3cfe-e0ad-3b98-69ceff75989f_section-idm1903325950147122 "Stream API target endpoint").
    >
    > -   `https://d1mj578wat5n4o.cloudfront.net`
    >
    > -   If you run web personalization and your environment is **AP Region**, **EU Region**, or **US Region**:
    >
    > `https://d35vb5cccm4xzp.cloudfront.net`
    >
    > -   If you run web personalization and your environment is **JP Region**:
    >
    > `https://d2ez8k04aaol9g.cloudfront.net`

    This script:

    - Creates a context for Engage called `EngageContext` and a provider component called `EngageProvider`.
    - In `EngageProvider`, asynchronously loads the Engage API using details about your Sitecore CDP instance and sets cookies from the client.
    - Exports your instance of the Engage API using `EngageProvider`.
    - Exports the `useEngage` hook, which will allow you to easily call Engage functions in your app.
6. In `index.js`, wrap your app inside `EngageProvider`. `EngageProvider` will render your app, making all the Engage functionality available to the entire app:

    ```javascript
    import { EngageProvider } from "./engage";

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <EngageProvider>
          <App />
        </EngageProvider>
      </React.StrictMode>
    );
    ```

7. In your terminal, enter `npm start` to start your React app. In your web browser console, type `Engage;`. If an object returns, you have successfully initialized Engage.

## Send your first VIEW event

After you have installed and initialized the `@sitecore/engage` package, you collect and send data to Sitecore CDP. You'll send a VIEW event because the VIEW event triggers every time your webpage loads.

To send a VIEW event:

1. In `App.js`, in the `App` function, with the `useEngage` hook, call the `engage.pageView()` function to send VIEW event data:

    ```javascript
    import { useEffect, useCallback } from "react";
    import { useEngage } from "./engage";

    export default function App() {
      const engage = useEngage();

      const sendPageViewEvent = useCallback(async () => {
        const response = await engage.pageView({
          channel: "<channel_PLACEHOLDER>",
          currency: "<currency_PLACEHOLDER>"
        });

        // For testing and debugging purposes only
        if (response) {
          console.log("Copy-paste the following line into Sitecore CDP > Guests > Search field:");
          console.log(engage.getBrowserId());
        }
      }, [engage]);

      useEffect(() => {
        if (Object.keys(engage).length !== 0) {
          sendPageViewEvent();
        }
      }, [engage, sendPageViewEvent]);

      return <></>;
    }
    ```

    Replace the placeholder values with [the required details from your Sitecore CDP instance.](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/preparing-to-integrate/collect-required-details.html "Collect required details")

    This script creates a VIEW event object and sends the event data to Sitecore CDP immediately after the component renders for the first time. It also logs the browser ID to the console. You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

2. In your web browser, reload your app. When the webpage loads, the VIEW event triggers and the event data is sent.

## Verify that Sitecore CDP captured your VIEW event

After you have sent a VIEW event, you log in to Sitecore CDP and find the event.

To verify that Sitecore CDP captured your VIEW event:

1. In your web browser's console, find a text similar to:

    `a38b230c-11eb-4cf9-8d5d-274e9f344925​`

2. Copy the text.
3. In Sitecore CDP, click **Guests**, then in the search dropdown, select **Browser ID** and paste the copied text into the search field.

    An anonymous guest displays.

    ![Search field in the Guests screen.](https://doc.sitecore.com/api/markdown-image/cdp/en/developers/api/images/cdp-guests-bid.jpg)

    This guest is you loading your app just a minute ago. Next, you find the VIEW event associated with this guest.

4. Click the guest. The guest profile displays.
5. On the guest profile page, click **Event viewer**. A list of events associated with this guest displays. The list contains a VIEW event. This is the event that was triggered in the previous procedure.

## Next steps

You've now successfully integrated your app with Sitecore CDP. You sent an event from your app and verified that Sitecore CDP captures data about your users in real time.

Next, you can:

- [Send other behavioral data](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/sending-events-using-the-engage-sdk.html "Sending events using the Engage SDK"), for example, an [IDENTITY event](https://doc.sitecore.com/cdp/en/developers/api/stream-api/sitecore-engage-sdk-reference/functions/engage-identity.html "Engage.identity(eventData[, extensionData])") or a [custom event](https://doc.sitecore.com/cdp/en/developers/api/stream-api/sitecore-engage-sdk-reference/functions/engage-event.html "Engage.event(type, eventData[, extensionData])").
- [Send transactional data](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/sending-orders-using-the-engage-sdk.html "Sending orders using the Engage SDK") as the user interacts with products and shopping carts on your site.
- If you have Sitecore Personalize, you can [run experiences and experiments](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/running-personalization.html "Running personalization").