Inline reactions enable you to personalize inline web content for specific visitors.  To enable inline reactions, you must first tag your webpage(s) accordingly.

Inline reactions can be used in two ways:

  • Updating existing inline content (e.g. replace an image with different image)
  • Insert new inline content (e.g. add content to the top or bottom of the page)

Updating Existing Content

To update existing content, add the following script* in your tag manager to the applicable page(s):

<!-- Tag an element with the inline panel class -->
<script>
    var element = document.getElementById('YOUR_ID_NAME');
    element.classList.add('_rctfl_native_panel');
</script>

This script will add the class "_rctfl_native_panel" to an existing element on your page(s).  Update YOUR_ID_NAME with the corresponding ID of the web element you wish to update.  If your web element only has a class or name, please contact us for alternate scripts.

Inserting New Content

To insert new content to your page (top or bottom of the page), add the appropriate script to your applicable pages*.

Add content to the top of the page:

<!-- Insert inline content at the top of the page -->
<script>
// Check for document ready
var readyStateCheck = setInterval(function() {
    if (document.readyState === "complete") {
        // Clear Interval
        clearInterval(readyStateCheck);
        // Intitalize Reactful Native Panel
        _rctflNative.init();
    }
}, 10);

var _rctflNative = {
  // Create empty element
  element: document.createElement("div"),
  init: function() {
    //Add class for Reactful to target(required)
    this.element.setAttribute("class", "_rctfl_native_panel");

// Define attributes for target element(optional)
this.element.innerHTML = '';
this.element.style.display = 'inline-block';
this.element.style.width = '100%'
   
    //Proceed to add panel
    this.addPanel()
  },
  addPanel: function(){
  // Add the element defined above to the top of the body
  document.body.insertBefore(this.element, document.body.firstChild);
  }
};
</script>

Add content to the bottom of the page:

<!-- Insert inline content at the bottom of the page -->
<script>
    // Check for document ready
    var readyStateCheck = setInterval(function() {
        if (document.readyState === "complete") {
            // Clear Interval
            clearInterval(readyStateCheck);
            // Intitalize Reactful Native Panel
            _rctflNative.init();
        }
    }, 10);

    var _rctflNative = {
      // Create empty element
      element: document.createElement("div"),
      init: function() {
        //Add class for Reactful to target(required)
        this.element.setAttribute("class", "_rctfl_native_panel");

        // Define attributes for target element(optional)
        this.element.innerHTML = '';
        this.element.style.display = 'inline-block';
        this.element.style.width = '100%'

        //Proceed to add panel
        this.addPanel()
      },
      addPanel: function(){
        // Add the element defined above to the end of the body
        document.body.appendChild(this.element);
      }
    };
</script>

*NOTE: All scripts for inline reactions should be loaded before the main Reactful script.  Scripts should also be loaded as early as possible in the page sequence. 

Did this answer your question?