API.onReady(payload => Promise?)

When a placeholder's document has completed loading and its load event is fired, Confirmic will fire its onReady callback, which may be used to perform run-time updates.

In order to update your placeholder dynamically based on the params or content of the blocked <script> element, you may use the onReady method to register a callback that will be called when the Placeholder document has loaded.

Your registered callback is called with a single object payload containing the properties of the blocked script. If your callback returns a Promise, Confirmic will wait for it to resolve before applying any configurations.

🚧

Don't create XSS loopholes!

Because placeholders can be wrapped around any content, be careful not to write to the DOM portions of the text or outerHTML since they may contain user-generated content.

Payload properties

Param nameParam typeDescription
paramsObjectA key-value pair of the parameters that were passed into the placeholder (or their default values)
textDOMStringThe text property of the HTMLScriptElement representing the blocked script.

Note that if the blocked node is a non-HTML React component, this will be undefined.
outerHTMLDOMStringThe outerHTML property of the HTMLScriptElement representing the blocked script.

This is particularly useful for blocked external script tags, since they will not have a text property.

Example

The @confirmic/facebook placeholder wraps the Facebook Like Button's div element

<script type="text/x-confirmic" data-micropolicy="social-media" data-placeholder"@confirmic/facebook">
  <div 
    class="fb-like" 
    data-href="https://my-cool-website.com" 
    data-layout="standard" 
    data-action="like"
    data-show-faces="true"
  >
  </div>
</script>

In this case, text is the string:

<div 
  class="fb-like" 
  data-href="https://my-cool-website.com" 
  data-layout="standard" 
  data-action="like"
  data-show-faces="true"
>
</div>

and outerHTML is the string:

<script type="text/x-confirmic" data-micropolicy="social-media" data-placeholder"@confirmic/facebook">
  <div 
    class="fb-like" 
    data-href="https://my-cool-website.com" 
    data-layout="standard" 
    data-action="like"
    data-show-faces="true"
  >
  </div>
</script>

Inside the placeholder, we then use the text to update the copy inside the placeholder button based on the data-action of the original html:

API.onReady(function onReady({ text }) {
  var action = 'Like';
  if (text.indexOf('fb-share-button') > -1) {
    action = 'Share';
  } else if (text.indexOf('data-action="recommend"') > -1) {
    action = 'Recommend'
  } else if (text.indexOf('fb-save') > -1) {
     action = 'Save';
  }
  document.querySelector('button .text').innerText = action + ' on Facebook';
});

Did this page help you?