Sidebar - Banner Ads

// ****** Banner code start ********

// How you will add you banners into your membership site
// Follow the below instruction
// Below we declare a varible which name is banner. Do you see some of content inside the {}
// You have to provide correct information check the below List
// name: just a name for your tracking
// img: This is the correct image which will be show on your membership site
// actionUrl: The action URL will work when some one click on the banner image
// uid: uid will be unique

(function () {
  const banners = [
    {
      name: "banner1",
      img: "https://cdn.msgsndr.com/memberships%2FvJVPkXKI0ujMBULtlF3Q%2Fpost%2Fbe8cfc0a-23a6-4f9a-96b5-dd4526a090c8?alt=media&token=6229b525-3aa4-4321-8a13-033fd23c15d3",
      actionUrl: "https://www.youtube.com/",
      uid: "123",
    },
    {
      name: "banner2",
      img: "https://cdn.msgsndr.com/memberships%2FvJVPkXKI0ujMBULtlF3Q%2Fpost%2Fbe8cfc0a-23a6-4f9a-96b5-dd4526a090c8?alt=media&token=6229b525-3aa4-4321-8a13-033fd23c15d3",
      actionUrl: "https://www.youtube.com/",
      uid: "321",
    },
  ];

  const bannerStyleSheet = `.ghlexperts-banner {
      padding: 20px !important;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
      border-radius: 4px !important;
      margin-bottom: 20px !important;
      background-color: #fff !important;
    }`;

  const head = document.querySelector("head");

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

  style.innerHTML = bannerStyleSheet;

  head.append(style);

  const bannerElements = banners.map((bannerData) => {
    const bannerElement = document.createElement("div");

    const linkElement = document.createElement("a");
    linkElement.href = bannerData.actionUrl;
    linkElement.target = "_blank";

    const imgElement = document.createElement("img");
    imgElement.src = bannerData.img;
    imgElement.alt = bannerData.name;

    linkElement.appendChild(imgElement);
    bannerElement.appendChild(linkElement);

    bannerElement.id = bannerData.uid;
    bannerElement.className = "ghlexperts-banner";
    return bannerElement;
  });

  const getElementByFn = (selector, cb) => {
    const intervalId = setInterval(() => {
      const element = document.querySelectorAll(selector);

      if (element.length === 1) {
        clearInterval(intervalId);
        cb(element[0]);
      }

      if (element.length > 1) {
        clearInterval(intervalId);
        cb(element);
      }
    }, 200);
  };

  const runCustomCode = (pathname) => {
    if (!pathname.includes("categories")) return;

    bannerElements.forEach((element) => {
      if (element.isConnected) element.remove();
      getElementByFn("#instructor-card", (instructorCard) => {
        const parent = instructorCard.parentElement;
        if (!parent)
          return console.log(
            "Banner Not inserted is because ref element not found"
          );

        parent.prepend(element);
      });
    });
  };

  let pathname = "";
  window.addEventListener("DOMNodeInserted", (e) => {
    if (pathname == location.pathname) return;

    pathname = location.pathname;
    runCustomCode(pathname);
  });
})();
// ****** Banner code end ********

Add the JS code into Membership > Setting > Advance > Custom JS