Shopify load Gorgias chat after clicking on chat icon

gorgias-chat-loader.js

/**
 * GorgiasChatLoader
 * @description Custom element to load Gorgias chat widget when the user clicks on it.
 */
class GorgiasChatLoader extends HTMLElement {
  constructor() {
    super();
    this.bundleLoaderId = this.dataset.id;
    if (!this.bundleLoaderId) {
      this.hideLoadButton();
      return;
    }

    // Handle load button click
    this.button = this.querySelector('button');
    this.button.addEventListener('click', () => {
      this.hideLoadButton();
      this.loadGorgias();
    });
  }

  /**
   * hideLoadButton
   * @description Hide the load button.
   */
  hideLoadButton() {
    this.button.setAttribute('disabled', true);
    this.button.classList.add('hidden');
  }

  /**
   * loadGorgias
   * @description Inject Gorgias chat widget script into the DOM.
   */
  loadGorgias() {
    // Create the script tag, set the appropriate attributes and append it to the body
    const script = document.createElement('script');
    script.id = 'gorgias-chat-widget-install-v3';
    script.src = `https://config.gorgias.chat/bundle-loader/${this.bundleLoaderId}`;
    script.async = true;
    script.onload = this.openGorgias();
    document.body.appendChild(script);
  }

  /**
   * openGorgias
   * @description Open Gorgias chat widget when the gorgias chat container is set in the DOM.
   */
  openGorgias() {
    // Select the node that will be observed for mutations
    const targetNode = document.body;

    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    const mutationCallback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === 'childList') {
          // Check
          if (mutation.target.id === 'gorgias-chat-container') {
            var initGorgiasChatPromise = window.GorgiasChat
              ? window.GorgiasChat.init()
              : new Promise(function (resolve) {
                  window.addEventListener(
                    "gorgias-widget-loaded",
                    function () {
                      resolve();
                    }
                  );
                });
            initGorgiasChatPromise.then(async () => {
              GorgiasChat.open();
              observer.disconnect();
            });
          }
        }
      }
    };

    // Create an observer instance linked to the mutationCallback function
    const observer = new MutationObserver(mutationCallback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  }
}

customElements.define('gorgias-chat-loader', GorgiasChatLoader);

gorgias-chat-loader.liquid

{%- if settings.gorgias_bundle_loader_id != blank -%}
  <gorgias-chat-loader class="block" data-id="{{ settings.gorgias_bundle_loader_id }}">
    <button type="button" class="bg-[#D2DFD9] p-4 rounded-full fixed left-[1.875rem] bottom-[1.875rem] z-fixed">
      <svg class="w-7 h-7" width="28" height="28" viewBox="0 0 100 100" fill="none" role="img" aria-label="Bubble icon button" xmlns="http://www.w3.org/2000/svg"><filter id="33c9df204aeec9aa096f1fd360bd4160"><feGaussianBlur stdDeviation="0,4" in="SourceAlpha"></feGaussianBlur><feOffset dx="0" dy="4" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feComposite operator="in" in2="offsetblur"></feComposite><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><path fill="#161616" filter="#33c9df204aeec9aa096f1fd360bd4160" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50h30.8l0-10.6C92.5,80.2,100,66,100,50C100,22.4,77.6,0,50,0z M32,54.5 c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C36.5,52.5,34.5,54.5,32,54.5z M50,54.5c-2.5,0-4.5-2-4.5-4.5 c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C54.5,52.5,52.5,54.5,50,54.5z M68,54.5c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5 s4.5,2,4.5,4.5C72.5,52.5,70.5,54.5,68,54.5z"></path></svg>
    </button>
  </gorgias-chat-loader>
{%- endif -%}

{%- if settings.gorgias_bundle_loader_id != blank or request.design_mode -%}
  <script src="{{ 'gorgias-chat-loader.js' | asset_url }}" async></script>
{%- endif -%}

settings_schema.json

[
  {
    "name": "Gorgias",
    "settings": [
      {
        "type": "text",
        "id": "gorgias_bundle_loader_id",
        "label": "Bundle loader id",
        "info": "For example: 00000000000000000000000000. Can be found in Gorgias under Channels > Chat > Manual installation."
      }
    ]
  }
]