---
title: "Engage.init(settings)"
slug: "engage-init"
abstract: "Describes the client-side init() function in the Sitecore Engage SDK (Sitecore CDP Stream API)."
---
# Engage.init(settings)

The asynchronous `init()` function initializes the Engage SDK on the client side of your app. Call this function after the `window` object is defined and before you call any other Engage functions.

During initialization, the function creates a [browser ID](https://doc.sitecore.com/cdp/en/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/browser-id.html "Browser ID") and stores it as a cookie in the browser.

sidebar. Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| [`settings`](https://doc.sitecore.com/cdp/en/developers/api/stream-api/sitecore-engage-sdk-reference/functions/settings-object.html) | object | Details about your Sitecore CDP instance and cookie settings. |

Example 1. Example: Engage SDK script

Here's an example of how to use the `init()` function. You must call the `init()` function asynchronously and save the return value into a variable.

```javascript
// Initialize the engage variable
var engage = undefined;

// Create and inject the <script> tag into the HTML
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://d1mj578wat5n4o.cloudfront.net/sitecore-engage-v.1.4.3.min.js";
var x = document.querySelector("script");
x.parentNode.insertBefore(s, x);

// Initialize the Engage SDK
s.addEventListener("load", async () => {
    const settings = {
        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: false /* boolean or object. See Settings object for all options. Default: false */
    };
    engage = await window.Engage.init(settings);
});

```

Example 2. Example: Engage SDK package

Here's an example of how to use the `init()` function in a React app. You must call the `init()` function asynchronously and save the return value into a variable.

You can expose Engage functions to the window object by assigning the return value to the `window` object. You must do this in order to call Engage functions inside your [web experience](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/create-a-variant-for-a-web-experiment-using-custom-code.html) or [web experiment](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/create-a-variant-for-a-web-experiment-using-custom-code.html) in Sitecore Personalize.

In production, you should call the `init()` function once, then share it across the app using the state management solution of your choice, for example, React Context or Redux.

`engage.js`:

```javascript
import { init } from "@sitecore/engage";

let engage;

const loadEngage = async () => {
  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: false /* boolean or object. See Settings object for all options. Default: false */
  });

  // Expose Engage functions to the window object:
  window.engage = engage;
};

loadEngage();
export { engage };

```

`App.js`:

```javascript
import { useEffect } from "react";
import { engage } from "./engage.js";

export default function App() {
    useEffect(() => {
    if (engage !== undefined) {
        // Send VIEW event
    };
    }, []);
// ...
}

```