Overlay Integration Speed Improvement (May '21 Release)

Product/Library Releases & New Features Summer '21 Release
1

The current answers overlay waits for the page “load” event before loading the overlay.js script. With theme 1.21, we can improve performance by loading the overlay script immediately and cutting page load times.

To use this feature with theme 1.21, delete the following from the answers tag in your integrated webpage:

(function () {
      var w = window;
      var d = document;
      function l() {
        var s = d.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = w.YxtAnswersOverlaySettings.domain + '/overlay.js';
        var x = d.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
      }
      if (w.attachEvent) {
        w.attachEvent("onload", l);
      } else {
        w.addEventListener("load", l, false);
      }
    })();

Now add the following tag above the answers script tag <script type="text/javascript" async src="https://answers.yext.com/overlay.js"></script>

For an example, see Adding the Overlay Module.

If you want to use this feature without upgrading theme 1.21, you will need to override static/js/overlay/parent-frame/yxtanswersoverlay.js

In this file, replace

if (!global.YxtAnswersOverlay) {
  global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
}

with

if (!global.YxtAnswersOverlay) {
if (document.readyState === 'loading') {
   window.addEventListener('DOMContentLoaded', (event) => {
     global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
   });
 } else {
   global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
 }
}

Make sure to deploy this change to the Yext Answers site so that the overlay uses the updated code.