---
title: "Integrate using the Engage SDK script"
slug: "integrate-engage-sdk-script"
abstract: "How to integrate a website with Sitecore CDP by loading the Engage SDK script from a CDN."
---
# Integrate using the Engage SDK script

This topic explains how to integrate your website using the Engage SDK.

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.
>
> -   Make sure you're familiar with HTML, JavaScript, and your web browser's developer tools.
>
> -   Have a website to integrate.

## Load the script on your website

The first step to integrating your website is to load the Engage SDK script on every webpage of your website using the HTML `<script>` tag.

To load the script:

1. In your code editor, open the folder structure of your website.
2. In the folder where you store your JavaScript files, create a new JavaScript file.

    Example: `scripts/sitecore-engage.js`

3. Open the JavaScript file and paste the following Engage SDK script:

    ```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 () => {
        var 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: true /* boolean or object. See Settings object for all options. Set to `false` if you don't have Personalize. */
        };
        engage = await window.Engage.init(settings);

        // Send a VIEW event
        // ...
    });
    ```

    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`

4. Save the JavaScript file.
5. Open the HTML file that imports scripts on every webpage of your website.
6. Import the JavaScript file that contains the script into the HTML file. Import the JavaScript file as the first `<script>` element before the closing `</body>` tag.

    > [!important]
    > Depending on the architecture of your website, you might want to place the `<script>` tag elsewhere in your HTML. Where you import the JavaScript file affects the performance of your web experiences and web experiments.

    Example: `index.html`

    ```html
    <html>
      <head></head>
      <body>
    ...
        <script src="scripts/sitecore-engage.js"></script>
        <script></script>
        <script></script>
      </body>
    </html>
    ```

## Verify that the script loads on your website

To verify that the Engage SDK script loads on your website:

1. In your web browser, open your website and the console. Keep the website and the console open for the rest of this walkthrough.
2. In the console, enter `engage;`.

    If an object returns, you have successfully loaded the script on your website.

## Send your first VIEW event

After you have verified that the script loads on your website, 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 your code editor, open the JavaScript file that contains the script.
2. At the bottom of the `s.addEventListener()` function, below the `engage = await window.Engage.init(settings);` line, paste the following code:

    ```javascript
    // VIEW event object
    var event = {
        channel: "<channel_PLACEHOLDER>",
        language: "<language_PLACEHOLDER>",
        currency: "<currency_PLACEHOLDER>",
        page: "<page_PLACEHOLDER>"
    };

    // Send VIEW event
    engage.pageView(event);

    // For testing and debugging purposes only
    console.log("Copy-paste the following line into Sitecore CDP > Guests > Search field:");
    console.log(engage.getBrowserId());
    ```

    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.

3. In your web browser, reload the webpage. 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 website with Sitecore CDP. You sent an event from your website 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").