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 anid. -
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.