CLS Optimised Code (Desktop + Mobile Speed Issue)

Step 1 - Generate the Master CDN link

MasterCDN is our script generating Tool. Using the following guide you should be able to generate the code relevant to the respective client.

Guide -https://commversioncom.freshdesk.com/a/solutions/articles/88000042212

Step 2 - Edit the below script

From the following piece of script, edit the highlighted bit and add the code from Step1 here. 

Note: Only copy the CDN code within the "___"

Example:  script.src = "https://cht-srvc.net/api/lc.js?client=nhfs_new_homes_for_sale";

<script>

  // --- 0. Device detection ---

var mediaQuery = "screen and (max-width: 992px) and (pointer: coarse)";

var getDeviceType = function getDeviceType() {

  return window.matchMedia(mediaQuery).matches ? "mobile" : "desktop";

};

// --- 1. CSS to hide widget until interaction ---

var style = document.createElement("style");

style.textContent = "\n  body.chat-hidden #chat-widget-container {\n    display: none !important;\n    pointer-events: none !important;\n    z-index: -1 !important;\n  }\n";

document.head.appendChild(style);

// --- 2. Load LiveChat script ---

function loadCvChatScript() {

  var s = document.createElement("script");

  s.src = "Master CDN SCRIPT";

  s.async = true;

  document.body.appendChild(s);

  console.log("LiveChat script loaded");

}

// --- 3. Initialize LiveChat widget ---

function initializeLiveChat() {

  var attempts = 0;

  var maxAttempts = 7;

  var retryDelay = 300;

  var _tryInit = function tryInit() {

    if (typeof LiveChatWidget === "undefined" || window.__lc_inited) {

      if (attempts < maxAttempts) {

        attempts++;

        setTimeout(_tryInit, retryDelay);

      } else {

        console.error("Failed to initialize LiveChat script");

      }

    } else {

      LiveChatWidget.init();

      LiveChatWidget.on('ready', function () {

        LiveChatWidget.get('customer_data', function (data) {

          var status = data === null || data === void 0 ? void 0 : data.status;

          if (status === 'chatting' || status === 'queued') {

            document.body.classList.remove('chat-hidden');

          }

        });

      });

    }

  };

  _tryInit();

}

// --- 4. Hide chat by default (for mobile only) ---

function setInitialState() {

  document.body.classList.add("chat-hidden");

}

// --- 5. Show chat when user interacts ---

function markUserInteraction() {

  setTimeout(function () {

    document.body.classList.remove("chat-hidden");

    console.log("Chat widget visible after interaction");

  }, 100);

}

// --- 6. Setup ---

window.__lc = window.__lc || {};

Object.assign(window.__lc, {

  asyncInit: true

});

if (getDeviceType() === "mobile") {

  setInitialState();

}

loadCvChatScript();

initializeLiveChat();

// Listen for first user interaction

["click", "keydown", "scroll", "touchstart"].forEach(function (evt) {

  return window.addEventListener(evt, markUserInteraction, {

    once: true

  });

});

</script>

Step 3 - Copy & Paste the Mobile Speed Load Script 

Use the above script to add it to either:
-Client's GTM - https://scribehow.com/shared/How_To_or_GTM_Setup_247__A7svuo56ROuCNjHvwTnOxQ

-Hardcode at the backend - ( Client's developer to action)