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 and stores it as a cookie in the browser.

Parameter	Type	Description
`settings`	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.

// 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 or web experiment 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:

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:

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

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

If you have suggestions for improving this article, let us know!