@saasquatch/squatch-js 2.8.2-30 → 2.8.2-32

package/dist/squatch.js

@@ -1238,112 +1238,438 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return isVerified && (noContainer || isComponent);
     }
   }
-  const _log$6 = browserExports.debug("squatch-js:POPUPwidget");
-  let popupId = 0;
-  class PopupWidget extends Widget {
-    constructor(params, trigger = ".squatchpop") {
-      super(params);
-      __publicField(this, "trigger");
-      __publicField(this, "id");
-      __publicField(this, "show", this.open);
-      __publicField(this, "hide", this.close);
-      this.trigger = trigger;
-      if (this.container) {
-        this.id = "squatchModal";
-      } else {
-        this.id = popupId === 0 ? `squatchModal` : `squatchModal__${popupId}`;
-        popupId = popupId + 1;
+  const getSkeleton = ({
+    type = "verified-access",
+    height = "500px",
+    skeletonBackgroundColor = "#e0e0e0",
+    skeletonShimmerColor = "#f5f5f5"
+  }) => {
+    const referrerHTML = `
+    <div class="hero-section">
+        <div class="hero-content">
+          <div class="skeleton sk-title-lg"></div>
+          <div class="skeleton sk-text"></div>
+          <div class="skeleton sk-text sk-text-short"></div>
+        </div>
+        <div class="skeleton hero-image"></div>
+    </div>
+
+    <div class="share-section">
+      <div class="skeleton sk-label"></div>
+      <div class="skeleton sk-input"></div>
+      <div class="social-buttons">
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
+    <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
+
+    <div class="stats-section">
+      <div class="stat-card">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+      <div class="stat-card stat-divider">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md"></div>
+
+    <div class="table-header">
+      <div class="skeleton sk-th col-user"></div>
+      <div class="skeleton sk-th col-status"></div>
+      <div class="skeleton sk-th col-reward"></div>
+      <div class="skeleton sk-th col-date"></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+    
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="pagination">
+      <div class="skeleton sk-btn-page"></div>
+      <div class="skeleton sk-btn-page"></div>
+    </div>
+  `;
+    const instantAccessHTML = `
+    <div class="hero-section instant-access-layout">
+        <div class="skeleton hero-image ia-image"></div>
+        
+        <div class="hero-content ia-content">
+          <div class="skeleton sk-title-lg ia-center"></div>
+          <div class="skeleton sk-text ia-center"></div>
+          
+          <div class="skeleton sk-btn-action"></div>
+
+           <div class="skeleton sk-label"></div>
+           <div class="input-group">
+             <div class="skeleton sk-input"></div>
+             <div class="skeleton sk-btn-copy"></div>
+           </div>
+
+           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
+           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
+        </div>
+    </div>
+  `;
+    return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+      .widget-container {
+        background: white;
+        width: 100%;
+        padding: 40px;
+        box-sizing: border-box;
+        overflow: hidden; 
       }
-      document.head.insertAdjacentHTML(
-        "beforeend",
-        `<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`
-      );
-    }
-    _initialiseCTA() {
-      if (!this.trigger) return;
-      let triggerElement;
-      try {
-        triggerElement = document.querySelector(this.trigger) || document.querySelector(".impactpop");
-        if (this.trigger && !triggerElement)
-          _log$6("No element found with trigger selector", this.trigger);
-      } catch {
-        _log$6("Not a valid selector", this.trigger);
+
+      @keyframes shimmer {
+        0% { background-position: -100% 0; }
+        100% { background-position: 100% 0; }
       }
-      if (triggerElement) {
-        triggerElement.onclick = () => {
-          this.open();
-        };
+
+      .skeleton {
+        background: ${skeletonBackgroundColor};
+        background: linear-gradient(
+          90deg,
+          ${skeletonBackgroundColor} 25%,
+          ${skeletonShimmerColor} 50%,
+          ${skeletonBackgroundColor} 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite linear;
+        border-radius: 6px;
+        margin-bottom: 12px;
       }
-    }
-    _createPopupDialog() {
-      var _a2, _b, _c;
-      const dialog = document.createElement("dialog");
-      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.popupWidgets;
-      const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
-      const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
-      dialog.id = this.id;
-      dialog.setAttribute(
-        "style",
-        `width: 100%; min-width: ${minWidth}; max-width: ${maxWidth}; border: none; padding: 0;`
-      );
-      const onClick = (e) => {
-        e.stopPropagation();
-        if (e.target === dialog) dialog.close();
-      };
-      dialog.addEventListener("click", onClick);
-      return dialog;
-    }
-    async load() {
-      var _a2;
-      const frame = this._createFrame();
-      this._initialiseCTA();
-      const element = this.container ? this._findElement() : document.body;
-      const dialogParent = element.shadowRoot || element;
-      const dialog = this._createPopupDialog();
-      dialog.appendChild(frame);
-      if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
-        dialogParent.replaceChild(dialog, dialogParent.lastChild);
-      } else {
-        dialogParent.appendChild(dialog);
+
+      /* Typography Skeletons */
+      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
+      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
+      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
+      .sk-text-short { width: 40%; }
+      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
+
+      /* Layouts */
+      .hero-section {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 40px;
+        padding-bottom: 40px;
+        flex-direction: row;
+        height: 100%;
+        /* Removed border-bottom */
       }
-      const { contentWindow } = frame;
-      if (!contentWindow) {
-        throw new Error("Frame needs a content window");
+      
+      .hero-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
-      const frameDoc = contentWindow.document;
-      frameDoc.open();
-      frameDoc.write(this.content);
-      frameDoc.write(
-        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-      );
-      frameDoc.close();
-      _log$6("Popup template loaded into iframe");
-      await this._setupResizeHandler(frame);
-    }
-    async _setupResizeHandler(frame) {
-      const { contentWindow } = frame;
-      if (!contentWindow) {
-        throw new Error("Frame needs a content window");
+      
+      .hero-image {
+        flex: 1;
+        height: 300px;
+        border-radius: 12px;
       }
-      const frameDoc = contentWindow.document;
-      domready(frameDoc, async () => {
-        frameDoc.body.style.overflowY = "hidden";
-        frame.height = `${frameDoc.body.offsetHeight}px`;
-        const ro = new contentWindow["ResizeObserver"]((entries) => {
-          for (const entry of entries) {
-            const { top, bottom } = entry.contentRect;
-            const computedHeight = bottom + top;
-            frame.height = computedHeight + "";
-            entry.target.style = ``;
-          }
-        });
-        ro.observe(await this._findInnerContainer(frame));
-      });
-    }
-    open() {
-      const element = this.container ? this._findElement() : document.body;
-      const parent = element.shadowRoot || element;
+
+      /* -- Specific Instant Access Overrides -- */
+      .instant-access-layout {
+         margin-bottom: 0;
+         padding-bottom: 0;
+         align-items: center; 
+      }
+      .ia-image {
+         height: 400px; 
+      }
+      .ia-center {
+         margin-left: auto;
+         margin-right: auto;
+      }
+      .ia-content {
+         align-items: center; 
+         text-align: center;
+      }
+      .sk-btn-action {
+         height: 45px;
+         width: 140px;
+         border-radius: 6px;
+         margin: 24px auto;
+      }
+      .input-group {
+         display: flex;
+         gap: 10px;
+         width: 100%;
+         max-width: 400px;
+      }
+      .sk-btn-copy {
+         height: 50px;
+         width: 120px;
+         border-radius: 8px;
+      }
+      /* ------------------------------------- */
+
+      .share-section { margin-bottom: 40px; }
+      .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
+      
+      .social-buttons { display: flex; gap: 12px; }
+      .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
+
+      .stats-section {
+        display: flex;
+        gap: 24px;
+        margin-bottom: 40px;
+        padding: 30px 0;
+        /* Removed border-top and border-bottom */
+      }
+      .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
+      .stat-divider { padding-left: 24px; }
+      .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
+      .sk-stat-label { height: 18px; width: 80px; }
+
+      /* Table Styles */
+      .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
+      .sk-th { height: 16px; }
+      .table-row { 
+        display: flex; 
+        align-items: center; 
+        gap: 16px; 
+        padding: 16px 0; 
+        /* Removed border-bottom */
+      }
+      
+      .col-user { flex: 2; }
+      .col-status { flex: 1; }
+      .col-reward { flex: 2; }
+      .col-date { flex: 1; }
+
+      .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
+      .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
+
+      .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+      .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
+
+      @media (max-width: 768px) {
+        body { padding: 20px; }
+        .widget-container { padding: 24px; }
+
+        .hero-section { flex-direction: column-reverse; gap: 24px; }
+        .instant-access-layout { flex-direction: column; }
+        
+        .hero-image { height: 220px; width: 100%; }
+        .sk-title-lg { width: 100%; }
+
+        .col-date { display: none; }
+      }
+    </style>
+
+    <div class="widget-container">
+      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
+    </div>
+  `;
+  };
+  const _log$6 = browserExports.debug("squatch-js:POPUPwidget");
+  let popupId = 0;
+  class PopupWidget extends Widget {
+    constructor(params, trigger = ".squatchpop") {
+      super(params);
+      __publicField(this, "trigger");
+      __publicField(this, "id");
+      __publicField(this, "show", this.open);
+      __publicField(this, "hide", this.close);
+      this.trigger = trigger;
+      if (this.container) {
+        this.id = "squatchModal";
+      } else {
+        this.id = popupId === 0 ? `squatchModal` : `squatchModal__${popupId}`;
+        popupId = popupId + 1;
+      }
+      document.head.insertAdjacentHTML(
+        "beforeend",
+        `<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`
+      );
+    }
+    _initialiseCTA() {
+      if (!this.trigger) return;
+      let triggerElement;
+      try {
+        triggerElement = document.querySelector(this.trigger) || document.querySelector(".impactpop");
+        if (this.trigger && !triggerElement)
+          _log$6("No element found with trigger selector", this.trigger);
+      } catch {
+        _log$6("Not a valid selector", this.trigger);
+      }
+      if (triggerElement) {
+        triggerElement.onclick = () => {
+          this.open();
+        };
+      }
+    }
+    _createPopupDialog() {
+      var _a2, _b, _c;
+      const dialog = document.createElement("dialog");
+      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+      const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.popupWidgets;
+      const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
+      const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
+      dialog.id = this.id;
+      dialog.setAttribute(
+        "style",
+        `width: 100%; min-width: ${minWidth}; max-width: ${maxWidth}; border: none; padding: 0;`
+      );
+      const onClick = (e) => {
+        e.stopPropagation();
+        if (e.target === dialog) dialog.close();
+      };
+      dialog.addEventListener("click", onClick);
+      return dialog;
+    }
+    /*
+      async load() {
+        const frame = this._createFrame();
+        this._initialiseCTA();
+    
+        const element = this.container ? this._findElement() : document.body;
+    
+        const dialogParent = element.shadowRoot || element;
+        const dialog = this._createPopupDialog();
+        dialog.appendChild(frame);
+    
+        const skeletonHTML = getSkeleton({
+          height: "100%",
+          type: "verified-access",
+        });
+    
+        const skeletonContainer = document.createElement("div");
+        skeletonContainer.id = "loading-skeleton";
+        skeletonContainer.innerHTML = skeletonHTML;
+    
+        if (dialogParent.lastChild?.nodeName === "DIALOG") {
+          // Was reloaded
+          dialogParent.replaceChild(dialog, dialogParent.lastChild);
+        } else {
+          // First time rendering
+          dialogParent.appendChild(dialog);
+        }
+    
+        const { contentWindow } = frame;
+        if (!contentWindow) {
+          throw new Error("Frame needs a content window");
+        }
+    
+        const frameDoc = contentWindow.document;
+        frameDoc.open();
+        frameDoc.write(this.content);
+        frameDoc.write(
+          `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+        );
+        frameDoc.close();
+        _log("Popup template loaded into iframe");
+        await this._setupResizeHandler(frame);
+      }
+      */
+    async load() {
+      var _a2;
+      const frame = this._createFrame();
+      this._initialiseCTA();
+      const element = this.container ? this._findElement() : document.body;
+      const dialogParent = element.shadowRoot || element;
+      const dialog = this._createPopupDialog();
+      const skeletonHTML = getSkeleton({
+        height: "100%",
+        type: "verified-access"
+      });
+      const skeletonContainer = document.createElement("div");
+      skeletonContainer.id = "loading-skeleton";
+      skeletonContainer.innerHTML = skeletonHTML;
+      skeletonContainer.style.width = "100%";
+      frame.style.display = "none";
+      dialog.appendChild(skeletonContainer);
+      dialog.appendChild(frame);
+      if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
+        dialogParent.replaceChild(dialog, dialogParent.lastChild);
+      } else {
+        dialogParent.appendChild(dialog);
+      }
+      const removeSkeleton = () => {
+        const skel = dialog.querySelector("#loading-skeleton");
+        if (skel) {
+          skel.remove();
+        }
+        frame.style.display = "block";
+      };
+      frame.addEventListener("sq:load", removeSkeleton);
+      frame.addEventListener("load", removeSkeleton);
+      const safetyTimer = setTimeout(() => {
+        removeSkeleton();
+      }, 5e3);
+      const { contentWindow } = frame;
+      if (!contentWindow) {
+        throw new Error("Frame needs a content window");
+      }
+      const frameDoc = contentWindow.document;
+      frameDoc.open();
+      frameDoc.write(this.content);
+      frameDoc.write(
+        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+      );
+      frameDoc.close();
+      _log$6("Popup template loaded into iframe");
+      await this._setupResizeHandler(frame);
+      clearTimeout(safetyTimer);
+      removeSkeleton();
+    }
+    async _setupResizeHandler(frame) {
+      const { contentWindow } = frame;
+      if (!contentWindow) {
+        throw new Error("Frame needs a content window");
+      }
+      const frameDoc = contentWindow.document;
+      domready(frameDoc, async () => {
+        frameDoc.body.style.overflowY = "hidden";
+        frame.height = `${frameDoc.body.offsetHeight}px`;
+        const ro = new contentWindow["ResizeObserver"]((entries) => {
+          for (const entry of entries) {
+            const { top, bottom } = entry.contentRect;
+            const computedHeight = bottom + top;
+            frame.height = computedHeight + "";
+            entry.target.style = ``;
+          }
+        });
+        ro.observe(await this._findInnerContainer(frame));
+      });
+    }
+    open() {
+      const element = this.container ? this._findElement() : document.body;
+      const parent = element.shadowRoot || element;
       const dialog = parent.querySelector(`#${this.id}`);
       if (!dialog) throw new Error("Could not determine container div");
       dialog.showModal();
@@ -1453,672 +1779,414 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             engagementMedium: config.engagementMedium,
             container: config.container,
             trigger: config.trigger,
-            widgetConfig: {
-              values: {
-                brandingConfig: response == null ? void 0 : response.brandingConfig
-              }
-            }
-          }),
-          user: response.user
-        };
-      } catch (err) {
-        _log$5(err);
-        if (err.apiErrorCode) {
-          this._renderErrorWidget(err, config.engagementMedium);
-        }
-        throw new Error(err);
-      }
-    }
-    /**
-     * This function calls the {@link WidgetApi.render} method, and it renders
-     * the widget if it is successful. Otherwise it shows the "error" widget.
-     *
-     * @param {Object} config Config details
-     * @param {Object} config.user The user details
-     * @param {string} config.user.id The user id
-     * @param {string} config.user.accountId The user account id
-     * @param {WidgetType} config.widgetType The content of the widget
-     * @param {EngagementMedium} config.engagementMedium How to display the widget
-     * @param {string} config.jwt the JSON Web Token (JWT) that is used
-     *                            to validate the data (can be disabled)
-     *
-     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
-     */
-    async render(config) {
-      const raw = config;
-      const clean = validatePasswordlessConfig(raw);
-      try {
-        const response = await this.api.render(clean);
-        return {
-          widget: this._renderWidget(response, clean, {
-            type: "passwordless",
-            engagementMedium: clean.engagementMedium,
-            container: clean.container,
-            trigger: clean.trigger,
-            widgetConfig: {
-              values: {
-                brandingConfig: response == null ? void 0 : response.brandingConfig
-              }
-            }
-          }),
-          user: response.user
-        };
-      } catch (err) {
-        if (err.apiErrorCode) {
-          this._renderErrorWidget(err, clean.engagementMedium);
-        }
-        throw new Error(err);
-      }
-    }
-    /**
-     * Autofills a referral code into an element when someone has been referred.
-     * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
-     *
-     * @param selector Element class/id selector, or a callback function
-     * @returns
-     */
-    async autofill(selector) {
-      const input = selector;
-      if (typeof input === "function") {
-        try {
-          const response = await this.api.squatchReferralCookie();
-          input(response);
-        } catch (e) {
-          _log$5("Autofill error", e);
-          throw new Error(e);
-        }
-        return;
-      }
-      if (typeof input !== "string")
-        throw new Error("Autofill accepts a string or function");
-      let elems = document.querySelectorAll(input);
-      let elem;
-      if (elems.length > 0) {
-        elem = elems[0];
-      } else {
-        _log$5("Element id/class or function missing");
-        throw new Error("Element id/class or function missing");
-      }
-      try {
-        const response = await this.api.squatchReferralCookie();
-        elem.value = response.codes[0];
-      } catch (e) {
-        throw new Error(e);
-      }
-    }
-    /**
-     * @hidden
-     * @param {Object} response The json object return from the WidgetApi
-     * @param {Object} config Config details
-     * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
-     * @param {string} config.engagementMedium (POPUP, EMBED)
-     * @returns {Widget} widget (PopupWidget or EmbedWidget)
-     */
-    _renderWidget(response, config, context) {
-      var _a2;
-      _log$5("Rendering Widget...");
-      if (!response) throw new Error("Unable to get a response");
-      let widget2;
-      let displayOnLoad = !!config.displayOnLoad;
-      const opts = response.jsOptions || {};
-      const params = {
-        content: response.template,
-        type: config.widgetType || ((_a2 = opts.widget) == null ? void 0 : _a2.defaultWidgetType),
-        api: this.api,
-        domain: this.domain,
-        npmCdn: this.npmCdn,
-        context
-      };
-      if (opts.widgetUrlMappings) {
-        opts.widgetUrlMappings.forEach((rule) => {
-          var _a3, _b;
-          if (Widgets._matchesUrl(rule.url)) {
-            if (rule.widgetType !== "CONVERSION_WIDGET" || ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code)) {
-              displayOnLoad = rule.displayOnLoad;
-              _log$5(`Display ${rule.widgetType} on ${rule.url}`);
-            } else {
-              _log$5(
-                `Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`
-              );
-            }
-          }
-        });
-      }
-      if (opts.fuelTankAutofillUrls) {
-        _log$5("We found a fuel tank autofill!");
-        opts.fuelTankAutofillUrls.forEach(({ url, formSelector }) => {
-          var _a3, _b, _c;
-          if (Widgets._matchesUrl(url)) {
-            _log$5("Fuel Tank URL matches");
-            if ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code) {
-              const formAutofill = document.querySelector(formSelector);
-              if (formAutofill) {
-                formAutofill.value = ((_c = response.user.referredBy.referredReward) == null ? void 0 : _c.fuelTankCode) || "";
-              } else {
-                _log$5(
-                  new Error(
-                    `Element with id/class ${formSelector} was not found.`
-                  )
-                );
-              }
-            }
-          }
-        });
-      }
-      if (config.engagementMedium === "EMBED") {
-        widget2 = this._renderEmbedWidget(params);
-      } else {
-        widget2 = this._renderPopupWidget(params);
-        if (displayOnLoad) widget2.open();
-      }
-      return widget2;
-    }
-    _renderPopupWidget(params) {
-      const widget2 = new PopupWidget(params, params.context.trigger);
-      widget2.load();
-      return widget2;
-    }
-    _renderEmbedWidget(params) {
-      const widget2 = new EmbedWidget(params, params.context.container);
-      widget2.load();
-      return widget2;
-    }
-    /**
-     * @hidden
-     * @param {Object} error The json object containing the error details
-     * @param {string} em The engagementMedium
-     * @returns {void}
-     */
-    _renderErrorWidget(props, em = "POPUP") {
-      const { apiErrorCode, rsCode, message } = props;
-      _log$5(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
-      const params = {
-        content: "error",
-        rsCode,
-        api: this.api,
-        domain: this.domain,
-        npmCdn: this.npmCdn,
-        type: "ERROR_WIDGET",
-        context: { type: "error" }
-      };
-      let widget2;
-      if (em === "EMBED") {
-        widget2 = new EmbedWidget(params);
-        widget2.load();
-      } else if (em === "POPUP") {
-        widget2 = new PopupWidget(params);
-        widget2.load();
-      }
-    }
-    /**
-     * @hidden
-     * @param {string} rule A regular expression
-     * @returns {boolean} true if rule matches Url, false otherwise
-     */
-    static _matchesUrl(rule) {
-      return window.location.href.match(new RegExp(rule)) ? true : false;
-    }
-  }
-  class EventsApi {
-    /**
-     * Initialize a new {@link EventsApi} instance.
-     *
-     * @param {ConfigOptions} config Config details
-     *
-     * @example <caption>Browser example</caption>
-     * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
-     *
-     * @example <caption>Browserify/Webpack example</caption>
-     * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
-     * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
-     *
-     * @example <caption>Babel+Browserify/Webpack example</caption>
-     * import {EventsApi} from '@saasquatch/squatch-js';
-     * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
-     */
-    constructor(config) {
-      __publicField(this, "tenantAlias");
-      __publicField(this, "domain");
-      const raw = config;
-      const clean = validateConfig(raw);
-      this.tenantAlias = clean.tenantAlias;
-      this.domain = clean.domain;
-    }
-    /**
-     * Track an event for a user
-     *
-     * @param params Parameters for request
-     * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
-     *
-     * @return An ID to confirm the event has been accepted for asynchronous processing
-     */
-    track(params, options) {
-      const raw = params;
-      const rawOpts = options;
-      const body = _validateEvent(raw);
-      const { jwt } = _validateTrackOptions(rawOpts);
-      const ta = encodeURIComponent(this.tenantAlias);
-      const userId = encodeURIComponent(body.userId);
-      const accountId = encodeURIComponent(body.accountId);
-      const path = `/api/v1/${ta}/open/account/${accountId}/user/${userId}/events`;
-      const url = this.domain + path;
-      return doPost(url, JSON.stringify(body), jwt);
-    }
-  }
-  function _validateEvent(raw) {
-    if (!isObject$1(raw)) throw new Error("tracking parameter must be an object");
-    if (!(raw == null ? void 0 : raw["accountId"])) throw new Error("accountId field is required");
-    if (!(raw == null ? void 0 : raw["events"])) throw new Error("events field is required");
-    if (!(raw == null ? void 0 : raw["userId"])) throw new Error("userId field is required");
-    const clean = raw;
-    if (!Array.isArray(clean.events))
-      throw new Error("'events' should be an array");
-    return clean;
-  }
-  function _validateTrackOptions(raw) {
-    if (!isObject$1(raw)) throw new Error("'options' should be an object");
-    return raw;
-  }
-  function asyncLoad() {
-    var _a2;
-    const namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
-    const cached = ((_a2 = window["_" + namespace]) == null ? void 0 : _a2.ready) || [];
-    const declarativeCache = window.impactOnReady || window.squatchOnReady;
-    const readyFns = [...cached, declarativeCache].filter((a) => !!a);
-    setTimeout(() => {
-      if (!window[DEFAULT_NAMESPACE]) return;
-      window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE];
-      readyFns.forEach((cb) => cb());
-      window[DEFAULT_NAMESPACE]._auto();
-      window["_" + namespace] = void 0;
-      delete window["_" + namespace];
-    }, 0);
-  }
-  const _log$4 = browserExports.debug("squatch-js");
-  const isObject = (item) => typeof item === "object" && !Array.isArray(item);
-  const deepMerge = (target, source) => {
-    const isDeep = (prop) => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
-    const replaced = Object.getOwnPropertyNames(source).map((prop) => ({
-      [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
-    })).reduce((a, b) => ({ ...a, ...b }), {});
-    return {
-      ...target,
-      ...replaced
-    };
-  };
-  function b64decode(input) {
-    const binary = atob(input.replace(/_/g, "/").replace(/-/g, "+"));
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    return new TextDecoder("utf8").decode(bytes);
-  }
-  function b64encode(input) {
-    const encodedInput = new TextEncoder().encode(input);
-    const binary = Array.from(
-      encodedInput,
-      (byte) => String.fromCodePoint(byte)
-    ).join("");
-    return btoa(binary).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
-  }
-  function getTopDomain() {
-    var i, h, weird_cookie = "weird_get_top_level_domain=cookie", hostname = document.location.hostname.split(".");
-    for (i = hostname.length - 1; i >= 0; i--) {
-      h = hostname.slice(i).join(".");
-      document.cookie = weird_cookie + ";domain=." + h + ";";
-      if (document.cookie.indexOf(weird_cookie) > -1) {
-        document.cookie = weird_cookie.split("=")[0] + "=;domain=." + h + ";expires=Thu, 01 Jan 1970 00:00:01 GMT;";
-        return h;
-      }
-    }
-  }
-  function _pushCookie() {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const refParam = urlParams.get("_saasquatch") || "";
-    if (refParam) {
-      let paramsJSON = "", existingCookie = "", reEncodedCookie = "";
-      try {
-        paramsJSON = JSON.parse(b64decode(refParam));
-      } catch (error) {
-        _log$4("Unable to decode params", error);
-        return;
-      }
-      try {
-        existingCookie = JSON.parse(b64decode(api$1.get("_saasquatch")));
-        _log$4("existing cookie", existingCookie);
-      } catch (error) {
-        _log$4("Unable to retrieve cookie", error);
-      }
-      try {
-        const domain = getTopDomain();
-        _log$4("domain retrieved:", domain);
-        if (existingCookie) {
-          const newCookie = deepMerge(existingCookie, paramsJSON);
-          reEncodedCookie = b64encode(JSON.stringify(newCookie));
-          _log$4("cookie to store:", newCookie);
-        } else {
-          reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
-          _log$4("cookie to store:", paramsJSON);
-        }
-        api$1.set("_saasquatch", reEncodedCookie, {
-          expires: 365,
-          secure: false,
-          sameSite: "Lax",
-          domain,
-          path: "/"
-        });
-      } catch (error) {
-        _log$4("Unable to set cookie", error);
-      }
-    }
-  }
-  const _log$3 = browserExports.debug("squatch-js");
-  function _getAutoConfig() {
-    var _a2;
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const refParam = urlParams.get("_saasquatchExtra") || "";
-    if (!refParam) {
-      _log$3("No _saasquatchExtra param");
-      return;
-    }
-    const config = validateConfig({
-      tenantAlias: "UNKNOWN"
-    });
-    if (!config.domain) {
-      _log$3("domain must be provided in config to use _saasquatchExtra");
-      return;
-    }
-    let raw;
-    try {
-      raw = JSON.parse(b64decode(refParam));
-    } catch (e) {
-      _log$3("Unable to decode _saasquatchExtra config");
-      return;
-    }
-    function normalizeDomain(domain) {
-      return domain.replace(/^https?:\/\//, "");
-    }
-    const normalizedDomain = normalizeDomain(config.domain);
-    const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
-    const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
-    if (!widgetConfig) {
-      _log$3("_saasquatchExtra did not have an expected structure");
-      return void 0;
-    }
-    const { autoPopupWidgetType, ...rest } = widgetConfig;
-    return {
-      widgetConfig: {
-        widgetType: autoPopupWidgetType,
-        displayOnLoad: true,
-        ...rest
-      },
-      squatchConfig: {
-        ...config,
-        tenantAlias
-      }
-    };
-  }
-  const getSkeleton = ({
-    type = "verified-access",
-    height = "500px",
-    skeletonBackgroundColor = "#e0e0e0",
-    skeletonShimmerColor = "#f5f5f5"
-  }) => {
-    const referrerHTML = `
-    <div class="hero-section">
-        <div class="hero-content">
-          <div class="skeleton sk-title-lg"></div>
-          <div class="skeleton sk-text"></div>
-          <div class="skeleton sk-text sk-text-short"></div>
-        </div>
-        <div class="skeleton hero-image"></div>
-    </div>
-
-    <div class="share-section">
-      <div class="skeleton sk-label"></div>
-      <div class="skeleton sk-input"></div>
-      <div class="social-buttons">
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-      </div>
-    </div>
-
-    <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
-    <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
-
-    <div class="stats-section">
-      <div class="stat-card">
-        <div class="skeleton sk-stat-num"></div>
-        <div class="skeleton sk-stat-label"></div>
-      </div>
-      <div class="stat-card stat-divider">
-        <div class="skeleton sk-stat-num"></div>
-        <div class="skeleton sk-stat-label"></div>
-      </div>
-    </div>
-
-    <div class="skeleton sk-title-md"></div>
-
-    <div class="table-header">
-      <div class="skeleton sk-th col-user"></div>
-      <div class="skeleton sk-th col-status"></div>
-      <div class="skeleton sk-th col-reward"></div>
-      <div class="skeleton sk-th col-date"></div>
-    </div>
-
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-    
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-
-    <div class="pagination">
-      <div class="skeleton sk-btn-page"></div>
-      <div class="skeleton sk-btn-page"></div>
-    </div>
-  `;
-    const instantAccessHTML = `
-    <div class="hero-section instant-access-layout">
-        <div class="skeleton hero-image ia-image"></div>
-        
-        <div class="hero-content ia-content">
-          <div class="skeleton sk-title-lg ia-center"></div>
-          <div class="skeleton sk-text ia-center"></div>
-          
-          <div class="skeleton sk-btn-action"></div>
-
-           <div class="skeleton sk-label"></div>
-           <div class="input-group">
-             <div class="skeleton sk-input"></div>
-             <div class="skeleton sk-btn-copy"></div>
-           </div>
-
-           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
-           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
-        </div>
-    </div>
-  `;
-    return `
-    <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-      .widget-container {
-        background: white;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        overflow: hidden; 
-      }
-
-      @keyframes shimmer {
-        0% { background-position: -100% 0; }
-        100% { background-position: 100% 0; }
-      }
-
-      .skeleton {
-        background: ${skeletonBackgroundColor};
-        background: linear-gradient(
-          90deg,
-          ${skeletonBackgroundColor} 25%,
-          ${skeletonShimmerColor} 50%,
-          ${skeletonBackgroundColor} 75%
-        );
-        background-size: 200% 100%;
-        animation: shimmer 1.5s infinite linear;
-        border-radius: 6px;
-        margin-bottom: 12px;
+            widgetConfig: {
+              values: {
+                brandingConfig: response == null ? void 0 : response.brandingConfig
+              }
+            }
+          }),
+          user: response.user
+        };
+      } catch (err) {
+        _log$5(err);
+        if (err.apiErrorCode) {
+          this._renderErrorWidget(err, config.engagementMedium);
+        }
+        throw new Error(err);
       }
-
-      /* Typography Skeletons */
-      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
-      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
-      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
-      .sk-text-short { width: 40%; }
-      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
-
-      /* Layouts */
-      .hero-section {
-        display: flex;
-        gap: 40px;
-        margin-bottom: 40px;
-        padding-bottom: 40px;
-        flex-direction: row;
-        height: 100%;
-        /* Removed border-bottom */
+    }
+    /**
+     * This function calls the {@link WidgetApi.render} method, and it renders
+     * the widget if it is successful. Otherwise it shows the "error" widget.
+     *
+     * @param {Object} config Config details
+     * @param {Object} config.user The user details
+     * @param {string} config.user.id The user id
+     * @param {string} config.user.accountId The user account id
+     * @param {WidgetType} config.widgetType The content of the widget
+     * @param {EngagementMedium} config.engagementMedium How to display the widget
+     * @param {string} config.jwt the JSON Web Token (JWT) that is used
+     *                            to validate the data (can be disabled)
+     *
+     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
+     */
+    async render(config) {
+      const raw = config;
+      const clean = validatePasswordlessConfig(raw);
+      try {
+        const response = await this.api.render(clean);
+        return {
+          widget: this._renderWidget(response, clean, {
+            type: "passwordless",
+            engagementMedium: clean.engagementMedium,
+            container: clean.container,
+            trigger: clean.trigger,
+            widgetConfig: {
+              values: {
+                brandingConfig: response == null ? void 0 : response.brandingConfig
+              }
+            }
+          }),
+          user: response.user
+        };
+      } catch (err) {
+        if (err.apiErrorCode) {
+          this._renderErrorWidget(err, clean.engagementMedium);
+        }
+        throw new Error(err);
       }
-      
-      .hero-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+    }
+    /**
+     * Autofills a referral code into an element when someone has been referred.
+     * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
+     *
+     * @param selector Element class/id selector, or a callback function
+     * @returns
+     */
+    async autofill(selector) {
+      const input = selector;
+      if (typeof input === "function") {
+        try {
+          const response = await this.api.squatchReferralCookie();
+          input(response);
+        } catch (e) {
+          _log$5("Autofill error", e);
+          throw new Error(e);
+        }
+        return;
       }
-      
-      .hero-image {
-        flex: 1;
-        height: 300px;
-        border-radius: 12px;
+      if (typeof input !== "string")
+        throw new Error("Autofill accepts a string or function");
+      let elems = document.querySelectorAll(input);
+      let elem;
+      if (elems.length > 0) {
+        elem = elems[0];
+      } else {
+        _log$5("Element id/class or function missing");
+        throw new Error("Element id/class or function missing");
       }
-
-      /* -- Specific Instant Access Overrides -- */
-      .instant-access-layout {
-         margin-bottom: 0;
-         padding-bottom: 0;
-         align-items: center; 
+      try {
+        const response = await this.api.squatchReferralCookie();
+        elem.value = response.codes[0];
+      } catch (e) {
+        throw new Error(e);
       }
-      .ia-image {
-         height: 400px; 
+    }
+    /**
+     * @hidden
+     * @param {Object} response The json object return from the WidgetApi
+     * @param {Object} config Config details
+     * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
+     * @param {string} config.engagementMedium (POPUP, EMBED)
+     * @returns {Widget} widget (PopupWidget or EmbedWidget)
+     */
+    _renderWidget(response, config, context) {
+      var _a2;
+      _log$5("Rendering Widget...");
+      if (!response) throw new Error("Unable to get a response");
+      let widget2;
+      let displayOnLoad = !!config.displayOnLoad;
+      const opts = response.jsOptions || {};
+      const params = {
+        content: response.template,
+        type: config.widgetType || ((_a2 = opts.widget) == null ? void 0 : _a2.defaultWidgetType),
+        api: this.api,
+        domain: this.domain,
+        npmCdn: this.npmCdn,
+        context
+      };
+      if (opts.widgetUrlMappings) {
+        opts.widgetUrlMappings.forEach((rule) => {
+          var _a3, _b;
+          if (Widgets._matchesUrl(rule.url)) {
+            if (rule.widgetType !== "CONVERSION_WIDGET" || ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code)) {
+              displayOnLoad = rule.displayOnLoad;
+              _log$5(`Display ${rule.widgetType} on ${rule.url}`);
+            } else {
+              _log$5(
+                `Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`
+              );
+            }
+          }
+        });
       }
-      .ia-center {
-         margin-left: auto;
-         margin-right: auto;
+      if (opts.fuelTankAutofillUrls) {
+        _log$5("We found a fuel tank autofill!");
+        opts.fuelTankAutofillUrls.forEach(({ url, formSelector }) => {
+          var _a3, _b, _c;
+          if (Widgets._matchesUrl(url)) {
+            _log$5("Fuel Tank URL matches");
+            if ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code) {
+              const formAutofill = document.querySelector(formSelector);
+              if (formAutofill) {
+                formAutofill.value = ((_c = response.user.referredBy.referredReward) == null ? void 0 : _c.fuelTankCode) || "";
+              } else {
+                _log$5(
+                  new Error(
+                    `Element with id/class ${formSelector} was not found.`
+                  )
+                );
+              }
+            }
+          }
+        });
       }
-      .ia-content {
-         align-items: center; 
-         text-align: center;
+      if (config.engagementMedium === "EMBED") {
+        widget2 = this._renderEmbedWidget(params);
+      } else {
+        widget2 = this._renderPopupWidget(params);
+        if (displayOnLoad) widget2.open();
       }
-      .sk-btn-action {
-         height: 45px;
-         width: 140px;
-         border-radius: 6px;
-         margin: 24px auto;
+      return widget2;
+    }
+    _renderPopupWidget(params) {
+      const widget2 = new PopupWidget(params, params.context.trigger);
+      widget2.load();
+      return widget2;
+    }
+    _renderEmbedWidget(params) {
+      const widget2 = new EmbedWidget(params, params.context.container);
+      widget2.load();
+      return widget2;
+    }
+    /**
+     * @hidden
+     * @param {Object} error The json object containing the error details
+     * @param {string} em The engagementMedium
+     * @returns {void}
+     */
+    _renderErrorWidget(props, em = "POPUP") {
+      const { apiErrorCode, rsCode, message } = props;
+      _log$5(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+      const params = {
+        content: "error",
+        rsCode,
+        api: this.api,
+        domain: this.domain,
+        npmCdn: this.npmCdn,
+        type: "ERROR_WIDGET",
+        context: { type: "error" }
+      };
+      let widget2;
+      if (em === "EMBED") {
+        widget2 = new EmbedWidget(params);
+        widget2.load();
+      } else if (em === "POPUP") {
+        widget2 = new PopupWidget(params);
+        widget2.load();
       }
-      .input-group {
-         display: flex;
-         gap: 10px;
-         width: 100%;
-         max-width: 400px;
+    }
+    /**
+     * @hidden
+     * @param {string} rule A regular expression
+     * @returns {boolean} true if rule matches Url, false otherwise
+     */
+    static _matchesUrl(rule) {
+      return window.location.href.match(new RegExp(rule)) ? true : false;
+    }
+  }
+  class EventsApi {
+    /**
+     * Initialize a new {@link EventsApi} instance.
+     *
+     * @param {ConfigOptions} config Config details
+     *
+     * @example <caption>Browser example</caption>
+     * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
+     *
+     * @example <caption>Browserify/Webpack example</caption>
+     * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
+     * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+     *
+     * @example <caption>Babel+Browserify/Webpack example</caption>
+     * import {EventsApi} from '@saasquatch/squatch-js';
+     * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+     */
+    constructor(config) {
+      __publicField(this, "tenantAlias");
+      __publicField(this, "domain");
+      const raw = config;
+      const clean = validateConfig(raw);
+      this.tenantAlias = clean.tenantAlias;
+      this.domain = clean.domain;
+    }
+    /**
+     * Track an event for a user
+     *
+     * @param params Parameters for request
+     * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
+     *
+     * @return An ID to confirm the event has been accepted for asynchronous processing
+     */
+    track(params, options) {
+      const raw = params;
+      const rawOpts = options;
+      const body = _validateEvent(raw);
+      const { jwt } = _validateTrackOptions(rawOpts);
+      const ta = encodeURIComponent(this.tenantAlias);
+      const userId = encodeURIComponent(body.userId);
+      const accountId = encodeURIComponent(body.accountId);
+      const path = `/api/v1/${ta}/open/account/${accountId}/user/${userId}/events`;
+      const url = this.domain + path;
+      return doPost(url, JSON.stringify(body), jwt);
+    }
+  }
+  function _validateEvent(raw) {
+    if (!isObject$1(raw)) throw new Error("tracking parameter must be an object");
+    if (!(raw == null ? void 0 : raw["accountId"])) throw new Error("accountId field is required");
+    if (!(raw == null ? void 0 : raw["events"])) throw new Error("events field is required");
+    if (!(raw == null ? void 0 : raw["userId"])) throw new Error("userId field is required");
+    const clean = raw;
+    if (!Array.isArray(clean.events))
+      throw new Error("'events' should be an array");
+    return clean;
+  }
+  function _validateTrackOptions(raw) {
+    if (!isObject$1(raw)) throw new Error("'options' should be an object");
+    return raw;
+  }
+  function asyncLoad() {
+    var _a2;
+    const namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
+    const cached = ((_a2 = window["_" + namespace]) == null ? void 0 : _a2.ready) || [];
+    const declarativeCache = window.impactOnReady || window.squatchOnReady;
+    const readyFns = [...cached, declarativeCache].filter((a) => !!a);
+    setTimeout(() => {
+      if (!window[DEFAULT_NAMESPACE]) return;
+      window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE];
+      readyFns.forEach((cb) => cb());
+      window[DEFAULT_NAMESPACE]._auto();
+      window["_" + namespace] = void 0;
+      delete window["_" + namespace];
+    }, 0);
+  }
+  const _log$4 = browserExports.debug("squatch-js");
+  const isObject = (item) => typeof item === "object" && !Array.isArray(item);
+  const deepMerge = (target, source) => {
+    const isDeep = (prop) => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
+    const replaced = Object.getOwnPropertyNames(source).map((prop) => ({
+      [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
+    })).reduce((a, b) => ({ ...a, ...b }), {});
+    return {
+      ...target,
+      ...replaced
+    };
+  };
+  function b64decode(input) {
+    const binary = atob(input.replace(/_/g, "/").replace(/-/g, "+"));
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return new TextDecoder("utf8").decode(bytes);
+  }
+  function b64encode(input) {
+    const encodedInput = new TextEncoder().encode(input);
+    const binary = Array.from(
+      encodedInput,
+      (byte) => String.fromCodePoint(byte)
+    ).join("");
+    return btoa(binary).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
+  }
+  function getTopDomain() {
+    var i, h, weird_cookie = "weird_get_top_level_domain=cookie", hostname = document.location.hostname.split(".");
+    for (i = hostname.length - 1; i >= 0; i--) {
+      h = hostname.slice(i).join(".");
+      document.cookie = weird_cookie + ";domain=." + h + ";";
+      if (document.cookie.indexOf(weird_cookie) > -1) {
+        document.cookie = weird_cookie.split("=")[0] + "=;domain=." + h + ";expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+        return h;
       }
-      .sk-btn-copy {
-         height: 50px;
-         width: 120px;
-         border-radius: 8px;
+    }
+  }
+  function _pushCookie() {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const refParam = urlParams.get("_saasquatch") || "";
+    if (refParam) {
+      let paramsJSON = "", existingCookie = "", reEncodedCookie = "";
+      try {
+        paramsJSON = JSON.parse(b64decode(refParam));
+      } catch (error) {
+        _log$4("Unable to decode params", error);
+        return;
       }
-      /* ------------------------------------- */
-
-      .share-section { margin-bottom: 40px; }
-      .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
-      
-      .social-buttons { display: flex; gap: 12px; }
-      .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
-
-      .stats-section {
-        display: flex;
-        gap: 24px;
-        margin-bottom: 40px;
-        padding: 30px 0;
-        /* Removed border-top and border-bottom */
+      try {
+        existingCookie = JSON.parse(b64decode(api$1.get("_saasquatch")));
+        _log$4("existing cookie", existingCookie);
+      } catch (error) {
+        _log$4("Unable to retrieve cookie", error);
       }
-      .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
-      .stat-divider { padding-left: 24px; }
-      .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
-      .sk-stat-label { height: 18px; width: 80px; }
-
-      /* Table Styles */
-      .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
-      .sk-th { height: 16px; }
-      .table-row { 
-        display: flex; 
-        align-items: center; 
-        gap: 16px; 
-        padding: 16px 0; 
-        /* Removed border-bottom */
+      try {
+        const domain = getTopDomain();
+        _log$4("domain retrieved:", domain);
+        if (existingCookie) {
+          const newCookie = deepMerge(existingCookie, paramsJSON);
+          reEncodedCookie = b64encode(JSON.stringify(newCookie));
+          _log$4("cookie to store:", newCookie);
+        } else {
+          reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
+          _log$4("cookie to store:", paramsJSON);
+        }
+        api$1.set("_saasquatch", reEncodedCookie, {
+          expires: 365,
+          secure: false,
+          sameSite: "Lax",
+          domain,
+          path: "/"
+        });
+      } catch (error) {
+        _log$4("Unable to set cookie", error);
       }
-      
-      .col-user { flex: 2; }
-      .col-status { flex: 1; }
-      .col-reward { flex: 2; }
-      .col-date { flex: 1; }
-
-      .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
-      .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
-
-      .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
-      .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
-
-      @media (max-width: 768px) {
-        body { padding: 20px; }
-        .widget-container { padding: 24px; }
-
-        .hero-section { flex-direction: column-reverse; gap: 24px; }
-        .instant-access-layout { flex-direction: column; }
-        
-        .hero-image { height: 220px; width: 100%; }
-        .sk-title-lg { width: 100%; }
-
-        .col-date { display: none; }
+    }
+  }
+  const _log$3 = browserExports.debug("squatch-js");
+  function _getAutoConfig() {
+    var _a2;
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const refParam = urlParams.get("_saasquatchExtra") || "";
+    if (!refParam) {
+      _log$3("No _saasquatchExtra param");
+      return;
+    }
+    const config = validateConfig({
+      tenantAlias: "UNKNOWN"
+    });
+    if (!config.domain) {
+      _log$3("domain must be provided in config to use _saasquatchExtra");
+      return;
+    }
+    let raw;
+    try {
+      raw = JSON.parse(b64decode(refParam));
+    } catch (e) {
+      _log$3("Unable to decode _saasquatchExtra config");
+      return;
+    }
+    function normalizeDomain(domain) {
+      return domain.replace(/^https?:\/\//, "");
+    }
+    const normalizedDomain = normalizeDomain(config.domain);
+    const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
+    const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
+    if (!widgetConfig) {
+      _log$3("_saasquatchExtra did not have an expected structure");
+      return void 0;
+    }
+    const { autoPopupWidgetType, ...rest } = widgetConfig;
+    return {
+      widgetConfig: {
+        widgetType: autoPopupWidgetType,
+        displayOnLoad: true,
+        ...rest
+      },
+      squatchConfig: {
+        ...config,
+        tenantAlias
       }
-    </style>
-
-    <div class="widget-container">
-      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
-    </div>
-  `;
-  };
+    };
+  }
   const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
   function decodeUserJwt(tokenStr) {
     var _a2;
@@ -2416,8 +2484,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       skeletonContainer.id = "loading-skeleton";
       skeletonContainer.innerHTML = skeletonHTML;
       const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-      root.innerHTML = "";
-      root.appendChild(skeletonContainer);
+      const container = root.getElementById("#squatchModal");
+      console.log("Container is ", container);
+      if (container) {
+        container.innerHTML = "";
+        container.appendChild(skeletonContainer);
+      }
       await this.renderWidget();
       const loadingElement = root.getElementById("loading-skeleton");
       if (loadingElement) {