CLS Overlay Code

The previous CLS performance code proved to be ineffective. While it resolved the CLS issue, it negatively impacted the widget’s behaviour. To address this, the team updated the widget implementation to ensure it no longer affects the website’s Cumulative Layout Shift (CLS). This was achieved by introducing a dummy chat overlay identical to the actual chat widget, which delays layout changes caused by the real widget and switches visibility using modifiers once the page layout has stabilized. Through this approach, the chat widget no longer contributes to CLS.

From a user experience perspective, the impact is minimal as most functionality and behaviour remain consistent with the previous implementation. The only noticeable change is that the chat widget appears with a slight delay on page reload. This updated implementation has been named the CLS Overlay Code.

If you would like to learn more about this code, please refer to the guide which explains the implementation in greater detail.

Guide - https://docs.google.com/document/d/1ujspRtOx3qbz3NxNxEcxV9jmgMlJLib1C5R4Pi15iVM/edit?tab=t.0

The code has been attached with this article. Before deploying it to production, please ensure the following changes are made to the attached code. 

    var DEBUG = true;

    var CHAT_SCRIPT_URL = "https://cht-srvc.net/api/lc.js?client=naj_northrop_and_johnson";

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

    var MAX_RETRIES = 7;

    var RETRY_INTERVAL = 500;

    var Z_INDEX = 2147483639;

    var OVERLAY_IMAGE_URL = ""; // optional: image URL for circle; empty = chat SVG fallback

    var OVERLAY_BAR_TEXT = "Chat now";

    var MOBILE_ENABLED = true; // false = hide widget entirely on mobile

    // Desktop config (required)

    var DESKTOP = {

      shape: "bar",

      theme: "smooth",

      // "bar" or "circle"

      position: "right",

      // "left" or "right"

      bgColor: "#7F4DED",   **(Note: This is the Client brand colour set on the minimized bar)

      iconColor: "white",  **(Note: This can be white, but we can also add hex colour similar to above)

      bottomSpacing: 0,   **(Note: If side spacing applies, tech to be notified)

      // px

      badgeColor: "#E30D34" // unread message badge  **(Note: Can remain as default- this is the notification colour)

    };

    // Mobile config — omit any key to inherit from DESKTOP

    var MOBILE = {

      shape: "circle",

      // position: "right",

      // bgColor: "#007bff",

      // iconColor: "white",

      bottomSpacing: 60

      // badgeColor: "#E30D34",