Skip to main content
Users
CloudPortalLogin
  • Powered byPowered by
Introduction to Sitecore Personalize
Managing accounts and system settings
Identifying guests
Introduction to experiments
Introduction to experiences
Decisioning
View dashboards
Developer Center
Connecting to an external system
Using client-side JavaScript
Using server-side JavaScript
AI in Personalize
Glossary
  • Sitecore Personalize
  • Introduction to experiences
  • Introduction to web experiences in Sitecore Personalize
  • Create a web experience
  • Inserting a web experience in your HTML

Inserting a web experience in your HTML

In order for a web experience to go live on your organization's site, you must specify in the JavaScript editor where in the Document Object Model (DOM) you want the offer or content to display. You can specify this using JQuery, an append method, or similar.

Sitecore Personalize supports Document querySelector to help you select a single HTML element. If multiple HTML elements are found with your selection, querySelector always returns the first element, for example: document.querySelector(selector).

You can use querySelector to select an element by its id, class, or even tag. For example: body, .my-class, #my-id, .class1, .class2, h1.

Sitecore Personalize provides you with methods that you can use depending on how you want your web experience to render:

  • replaceHTML - replaces a current offer with a personalized offer on the page. This method adds a <div> wrapper with an id.

  • replaceHTMLExact - replaces a current offer with a personalized offer on the page.

  • insertHTMLBefore - inserts the personalized offer before the specified HTML element.

  • insertHTMLAfter - inserts the personalized offer after the specified HTML element.

Do you have some feedback for us?

If you have suggestions for improving this article,

Privacy policySitecore Trust CenterCopyright © 1999-2025 Sitecore