Render Content into an HTML Element

Note: This feature is currently released under our Controlled Availability program. To request access to this feature, please log in to My Oracle Support and create a service request. Availability for this feature is specific to product trim. Contact your account representative for more information.

HTML elements of a web page become rendered sequentially. Any of those may appear either before web personalization runs, or after it – depending on how the Oracle CX tag is implemented.

To assure predictability, JavaScript changes need to be wrapped into a callback that only runs whenever the original part of the web page is ready to be modified.

This is where this When component may help.

Establish the When component

This step is performed once for the whole account.

Create a single Web personalization for all your shared scripts. It should go first in alphabetical order. This makes its Content nodes run first on the web page. All the Content nodes in it also run from left to right, as the arrows on the Canvas show.

Copy and paste the following JavaScript code into a Content and set its Location to the whole site.

data.global.when = function(condition) {
  let resolve;
  let promis = new Promise((r) => resolve = r);
  let test = condition;
 
  if (typeof condition === 'string') {
    test = function() {
      return document.querySelector(condition);
    }
  }
 
  function wait() {
    test() && resolve(test()) || setTimeout(wait, 50);
  }
 
  wait();
 
  return promis;
}

Wait for the corresponding web page area and render HTML when it’s ready

As soon as the When component is set up, you can call it from any Content. Use the following syntax to wait for a selector to become available:

data.global.when(condition).then(successCallback);

Where condition is either text and comprises a selector to lookup the needed HTML element, or a function that resolves the qualification as soon as a true value is returned.

Example 1

data.global.when(".main").then(function() {
  document.querySelector(".main").innerHTML = `<style type="text/css">${data.css}</style>${data.html}`;
});

Example 2

data.global.when(function() {
  return data.global.cookie("logged-in") === "no";
}).then(function() {
  document.querySelector("body").innerHTML = "Your session has expired.";
});

Learn more

Web Personalization Canvas - Learn more on setting up a web personalization

Web Personalization Content Editing - Understand content editing capabilities