Generative AI

Sitecore Search

JAM Stack

Developer Experience

Cloud Development

Frontend Development

Backend Development

Developer Relations

Sitecore Platform DXP

Sitecore CDP/Personalize

Hello Friends, it’s Dylan. Today, I'm here to discuss creating various programmables in Sitecore Personalize and share some "secret" tips to simplify coding for this platform. These tips are particularly helpful for those new to Sitecore Personalize. I used these secrets along with Chat GPT to create recipes that mimic Sitecore XP's pattern and profile cards using the N-Dimension Euclidean Distance calculation.

## New to Sitecore Personalize

If you are new to Sitecore Personalize, then you may not be familiar with why you would need to write code within the platform. I’ve possibly covered a brief intro to this topic in other blog posts, but let's talk through this specific topic in more detail in this blog post. There are really two types of personas that would typically interact with Sitecore Personalize (technically there are probably a lot more, but I am generalizing here in this blog post). There is the Marketer or Strategist who has come up with a strategy of how they would like to target customers and personalize the experiences on the site. Unfortunately, even with this strategy, the site cannot begin to be personalized without a decent amount of work from the second persona, which is the developer.

Now, developers working with Personalize will mostly need JavaScript to work within the tool. Those who track information or consume the experiences (assuming they aren’t using Web Experiences) will require someone who understands JavaScript because most of the customizations/extensions in Personalize require JavaScript development. Some of the parts of the tool that require JavaScript include the following:

- Decision Model Programmables (which honestly is going to be a large portion to every decision model that is created).
- Conditions (For XMC or Experiences/Experiments)
- JS Modules
- Decision Templates (These are for Programmables you would like to reuse multiple times)
- Web Templates
- Output format for Audience Export

In CDP or Personalize, you can write one-off JavaScript to control application responses. If you're staffing a Sitecore Personalize project, remember that the required skills differ from those needed for traditional Sitecore projects.

## JavaScript Flavor and Its Integration with Sitecore Personalize

So now that we’ve talked about the need for JavaScript experience when working with Sitecore Personalize, now lets talk a little bit about the specifications and why that is, when working with Sitecore Personalize or CDP customizations within the product itself.  The front end of the application uses Angular to build the UI (this is nothing secret because you can inspect the UI and see that it is indeed using Angular).  But much of the JavaScript that you write for the app, will actually run Server Side, for example, when you trigger a Full Stack Interactive Experience, you are essentially calling and API, and the JavaScript that you’ve written will run Server Side, by interpreter to help come up with the results you are looking for (or help you make a decision).  Now it’s because of that, that affects the type of JavaScript you can use to write for the app (as of the writing of this article, because things could change in the future).  Without sharing anything I’m not allowed to share, the flavor of JavaScript that you write for within Personalize is ECMAScript 5.0.  

For those that know anything about JavaScript, you know that ECMAScript 5.0 is quite outdated, but knowing this is actually extremely useful information, because as you’ll see in my next example, about combining this with Chat GPT, you can then instruct it to either help you convert your code to this version, or you could even use something like Typescript locally and have it process the code into this format for working with the Serializer that I built last year (will talk about this in a future blog).

## Examples of Using Chat GPT 4 with Sitecore Personalize

So now that we are aware of the flavor of JavaScript that Sitecore Personalize uses internally, lets look at some ways that ChatGPT can be used to help us write the JavaScript needed for an experience.  What I did was always instruct Chat GPT (or any LLM will work for this, that understands JavaScript and code real well) with something like this before I start asking it to generate the code:

```markdown
Only provide code suggestions in JavaScript ECMAScript 5.0.
```

That provides the instruction to limit the output from the LLM. Next, you may want to add additional context about how Sitecore Personalize structures its data. In our case, we will want to pull Guest Session information, so we can provide additional context that looks like this. If you haven’t had the chance to [read this blog post here](https://dylanyoung.dev/insights/ai-friday-prompt-engineering-basics/), where I discuss the basics of prompt engineering, here I’m providing an example of the Guests, Session, and Events object, so it can write code that can traverse this type of Guest object.

```markdown
I will have access to a Guest object, below is an example of what this guest object could look like:
const guest = {
  "ref": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
  "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
  "gender": "unknown",
  "sessions": [
    {
      "ref": "97a22c3f-b564-50fd-aeea-6331ae1356d8",
      "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
      "guestRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
      "status": "OPEN",
      "sessionType": "EMAIL",
      "duration": 0,
      "channel": "EMAIL",
      "events": [
        {
          "ref": "73c0f6a4-7d64-4136-bf40-3c66cd3bf3e7",
          "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
          "type": "TRACKING",
          "status": "PROCESSED",
          "channel": "WEB",
          "sessionRef": "97a22c3f-b564-50fd-aeea-6331ae1356d8",
          "flowExecutionRef": "4248ad2e-39f5-4a4a-9315-c563c7455f84",
          "arbitraryData": {
            "flowExecution": {
              "ref": "4248ad2e-39f5-4a4a-9315-c563c7455f84",
              "occurredAt": 1720595885143,
              "flowRef": "ce1ba0e6-b51e-4dde-a127-f259d4beb729",
              "flowFriendlyId": "experience_472880",
              "flowVariantRef": "0bd46275-4c58-46a9-8fef-e5479ac28ec3",
              "guestRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
              "causalEventRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
              "flowExecutionTimeMs": 438,
              "status": "SUCCESS"
            }
          }
        }
      ]
    }
  ],
  "timeslotId": 1,
  "timeslotDesc": "Morning"
}
```

Once you’ve provided this initial context, you can combine all of this in either the same session chat or as one single prompt. Sometimes it seems to perform better when it’s all provided in a single question because it may forget the rest of the context of the chat history. In our case, I’m going to ask it to generate a script that does the following:

```markdown
Can you create me a script that looks through the guest object, and gets back all sessions that have arbitrary data in the events and have channel of the session that matches "Web"
```

I used Microsoft Copilot to run this set of instructions, and it seemed not to take into account all my instructions as I got back the following:

```javascript
const guest = {
  // ... (your guest object here)
};

// Filter sessions with arbitrary data and channel "WEB"
const filteredSessions = guest.sessions.filter(session => {
	return session.events.some(event => event.arbitraryData && session.channel === "WEB");
});

console.log(filteredSessions);

```

So, I had to remind it that it should only suggest code that’s ECMAScript 5.0 and that the `.some` method doesn’t exist. This is what I got back:

```javascript
var guest = {
  // ... (your guest object here)
};

var filteredSessions = [];
for (var i = 0; i < guest.sessions.length; i++) {
  var session = guest.sessions[i];
  if (session.channel === "WEB") {
    for (var j = 0; j < session.events.length; j++) {
      var event = session.events[j];
      if (event.arbitraryData) {
        filteredSessions.push(session);
        break; // No need to check other events for this session
      }
    }
  }
}

console.log(filteredSessions);

```

Much better. However, it did add a `console.log`, which doesn’t work with Sitecore Personalize. You could update the context and let it know it should return `print(‘’)` instead of console logs.

That's it! Now, we can copy this code into Sitecore Personalize and use it in our programmable or wherever we need this logic.

## Extra Credit

In an upcoming blog post, I'll demonstrate how to use Chat GPT with function calls to automate the creation of Experiences or other items in Sitecore Personalize. If you're eager to get started, feel free to try it out and leave me a message to share your experience.

Sitecore Personalize: The Secret of Writing Code in the Product

Hello friends, it's been a while since I created an AI topic. Today, based on a conversation with Rodrigo Peplau, I decided to write this blog post. Prompt engineering and how to use Generative AI to create useful outputs is a powerful topic. Many newcomers to AI don't realize all the amazing things it can do. Rodrigo and I are working on some auto-personalization functionality using Generative AI (sorry Rodrigo if you didn't want me to share that 😛). In our case, I wanted to take some information about a website built with Sitecore and use Generative AI to generate persona and profile key information for the site automatically. I mentioned that I had done this for my SUGCON EU presentation on behavioral personalization but had lost the prompts. So, this is an exercise in recreating that outcome. I believe I used Microsoft Copilot and provided information about the SUGCON North America website, asking it to create personas for this type of site and output them in a table. In today's use case, I wanted the output in JSON format so that the data could be used for other purposes.

## Initial Prompts

My initial attempts to create the Persona and Profile Keys (or Attributes) shared across Personas began with a straightforward description of the site. These attempts resulted in multiple prompts to achieve the desired JSON output, which looked something like this:

```json
[
    {
        "name": "Some Persona",
        "description": "Information about the persona",
        "attributes": [
            {
                "name": "Tech Enthusiast",
                "score": "10"
            }
        ]
    }
]
```

This JSON output would allow us to then take additional action with the output generated by Generative AI.  The additional prompts were helpful to use in our code to combine those additional instructions into a single request to help generate the outcome that we were expecting.  Some of the following were the issues that I had with the initial prompt, that I had to follow up with additional prompts:

- The attributes were inconsistent across personas, whereas in Sitecore, profile keys must be uniform for a Profile and Pattern Card.
- Give it more context about the schema of the attributes.
- It didn't know how to provide the `score`, resulting in vague scores like `High` or `Low`. I clarified that the scores needed to be numerical, specifically within a range of 1 to 100, which resolved the issue.

After these additional prompts, I finally got the desired output. However, I now wanted a way to run this from the code. Let's discuss some strategies I used to incorporate those additional instructions and context into a single request to guide the model effectively. Note that the approach might differ slightly when using the Chat Completions API.

## Instruct the Model to Pretend to be a Specific Role

I've seen this used elsewhere on the web, where you have a specific purpose. In our case, I was trying to get Generative AI to assume it was a Strategist or Data Science role, to have it profile the content and come up with a general set of Profile Keys/Attributes and then use those attributes as a way to score the personas of a web page. So adding an instruction such as:
`You are a website marketing strategist and you need to create profile pages on a website`...

This is considered “Role Prompting” ([🟢 Assigning Roles (learnprompting.org)](https://learnprompting.org/docs/basics/roles)) which improves the accuracy of the output from our request. In our case, because Generative AI is assuming it’s a strategist, it’s going to analyze and profile the content that we provided it.

Now, for a lot of the prompting, I was simply using Microsoft Copilot, which doesn’t really allow you to set system prompts, which is where a lot of these instructions that I talk about in this post, should really go. So that when I describe the site or the pages of the site, it uses the system context to automatically send the expected outcome back to the user.

## Provide an Example

In my specific use case, I did not provide an example, but it’s an important element that can greatly improve the accuracy of the LLM in returning the desired output. When I used Microsoft Copilot, even with specific instructions to not use unique attributes per persona, it often made errors. I found that the Microsoft model wasn’t advanced enough to handle this scenario, so I switched to a more sophisticated model for better results. Providing an example of the desired output would likely have generated the correct response. Including a JSON schema in my final prompt yielded better results, and if I had provided more scenarios to generate a common set of profile keys, it might have resolved the issue.

Since I'm not providing examples, this approach qualifies as zero-shot prompting ([Zero-Shot Prompting | Prompt Engineering Guide (promptingguide.ai)](https://www.promptingguide.ai/techniques/zeroshot)). While no examples are given to guide the AI, the additional context I provide should help achieve a more accurate response.

## Final Outcome

Let's review what my final prompt looks like. You will notice that many of the elements discussed above are included in this initial prompt:

```text
1. You are a content marketer/strategist working for a website that is about events in the Sitecore community
2. Your response should be in only JSON in the following format [{ name: string; description: string; attributes: Record<string, number>; }]
3. The attributes will have a string for the name of the attribute and a number between 1 and 100 to score that persona.
4. The attributes that you define, should repeat for each persona, so how you score the attribute the persona will differentiate those personas from each other.
5. The site has various pages about the event such as the agenda, sponsorship information, and the speakers as well as ways to Signup.
```

As you can see, I used a numbered list of instructions to outline the key points, including an example of the desired JSON output and guidelines on what was acceptable. I also assigned the role of `content marketer/strategist` to refine the results further. While this prompt could be enhanced by providing an actual example, I was already getting the expected output.

I will cover more details about this code and its usage in a future blog post. I will also explain how to build upon these prompts to generate JSON, which can be used with function calls to interact with an external API. Stay tuned for that topic 🙂.

## Extra Credit

Many forget that AI output may not always meet expectations. Human oversight is essential to verify and refine the information suggested by AI. It's crucial in any AI application to have a human validate the output. While this feature isn't built yet, the next step could involve allowing users to select specific generated personas and create them, rather than discarding others. Another option is to enable users to regenerate or refine certain personas with additional context. This process supports user creativity, leading to impressive outcomes.

AI Friday: Prompt Engineering Basics

Technically this is not insider information, but these are going to be some of the methods I use as I start to get back to my contributions in the Sitecore community and it doesn’t feel right, not to share these with the community.  As a Developer Advocate at Sitecore, I used a lot of these methods on a daily basis to perform my role, and honestly, for all of these, they are things the community can contribute on.

## Plan a Specific Task/Topic and Create Lots of Supporting Content

Before diving into specific types or locations for contributing content, a common question I received from MVPs at Sitecore was: What should I create content about? While aligning with the product is beneficial, you should also focus on topics that you are passionate about or wish to explore further.

You should never set out to write just one piece of content on a topic. At Sitecore, we would plan a topic or goal, like when our team built the Chatbot for the Developer Portal for the internal SCAI Hackathon. From that single topic, we created a lot of content, including Sitecore Search Personalization, XP Pattern Profile cards, and my presentation at SUGCON Europe 2024 in Dublin, Ireland. If you solve a difficult challenge, blog about it, but also tackle related challenges to create more blog posts, videos, and maybe a presentation. This approach helps you turn one concept into multiple contributions for the community. Often, a single medium isn't enough for everyone to learn best, so try various formats for the same content.

## Contribute to Sitecore Open Source Repositories

Sitecore maintains many open source repositories, not all of which are content-specific. For example, the Developer Portal is a content-driven site powered by Markdown files. If you want to detail an integration or help maintain the Accelerate recipes, these tasks are also managed via Markdown files.

Another useful open source project is the Migration Advisor (https://migration.sitecore.com/), which I personally worked on and conceived while at Sitecore. Although the future of this tool is uncertain, it still offers opportunities for contributions.


The community has the opportunity to contribute to a greater number of repositories, including Demo projects and XM Cloud Introduction. These contributions can significantly enhance the collective resources available to all Sitecore users and foster a deeper understanding of the platform.

## Create Video Content for Discover Sitecore

Did you know that anyone who creates video content can submit that content to what’s left of the technical marketing team to be released on Discover Sitecore?  Probably the best place to start is to message Rob Earlam or Tamas Varga on slack to request the ability to post on the Sitecore Discover channel.  In the past, there has been many contributions from the community.  I would focus on content that hasn’t been covered on the channel yet, such as feature releases for the products or unique ways to use the products for specific use cases.

## Work with Product Management

There are several ways, even for those who are not currently MVPs, to work with Sitecore product managers. First, provide feedback if you encounter issues with the products. Second, reach out to request feedback on content areas they’d like covered. Keep in mind that product managers are very busy, so instead of having them do all the work, present options and let them choose which items to focus on. It's always worth asking, as you miss 100% of the shots you don’t take.

Most people do not know who these individuals are in the community. That's why it's important to be on Slack first and foremost. Join channels like Sitecore Connect to quickly identify product managers. Another great option is to attend SUGCONs or Symposiums, as Sitecore speakers are typically product managers. Not all Slack channels are monitored by product managers, but many are. Sitecore employees usually have a Sitecore logo next to their name, which can help identify them. As an MVP hopeful, it's also beneficial to interact with other channel contributors, especially those answering questions.

## Cover topics being Released in the Change Log

For those who don’t know, there's now a frequently updated change log available on the Sitecore Developer Portal: [https://developers.sitecore.com/changelog](https://developers.sitecore.com/changelog). This is an excellent resource to track the latest features being rolled out. Instead of merely repeating the existing information, find unique ways to expand on it. For example, if a new feature like an API is announced, walk users through its benefits, why it was needed, and how to use it. This approach complements many of my other suggestions. You could create a "Top 10 Releases of 2024" presentation for SUGCON or collaborate with product teams to provide feedback and suggestions on new features.

Well that’s it for today, I’m hoping to do more of these helpful suggestion blog posts from someone that reviewed MVP applications and knows what makes a good community contributor in the upcoming weeks, as I start chasing my MVP title.

Boost Your Sitecore MVP Journey: An Insiders Viewpoint

Hello friends, welcome back. This is my second blog post in a week, all in preparation for my SUGCON Europe presentation. I've put together a curated list of blogs related to my topic on behavioral personalization. This is the final blog post in the series, where I share some recent internal discussions. I plan to discuss this further on the developer portal. The question arose: What is the recommended approach for implementing personalization on XM Cloud? However, I believe this advice may also be beneficial to users on XP, XM, and even those using other CMSs.

## Using XP/XM

With a Sitecore XP/XM implementation you’ll use a standalone tenant of Personalize (and possibly an add-on of CDP if you have more extensive data collection needs).  You’ll really have two options for implementation of personalization (but keep in mind that this could also apply to experimentation as well).  First you could opt to probably take one of the easiest approaches, which is to use the Engage SDK and enable Web Experiences.  This is relatively straightforward, and just requires an additional setting to be configured when you initialize the Engage SDK.  Below is an example of this:

```typescript
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,
      webPersonalization: true
    });

    setEngage(engage);
  }, []);

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

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

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

export { EngageProvider, useEngage };
```

So in the above code, when you load the engage SDK, you just need to add a property for `webPersonalization: true` and you should be all set.  Another caveat, is that you should ensure you are using the latest version of the Engage SDK.  Once you have those two things, make sure you aren’t seeing any console logs in your console, and then you should be all set.  With `Web Experiences` all of the configuration of the personalizations including the styling of the personalization components themselves would be done from Sitecore Personalize.

There may be instances where you want to limit the control of your marketing team or when your development team prefers to use modern development techniques. These techniques can include source control, versioning, and code governance to manage changes to personalized code. In such cases, a Full Stack Interactive Experience is likely your best option. However, it is more complicated to implement. Each component in XP needs abstraction logic to call into Personalize for decision-making. Alternatively, you could implement an XP rule that returns a true or false value or an object that matches your needs for a specific Experience ID, eliminating further configuration changes. This will be discussed in a future blog post. But note, this approach likely leans towards a non-headless approach. As suggested, it requires review, and a simple proof of concept should be created to verify its compatibility with XP and its potential for use with XM Cloud.

As an XP customer, your two options are the Full Stack Interactive Experience or implementing Web Experiences. You should carefully consider these options. The more logical choice may be the Full Stack Interactive Experience, with the caveat that if you need a quick solution for your marketers, Web Experiences might be the right approach.

It's worth noting that you could implement both. However, in my opinion, Web Experiences can be somewhat risky in the corporate realm. They are a great way for small businesses to decrease time to market, but they may cause unexpected glitches in the frontend application, possibly due to CSS injections from the Web Experiences implementation.

Even if you don't want your teams to use Web Experiences, you might still want to enable them in the Engage SDK, as this also enables the debug tool.

## Using XM Cloud

Really the implementation of XM Cloud is similar to the considerations for XP/XM, however a few additional discussion points as of the time of this writing.  First you could opt to use the Cloud SDK over the Engage SDK.  But as of this writing, the Cloud SDK does not allow you to enable the Web Experiences.  This shouldn’t be a problem if you are predominantly using the Full Stack Interactive Experience, but it’s something to keep in mind.  I haven’t tried, but I would also assume if you are using 21.6+ (where the Cloud SDK was first introduced), you could back track and switch to using the Engage SDK, but there could be some issues and you would likely cause issues for future compatibility upgrades with JSS.  There has been commitment of adding support for Web Experiences in the Cloud SDK, but I do not have a timing on that.

If you are using an older version of JSS with support still for the Engage SDK, then you could still use both Web Experiences and Full Stack Interactive Experiences.

Before we delve into the configurations necessary to enable the Web Experience feature in the Engage SDK, let's discuss an additional option available for XM Cloud customers. If you're using the basic XM Cloud version, it includes Embedded Personalize, a stripped-down version of the fully licensed Personalize product. With this combination, you gain limited personalization capabilities through a new feature in XM Cloud Pages. Sitecore has introduced a method for achieving page-level personalization through Audience capabilities. These allow you to define rules that segment your audience, enabling them to see a personalized version of the page.

The XM Cloud Pages interface introduces unique methods for personalization, creating notable differences from the XP/XM approach. In XP and to an extent in XM, personalization is managed through a rules engine. In contrast, XM Cloud uses pages, and the only way to set new rules for pages is through Conditions, which we'll discuss further. This difference affects how personalization is achieved in XP versus XM Cloud. If you were to create a personalization rule for a Full Stack Interactive Experience in XP, it would likely not work in XM Cloud. Despite these differences, the recommendation to consider using a Full Stack Interactive Experience in XP remains valid for XM Cloud.

## Anything else

For anyone else, the approaches will be similar to XP/XM, given that you don't have access to the XM Cloud Pages interface. Your only options are to create a Full Stack Interactive Experience or a Web Experience. The choice between these two depends on your use case and eliminates the need to handle the inherent quirks of Sitecore's rendering engine. If your CMS doesn't have a rendering engine, you'll likely choose the appropriate preference based on your organization's needs.

Since you are not operating within the Sitecore realm, you will also need to use the Engage SDK. This tool supports triggering flows for personalization via the Full Stack Interactive Experience. To use it, initialize the Engage SDK and trigger a call flow. For more details, refer to the Engage SDK documentation: [https://doc.sitecore.com/personalize/en/developers/api/engage-personalize.html](https://doc.sitecore.com/personalize/en/developers/api/engage-personalize.html).

```typescript
const flowData = {
    channel: "WEB",
    currency: "EUR",
    pointOfSale: "myretailsite/ireland",
    friendlyId: "running_shoes_popup_02",
    // guest identifier:
    email: "jane.doe@myretailsite.com"
}

engage.personalize(flowData);
```

Since you are not working with the XP/XM rendering engine, you should apply your full-stack experiences directly within the code you are implementing.

Personalization

Comparing Personalization Options for Sitecore Personalize when Building with Sitecore

Sitecore Search User Profile Personalization with Personalize

Hello folks, welcome back to my blog. Today, I want to discuss creating Web Experiences (Sitecore Personalize) with XM Cloud. Out of the box, running a web experience/experiment with your XM Cloud tenant requires additional configuration with your rendering host. Even though this topic may be brief, I believe it's worth outlining the necessary steps.

## Cloud SDK vs Engage SDK

With XM Cloud specifically, it’s important to talk about the recent release of JSS 21.6 ([https://doc.sitecore.com/xmc/en/developers/jss/216/jss-xmc/index-en.html](https://doc.sitecore.com/xmc/en/developers/jss/216/jss-xmc/index-en.html)).  In this version, Sitecore introduced a better developer experience which included the simplification of the usage of SDKs across products.  With this, the Engage SDK was replaced by the Cloud SDK and there are some important items to discuss with the Cloud SDK at the time of writing this article.  The biggest item to highlight is that the Cloud SDK doesn’t currently support the usage of Web Experiences in Personalize.  That doesn’t mean you can’t personalize, it just means you must use only Conditions to personalize.  Another option is to create full-stack interactive experiences.  The latter I’ll likely cover in a future topic.  Custom conditions are not always the answer, even though they work very well with XM Cloud Pages, it can however be very tricky to create advanced personalization scenarios with conditions.  Or you might want to create a decision model, in those cases you will need to either wait for support for Web Experiences with the Cloud SDK or implement some form of full-stack interactive experiences. 

For today’s blog post, I am going to assume you are using a version of JSS before 21.6, and therefore using the Engage SDK.  With the Engage SDK with an XM Cloud website, it’s quite easy to enable web experiences/experiments with your XM Cloud tenant.  

## Modifications Needed

To enable web experiences or experiments, you need to adjust the configuration in your rendering host. If you're using multiple rendering hosts from different file systems (like a mono repo), you should apply these changes to all file systems where you want to enable web experiences.

This guide assumes you're using the latest version of the Engage SDK and that you initiated your rendering host using the Foundation head repo. You can find it here: [https://github.com/sitecorelabs/xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head).

The primary change required pertains to our Engage SDK initialization. Two configuration settings are necessary to ensure that web experiences function correctly on our XM Cloud rendering host.

- pointOfSale - This was optional before, but is now required, luckily this setting is already set and configured to the correct value using the `PosResolver.resolve()`.
- webPersonalization - This is a boolean value, that to enable web experiences in the browser, it needs to be set to true.

Let's examine the required changes in the code. These modifications apply to CdpPageView.tsx, specifically within the `createPageView` function. Optionally, you could clone this file and reference it separately to minimize the risk of overwriting your specific configuration during JSS updates. Alternatively, consider passing the `webPersonalization` parameter as an environment variable.

```typescript
const createPageView = async(page: string, language: string, site: SiteInfo, pageVariantId: string) => 
{
	const pointOfSale = PosResolver.resolve(site, language);
	const engage = await init({
		clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
		targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',
		cookieDomain: window.location.host.replace(/^www\./, ''),
		forceServerCookieMode: false,
		pointOfSale,
		webPersonalization: true
	});
}
```

Highlighted above in red, are the additions that I’ve added to enable web experiences and experiments in XM Cloud.  Make sure you’ve committed these changes and deployed these to the environments where you plan to run web personalization.  Once everything has been deployed, you should be able to go into Sitecore Personalize, create a new “Web Experience” and then preview that experience and view that experience on your XM Cloud website.  You can also see the QA tool at any point just by going to https://yourwebsite.com/?bxQATool=true.

And that’s pretty much it for this blog post and simple to achieve. 

Hello

Latest posts

Sitecore Personalize: The Secret of Writing Code in the Product

AI Friday: Prompt Engineering Basics

Boost Your Sitecore MVP Journey: An Insiders Viewpoint

Comparing Personalization Options for Sitecore Personalize when Building with Sitecore

Sitecore Search User Profile Personalization with Personalize

Enabling Sitecore Personalize Web Experiences on XM Cloud