Get Sitecore Components into Sitecore CDP & Personalize


As mentioned in another blogs, Sitecore CDP and Personalize offer powerful tools for enhancing customer engagement, but businesses must overcome the challenge of integrating their content with these platforms. As Sitecore CDP and Personalize don't have content, businesses need to find a way to get their content from the CMS to these tools to effectively personalize their customer experience.

In this blog, we will explore how businesses can get Sitecore components into CDP and Personalize. By following these steps, businesses can effectively leverage the power of Sitecore CDP and Personalize while also ensuring that their content is integrated and personalized for their customers.

If you are interested in learning how to get Sitecore Item Data into CDP & Personalize, check out this blog.


This solution is a little more complicated or I would like to say a more custom one, but provides a more streamlined process for content management. With this solution, businesses can get not only the data but also all the components (with the presentation) from the CMS. They can then inject this component into Personalize, eliminating the need for HTML, CSS, and JS in another platform. This solution allows everything to live in one platform, the CMS, providing a more unified approach to content management and personalization.

Get Sitecore Components

For this implementation, you need to create a new layout in Sitecore so that any component that you need returns as HTML but now parsed as a JSON. To achieve this you only need to create this layout on your site:

// PersonalizeLayout.cshtml
var data = Html.Sitecore().Placeholder("component").ToString().Trim();
Response.ContentType = "application/json";
var model = new { data = data };

Then in the CMS, you will need to create the layout

Personalize Layout

Finally, with this layout, you can create the items you need and set the created layout as the default one. For this example, the template used is the Item template from System templates. Finally, as this works as a page, you can add all the needed components there as you wish! For this example, it is used a component that shows a product grid.

Defaut Layout
Products Grid

There are created 4 components, one for each category of products. The goal is to display recommended products related to the category that the user likes the most.

Create Connection

Add a Data System Connection and configure it with a name, description, icon and without authentication. In the request, you need to add the URL for the components you created. In this case, the path is /personalization/products/components. So add the URL with a parameter so you can add the path to the item you need each time.

Configure Request

Test your connection

Test Parameters

See if the response has all the data you need

Test Response

Now you need to map your results

Map Results

As this connection is very generic you will only get the data result so you will be able to get any component!

Finally, just save the connection.

Create Decision Model

With the connection created now, you can use it in a decision model in order to get the needed component depending on the max category of the user. For this, we will use the template created here Decision Templates

Custom Attribute

Then, with that attribute you can create a decision table to know what path you need to get from Sitecore.

Decision Table

Now, that you have the path of the component that you want to get from sitecore you can add the Sitecore connection and send the path variable there.

Sitecore Connection

Finally, to get the data serialized you need to add a programmable to return the data from the connection.

// This function will return HTML as string
(function () {
// Add statements here
return {'data': JSON.stringify(}

There the settings need to be configured this way

Programmable Settings

When all is added the decision model should look like this:

Decision Model

Finally, you can test this decision model and see if you get the needed component

Test Decision Model

If everything is correct you can move your decision model to production

Create Experience

When you create the experience first add a new variant and then add the connection to your decision model.

Connect Decisioning

Now, return to your variant to the API tab and add the following code

<#assign strHtml = getDecisionModelResultNode("Get HTML String").outputs[0]>
"html" : ${strHtml}

Add the following in the JS tab to be able to inject the component from Sitecore in any part of the site.

// You can choose how you want to add your HTML by using insertHTMLBefore, insertHTMLAfter, or replaceHTML methods
// e.g insertHTMLAfter('.someClassName'); or insertHTMLAfter('body'); or replaceHTML('#myPageId')
let selector = `[[Selector | string | body | { group: Position, orderGroup: 1, order: 1, required: true }]]`;
let action = `[[Action | enum(Insert After, Insert Before, Replace) | insertHTMLAfter | { group: Position, orderGroup: 1, order: 2, values: [insertHTMLAfter, insertHTMLBefore, replaceHTML], required: true }]]`;
if (action === "insertHTMLAfter") {
if (action === "insertHTMLBefore") {
if (action === "replaceHTML") {

Add the following in the HTML tab to render the HTML

<!-- define the structure and content of your Experience in HTML e.g.-->
<!-- Use dynamic Guest variables, type ctrl+space or guest to explore available entities.-->
<!-- Type 'd' to see decisioning helpers -->

Save the experience and fill out the form to select where to inject the component

Experience Form

Now, preview the experience with a guest to know if you get the component you wanted from Sitecore depending on the category.

Experience Preview Guest
Experience Preview

Finally, you can publish your experience!

Powered by Paul Bonilla