@saasquatch/squatch-js 2.8.2-2 → 2.8.2-21

package/dist/squatch.js

@@ -1110,393 +1110,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       setTimeout(resolve, duration);
     });
   }
-  const getSkeleton = ({
-    height = "500px",
-    skeletonBackgroundColor = "#e0e0e0",
-    skeletonShimmerColor = "#f5f5f5",
-    borderColor = "#ccc"
-  }) => {
-    return `
-    <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-			.widget-container {
-				background: white;
-				width: 100%;
-				max-width: 900px;
-				padding: 40px;
-				border-radius: 12px;
-				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-				box-sizing: border-box;
-			}
-
-			@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;
-			}
-
-			.sk-title-lg {
-				height: 36px;
-				width: 50%;
-				margin-bottom: 16px;
-			}
-			.sk-title-md {
-				height: 28px;
-				width: 30%;
-				margin-bottom: 20px;
-				margin-top: 40px;
-			}
-			.sk-text {
-				height: 16px;
-				width: 80%;
-				margin-bottom: 8px;
-			}
-			.sk-text-short {
-				width: 40%;
-			}
-			.sk-label {
-				height: 14px;
-				width: 25%;
-				margin-bottom: 10px;
-			}
-
-			.hero-section {
-				display: flex;
-				gap: 40px;
-				margin-bottom: 40px;
-				border-bottom: 1px solid ${borderColor};
-				padding-bottom: 40px;
-				flex-direction: row;
-			}
-			.hero-content {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-			}
-			.hero-image {
-				flex: 1;
-				height: 300px;
-				border-radius: 12px;
-			}
-
-			.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;
-				border-top: 1px solid ${borderColor};
-				border-bottom: 1px solid ${borderColor};
-			}
-			.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-header {
-				display: flex;
-				gap: 16px;
-				margin-bottom: 16px;
-			}
-			.sk-th {
-				height: 16px;
-			}
-			.table-row {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				padding: 16px 0;
-				border-bottom: 1px solid ${borderColor};
-			}
-
-			.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;
-				}
-				.hero-image {
-					height: 220px;
-					width: 100%;
-				}
-				.sk-title-lg {
-					width: 80%;
-				}
-
-				.col-date {
-					display: none;
-				}
-			}
-
-			@media (max-width: 480px) {
-				body {
-					padding: 10px;
-				}
-				.widget-container {
-					padding: 16px;
-				}
-
-				.sk-stat-num {
-					width: 80px;
-					height: 40px;
-				}
-
-				.col-reward {
-					display: none;
-				}
-
-				.col-user {
-					flex: 3;
-				}
-				.col-status {
-					flex: 2;
-					display: flex;
-					justify-content: flex-end;
-				}
-			}
-    </style>
-
-    <div class="widget-container">
-			<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>
-		</div>
-  `;
-  };
   const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
   class EmbedWidget extends Widget {
     constructor(params, container) {
       super(params);
       __publicField(this, "show", this.open);
       __publicField(this, "hide", this.close);
-      if (container) this.container = container;
+      if (container) {
+        this.container = container;
+      }
     }
     async load() {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
-      const skeletonBackgroundColor = (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
-      const skeletonShimmerColor = (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
-      const borderColor = (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
-      const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
+      const brandingConfig2 = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+      const initialHeight = brandingConfig2 == null ? void 0 : brandingConfig2.loadingHeight;
+      (_d = (_c = brandingConfig2 == null ? void 0 : brandingConfig2.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
+      (_f = (_e = brandingConfig2 == null ? void 0 : brandingConfig2.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
+      (_g = brandingConfig2 == null ? void 0 : brandingConfig2.border) == null ? void 0 : _g.borderColor;
+      const sizes = (_h = brandingConfig2 == null ? void 0 : brandingConfig2.widgetSize) == null ? void 0 : _h.embeddedWidgets;
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-      console.log({
-        brandingConfig,
-        initialHeight,
-        widgetConfig: this.context.widgetConfig
-      });
-      const skeletonHTML = getSkeleton({
-        height: initialHeight,
-        skeletonBackgroundColor,
-        skeletonShimmerColor,
-        borderColor
-      });
-      const skeletonContainer = document.createElement("div");
-      skeletonContainer.innerHTML = skeletonHTML;
       const frame = this._createFrame({
         minWidth,
         maxWidth,
         initialHeight
       });
       const element = this._findElement();
-      frame.style.display = "none";
-      const injectContents = (target) => {
-        target.appendChild(skeletonContainer);
-        target.appendChild(frame);
-      };
       if ((_i = this.context) == null ? void 0 : _i.container) {
         element.style.visibility = "hidden";
         element.style.height = "0";
@@ -1507,16 +1146,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
             element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
           } else {
-            injectContents(element.shadowRoot);
+            element.shadowRoot.appendChild(frame);
           }
         } else if (element.firstChild) {
-          element.innerHTML = "";
-          injectContents(element);
+          element.replaceChild(frame, element.firstChild);
         } else {
-          injectContents(element);
+          element.appendChild(frame);
         }
       } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-        injectContents(element);
+        element.appendChild(frame);
       }
       const { contentWindow } = frame;
       if (!contentWindow) {
@@ -1524,16 +1162,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
-      console.log({ content: this.content, context: this.context, this: this });
       const domain = this.widgetApi.domain;
       frameDoc.write(`
-      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
+      ${((_k = brandingConfig2 == null ? void 0 : brandingConfig2.main) == null ? void 0 : _k.brandFont) ? `
         <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-        (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
-      )}">`}
+        (_l = brandingConfig2 == null ? void 0 : brandingConfig2.main) == null ? void 0 : _l.brandFont
+      )}" as="style">` : ""}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
       <style data-styles>
         html { visibility:hidden;}
@@ -1543,10 +1180,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       `);
       frameDoc.close();
       domready(frameDoc, async () => {
-        if (skeletonContainer && skeletonContainer.parentNode) {
-          skeletonContainer.parentNode.removeChild(skeletonContainer);
-        }
-        frame.style.display = "block";
         const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
         frame.height = initialHeight || frameDoc.body.scrollHeight;
         console.log({ height: frameDoc.body.scrollHeight });
@@ -1648,8 +1281,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     _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 brandingConfig2 = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+      const sizes = (_c = brandingConfig2 == null ? void 0 : brandingConfig2.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;
@@ -2112,125 +1745,470 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
     })).reduce((a, b) => ({ ...a, ...b }), {});
     return {
-      ...target,
-      ...replaced
+      ...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 = ({
+    height = "500px",
+    skeletonBackgroundColor = "#e0e0e0",
+    skeletonShimmerColor = "#f5f5f5",
+    borderColor = "#ccc"
+  }) => {
+    return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+			.widget-container {
+				background: white;
+				width: 100%;
+				max-width: 900px;
+				padding: 40px;
+				border-radius: 12px;
+				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+				box-sizing: border-box;
+			}
+
+			@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;
+			}
+
+			.sk-title-lg {
+				height: 36px;
+				width: 50%;
+				margin-bottom: 16px;
+			}
+			.sk-title-md {
+				height: 28px;
+				width: 30%;
+				margin-bottom: 20px;
+				margin-top: 40px;
+			}
+			.sk-text {
+				height: 16px;
+				width: 80%;
+				margin-bottom: 8px;
+			}
+			.sk-text-short {
+				width: 40%;
+			}
+			.sk-label {
+				height: 14px;
+				width: 25%;
+				margin-bottom: 10px;
+			}
+
+			.hero-section {
+				display: flex;
+				gap: 40px;
+				margin-bottom: 40px;
+				border-bottom: 1px solid ${borderColor};
+				padding-bottom: 40px;
+				flex-direction: row;
+			}
+			.hero-content {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+			.hero-image {
+				flex: 1;
+				height: 300px;
+				border-radius: 12px;
+			}
+
+			.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;
+				border-top: 1px solid ${borderColor};
+				border-bottom: 1px solid ${borderColor};
+			}
+			.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-header {
+				display: flex;
+				gap: 16px;
+				margin-bottom: 16px;
+			}
+			.sk-th {
+				height: 16px;
+			}
+			.table-row {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				padding: 16px 0;
+				border-bottom: 1px solid ${borderColor};
+			}
+
+			.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;
+				}
+				.hero-image {
+					height: 220px;
+					width: 100%;
+				}
+				.sk-title-lg {
+					width: 80%;
+				}
+
+				.col-date {
+					display: none;
+				}
+			}
+
+			@media (max-width: 480px) {
+				body {
+					padding: 10px;
+				}
+				.widget-container {
+					padding: 16px;
+				}
+
+				.sk-stat-num {
+					width: 80px;
+					height: 40px;
+				}
+
+				.col-reward {
+					display: none;
+				}
+
+				.col-user {
+					flex: 3;
+				}
+				.col-status {
+					flex: 2;
+					display: flex;
+					justify-content: flex-end;
+				}
+			}
+    </style>
+
+    <div class="widget-container">
+			<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>
+		</div>
+  `;
   };
-  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 _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
   function decodeUserJwt(tokenStr) {
     var _a2;
@@ -2464,12 +2442,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     async connectedCallback() {
-      var _a2, _b;
       this.loaded = true;
       this.container = this.getAttribute("container");
+      brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
+      const skeletonHTML = getSkeleton({});
+      const skeletonContainer = document.createElement("div");
+      skeletonContainer.id = "loading-skeleton";
+      skeletonContainer.innerHTML = skeletonHTML;
+      const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+      root.innerHTML = "";
+      root.appendChild(skeletonContainer);
       await this.renderWidget();
-      const slot = (_a2 = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _a2.find((c) => c.tagName === "SLOT");
-      if (slot) (_b = this.shadowRoot) == null ? void 0 : _b.removeChild(slot);
+      const loadingElement = root.getElementById("loading-skeleton");
+      if (loadingElement) {
+        loadingElement.remove();
+      }
       if (this.getAttribute("open") !== null) this.open();
     }
   }
@@ -2496,9 +2483,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     async connectedCallback() {
+      var _a2;
       this.loaded = true;
       this.container = this.getAttribute("container");
+      const skeletonHTML = `
+    <div>
+      <h1>Dynamic Content</h1>
+      <p>This content was dynamically added to the widget before it loaded.</p>
+    </div>
+  `;
+      const skeletonContainer = document.createElement("div");
+      skeletonContainer.id = "loading-skeleton";
+      skeletonContainer.innerHTML = skeletonHTML;
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode: "open" });
+      }
+      if (this.shadowRoot) {
+        this.shadowRoot.innerHTML = skeletonHTML;
+      }
       await this.renderWidget();
+      const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
+      if (loadingElement) {
+        loadingElement.remove();
+      }
       if (this.getAttribute("open") !== null) this.open();
     }
   }