Run an interactive experience

After you create an interactive experience, you can test it by sending a payload of data to Sitecore Personalize that simulates a customer interaction and triggers the experience.

We recommend doing this for sophisticated experiencess that use custom fields. For more simple experience, you can preview the api response instead of testing the code.

There are different options to run an interactive experience:

Using functions provided by the Engage SDK or Cloud SDK.
Sending a POST request using the Personalize REST API.
Using the Chrome DevTools console with Boxever.js (legacy).

Engage SDK

If you are using the Engage SDK, you can use the Engage.personalize(personalizationData[, timeout]) function to run an interactive experience. You must call this function with the friendlyId of the live experience you want to run.

Here's an example of how to run an experience and log it to the console.

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

const handlePersonalization = async () => {
    const response = await engage.personalize(personalizationData);
    console.log(response);
};

Here's an example of a personalization data object. This object doesn't contain the email attribute or the identifier attribute to identify the guest. This personalization data object also contains an optional custom field.

const personalizationData = {
    channel: "WEB",
    currency: "EUR",
    pointOfSale: "myretailsite/ireland",
    friendlyId: "running_shoes_popup_02",
    // optional attributes:
    params: { key: "value" }
}

Cloud SDK

If you are using the Cloud SDK, you can use the personalize function to run an interactive experience that is live in Sitecore Personalize.

Here's an example of how to use the personalize function for Next.js:

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

export default function Home() {
  // Initialize the module using init()...

  // Run personalization:
  const runPersonalization = async () => {
    const personalizationData = {
      channel: "WEB",
      friendlyId: "running_shoes_popup_02",
    };

    const personalizeRes = await personalize(personalizationData);
    console.log("Ran personalization.", personalizeRes);
  };

  return (
    <div>
      <button onClick={runPersonalization}>run personalization</button>
    </div>
  );
}

REST API

You can run an interactive experience by making a POST request using the Personalize REST API.

You must use the browserId, email, or identifiers to send a flow execution request.

Here's an example of running an experience using the browserId:

curl -X POST '<baseURL>/v2/callFlows' \
-H 'Accept: application/json' \
--data-raw '
{
    "clientKey": "abBah8aelipaPeebae7roox2tiexoSee",
    "channel": "WEB",
    "language": "en",
    "currencyCode": "EUR",
    "pointOfSale": "myretailsite/ireland",
    "browserId": "a38b230c-11eb-4cf9-8d5d-274e9f344925",
    "friendlyId": "home_page_banner"
}'

Boxever.js (legacy)

You can use the Chrome DevTools console to run JavaScript for an interactive experience using Boxever.js. This method runs the request from your website where the Boxever.js library is installed and is commonly used as it requires minimal setup.

Here's an example of JavaScript you can use to run an interactive experience via Chrome DevTools:

var flowData = {
      "clientKey": Boxever.client_key,
      "channel": "WEB",
      "language": "en",
      "currencyCode": "EUR",
      "pointOfSale": Boxever.pointOfSale,
      "browserId": Boxever.getID(),
      "friendlyId": "cos__interactive__custom_fields" }
Boxever.callFlows(flowData, function(response) {
    console.log(response);
});

To include custom parameters in the payload request, add the key parameters into the flowData object, and add your custom params as key/value pairs as shown in the following JSON example.

"params": {
        "loggedInState": "logged in"    // example
        "someKey": "someValue"      // example
      }

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