API.onReady(payload => Promise?)

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

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';
});