@saasquatch/squatch-js 2.6.0-5 → 2.6.0-7

package/dist/squatch.esm.js

@@ -34,10 +34,58 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
+var DEFAULT_NPM_CDN = "https://fast.ssqt.io/npm";
+function validateConfig(_raw) {
+  if (typeof _raw !== "object") throw new Error("config must be an object");
+  var tenant = window.squatchTenant;
+  var config = getConfig();
+  var raw = {
+    tenantAlias: (_raw == null ? void 0 : _raw["tenantAlias"]) || tenant,
+    domain: (_raw == null ? void 0 : _raw["domain"]) || (config == null ? void 0 : config.domain),
+    npmCdn: (_raw == null ? void 0 : _raw["npmCdn"]) || (config == null ? void 0 : config.npmCdn),
+    debug: (_raw == null ? void 0 : _raw["debug"]) || (config == null ? void 0 : config.debug)
+  };
+  if (typeof raw.tenantAlias !== "string") throw new Error("tenantAlias not provided");
+  var tenantAlias = raw.tenantAlias;
+  var domain = typeof raw.domain === "string" && raw.domain || DEFAULT_DOMAIN;
+  var debug = typeof raw.debug === "boolean" && raw.debug || false;
+  var npmCdn = typeof raw.npmCdn === "string" && raw.npmCdn || DEFAULT_NPM_CDN;
+  return {
+    tenantAlias,
+    domain,
+    debug,
+    npmCdn
+  };
+}
+function isObject$1(obj) {
+  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
+}
+function validateLocale(locale) {
+  if (locale && /^[a-z]{2}_(?:[A-Z]{2}|[0-9]{3})$/.test(locale)) {
+    return locale;
+  }
+}
+function validateWidgetConfig(raw) {
+  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
+  if (!(raw != null && raw["user"])) throw new Error("Required properties missing.");
+  return raw;
+}
+function validatePasswordlessConfig(raw) {
+  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
+  return raw;
+}
+function getToken() {
+  return window.impactTBDToken || window.squatchToken;
+}
+function getConfig() {
+  return window.impactTBDConfig || window.squatchConfig;
+}
+
 debug("squatch-js:io");
 
 async function doQuery(url, query, variables, jwt) {
-  var token = jwt || window.squatchToken;
+  var token = jwt || getToken();
 
   var headers = _extends({
     Accept: "application/json",
@@ -72,7 +120,7 @@ async function doGet(url, jwt) {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
-  var token = jwt || window.squatchToken;
+  var token = jwt || getToken();
   if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
@@ -93,7 +141,7 @@ async function doPost(url, data, jwt) {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
-  var token = jwt || window.squatchToken;
+  var token = jwt || getToken();
   if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
@@ -115,7 +163,7 @@ async function doPut(url, data, jwt) {
     "Content-Type": "application/json",
     "X-SaaSquatch-Referrer": window ? window.location.href : ""
   };
-  var token = jwt || window.squatchToken;
+  var token = jwt || getToken();
   if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
@@ -133,48 +181,6 @@ async function doPut(url, data, jwt) {
   }
 }
 
-var DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
-var DEFAULT_NPM_CDN = "https://fast.ssqt.io/npm";
-function validateConfig(_raw) {
-  var _window$squatchConfig, _window$squatchConfig2, _window$squatchConfig3;
-
-  if (typeof _raw !== "object") throw new Error("config must be an object");
-  var raw = {
-    tenantAlias: (_raw == null ? void 0 : _raw["tenantAlias"]) || window.squatchTenant,
-    domain: (_raw == null ? void 0 : _raw["domain"]) || ((_window$squatchConfig = window.squatchConfig) == null ? void 0 : _window$squatchConfig.domain),
-    npmCdn: (_raw == null ? void 0 : _raw["npmCdn"]) || ((_window$squatchConfig2 = window.squatchConfig) == null ? void 0 : _window$squatchConfig2.npmCdn),
-    debug: (_raw == null ? void 0 : _raw["debug"]) || ((_window$squatchConfig3 = window.squatchConfig) == null ? void 0 : _window$squatchConfig3.debug)
-  };
-  if (typeof raw.tenantAlias !== "string") throw new Error("tenantAlias not provided");
-  var tenantAlias = raw.tenantAlias;
-  var domain = typeof raw.domain === "string" && raw.domain || DEFAULT_DOMAIN;
-  var debug = typeof raw.debug === "boolean" && raw.debug || false;
-  var npmCdn = typeof raw.npmCdn === "string" && raw.npmCdn || DEFAULT_NPM_CDN;
-  return {
-    tenantAlias,
-    domain,
-    debug,
-    npmCdn
-  };
-}
-function isObject$1(obj) {
-  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
-}
-function validateLocale(locale) {
-  if (locale && /^[a-z]{2}_(?:[A-Z]{2}|[0-9]{3})$/.test(locale)) {
-    return locale;
-  }
-}
-function validateWidgetConfig(raw) {
-  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
-  if (!(raw != null && raw["user"])) throw new Error("Required properties missing.");
-  return raw;
-}
-function validatePasswordlessConfig(raw) {
-  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
-  return raw;
-}
-
 var RENDER_WIDGET_QUERY = "\n  query renderWidget ($user: UserIdInput, $engagementMedium: UserEngagementMedium, $widgetType: WidgetType, $locale: RSLocale) {\n    renderWidget(user: $user, engagementMedium: $engagementMedium, widgetType: $widgetType, locale: $locale) {\n      template\n      user {\n        id\n        accountId\n      }\n      jsOptions\n      widgetConfig {\n        values\n      }\n    }\n  }\n";
 
 /**
@@ -357,14 +363,14 @@ class AnalyticsApi {
    *
    */
   constructor(config) {
-    var _window$squatchConfig;
+    var _getConfig;
 
     this.domain = void 0;
     var raw = config;
 
     var clean = _validateAnalyticsConfig(raw);
 
-    this.domain = (clean == null ? void 0 : clean["domain"]) || ((_window$squatchConfig = window.squatchConfig) == null ? void 0 : _window$squatchConfig.domain) || DEFAULT_DOMAIN;
+    this.domain = (clean == null ? void 0 : clean["domain"]) || ((_getConfig = getConfig()) == null ? void 0 : _getConfig.domain) || DEFAULT_DOMAIN;
   }
 
   pushAnalyticsLoadEvent(params) {
@@ -400,7 +406,7 @@ function _validateAnalyticsConfig(raw) {
 // @ts-check
 /** @hidden */
 
-var _log$7 = debug("squatch-js:widget");
+var _log$8 = debug("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -421,7 +427,7 @@ class Widget {
     this.npmCdn = void 0;
     this.container = void 0;
 
-    _log$7("widget initializing ...");
+    _log$8("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
     this.type = params.type;
@@ -431,7 +437,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.container;
+    this.container = params.context.container;
   }
 
   _findElement() {
@@ -441,22 +447,22 @@ class Widget {
       // selector is a string
       element = document.querySelector(this.container);
 
-      _log$7("loading widget with selector", element); // selector is an HTML element
+      _log$8("loading widget with selector", element); // selector is an HTML element
 
     } else if (this.container instanceof HTMLElement) {
       element = this.container;
 
-      _log$7("loading widget with container", element); // garbage container found
+      _log$8("loading widget with container", element); // garbage container found
 
     } else if (this.container) {
       element = null;
 
-      _log$7("container must be an HTMLElement or string", this.container); // find element on page
+      _log$8("container must be an HTMLElement or string", this.container); // find element on page
 
     } else {
       element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
 
-      _log$7("loading widget with default selector", element);
+      _log$8("loading widget with default selector", element);
     }
 
     if (!(element instanceof HTMLElement)) throw new Error("element with selector '" + (this.container || "#squatchembed or .squatchembed") + "' not found.'");
@@ -514,9 +520,9 @@ class Widget {
     }
 
     (_this$analyticsApi$pu = this.analyticsApi.pushAnalyticsLoadEvent(params)) == null ? void 0 : _this$analyticsApi$pu.then(response => {
-      _log$7(params.engagementMedium + " loaded event recorded.");
+      _log$8(params.engagementMedium + " loaded event recorded.");
     }).catch(ex => {
-      _log$7("ERROR: pushAnalyticsLoadEvent() " + ex);
+      _log$8("ERROR: pushAnalyticsLoadEvent() " + ex);
     });
   }
 
@@ -529,9 +535,9 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$7(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
+        _log$8(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
       }).catch(ex => {
-        _log$7("ERROR: pushAnalyticsShareClickedEvent() " + ex);
+        _log$8("ERROR: pushAnalyticsShareClickedEvent() " + ex);
       });
     }
   } // TODO: CA: Refactor how error templates are shown
@@ -653,7 +659,7 @@ class Widget {
         message
       } = _ref3;
 
-      _log$7("" + message);
+      _log$8("" + message);
     });
   }
 
@@ -680,7 +686,7 @@ class Widget {
 }
 
 function delay(duration) {
-  return new Promise(function (resolve, reject) {
+  return new Promise(resolve => {
     setTimeout(resolve, duration);
   });
 }
@@ -710,7 +716,7 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-var _log$6 = debug("squatch-js:EMBEDwidget");
+var _log$7 = debug("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
@@ -729,6 +735,7 @@ class EmbedWidget extends Widget {
     super(params);
     this.show = this.open;
     this.hide = this.close;
+    if (container) this.container = container;
   }
 
   async load() {
@@ -740,7 +747,9 @@ class EmbedWidget extends Widget {
       if (element.shadowRoot) {
         var _element$shadowRoot$l;
 
-        if (((_element$shadowRoot$l = element.shadowRoot.lastChild) == null ? void 0 : _element$shadowRoot$l.nodeName) === "IFRAME") element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);else {
+        if (((_element$shadowRoot$l = element.shadowRoot.lastChild) == null ? void 0 : _element$shadowRoot$l.nodeName) === "IFRAME") {
+          element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
+        } else {
           element.shadowRoot.appendChild(frame);
         }
       } // Widget reloaded - replace existing element
@@ -784,12 +793,12 @@ class EmbedWidget extends Widget {
         }
       });
       var container = await this._findInnerContainer(frame);
-      ro.observe(container); // Regular load - trigger event
+      ro.observe(container);
 
-      if (!this.container || this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-")) {
+      if (this._shouldFireLoadEvent()) {
         this._loadEvent(_sqh);
 
-        _log$6("loaded");
+        _log$7("loaded");
       }
     });
   }
@@ -803,7 +812,7 @@ class EmbedWidget extends Widget {
 
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to open");
+    if (!frame) return _log$7("no target element to open");
 
     var element = this._findElement();
 
@@ -814,15 +823,17 @@ class EmbedWidget extends Widget {
 
     var _sqh = (frame == null ? void 0 : (_frame$contentWindow = frame.contentWindow) == null ? void 0 : _frame$contentWindow.squatch) || (frame == null ? void 0 : (_frame$contentWindow2 = frame.contentWindow) == null ? void 0 : _frame$contentWindow2.widgetIdent);
 
-    this._loadEvent(_sqh);
+    if (this.context.user) {
+      this._loadEvent(_sqh);
 
-    _log$6("loaded");
+      _log$7("loaded");
+    }
   }
 
   close() {
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to close");
+    if (!frame) return _log$7("no target element to close");
 
     var element = this._findElement();
 
@@ -830,7 +841,7 @@ class EmbedWidget extends Widget {
     element.style.height = "0";
     element.style["overflow-y"] = "hidden";
 
-    _log$6("Embed widget closed");
+    _log$7("Embed widget closed");
   }
 
   _error(rs, mode, style) {
@@ -845,11 +856,18 @@ class EmbedWidget extends Widget {
     return super._error(rs, mode, style);
   }
 
+  _shouldFireLoadEvent() {
+    var noContainer = !this.container;
+    var isComponent = this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-");
+    var isVerified = !!this.context.user;
+    return isVerified && (noContainer || isComponent);
+  }
+
 }
 
 // @ts-check
 
-var _log$5 = debug("squatch-js:POPUPwidget");
+var _log$6 = debug("squatch-js:POPUPwidget");
 
 var popupId = 0;
 /**
@@ -896,9 +914,9 @@ class PopupWidget extends Widget {
       triggerElement
       /* HTMLButton */
       = document.querySelector(this.trigger);
-      if (this.trigger && !triggerElement) _log$5("No element found with trigger selector", this.trigger);
+      if (this.trigger && !triggerElement) _log$6("No element found with trigger selector", this.trigger);
     } catch (_unused) {
-      _log$5("Not a valid selector", this.trigger);
+      _log$6("Not a valid selector", this.trigger);
     } // Trigger is optional
 
 
@@ -906,16 +924,7 @@ class PopupWidget extends Widget {
       triggerElement.onclick = () => {
         this.open();
       };
-    } // const element = this._findElement();
-    // If widget is loaded with CTA, look for a 'squatchpop' element to use
-    // that element as a trigger as well.
-    // const triggerWhenCTA = element.querySelector(".squatchpop") as HTMLElement;
-    // if (this.trigger === "#cta" && triggerWhenCTA) {
-    //   triggerWhenCTA.onclick = () => {
-    //     this.open(frame);
-    //   };
-    // }
-
+    }
   }
 
   _createPopupDialog() {
@@ -924,6 +933,7 @@ class PopupWidget extends Widget {
     dialog.setAttribute("style", "width: 100%; max-width: 500px; border: none; padding: 0;");
 
     var onClick = e => {
+      e.stopPropagation();
       if (e.target === dialog) dialog.close();
     };
 
@@ -967,7 +977,7 @@ class PopupWidget extends Widget {
     frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
 
-    _log$5("Popup template loaded into iframe");
+    _log$6("Popup template loaded into iframe");
 
     this._setupResizeHandler(frame);
   }
@@ -1026,9 +1036,11 @@ class PopupWidget extends Widget {
 
       (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
 
-      this._loadEvent(_sqh);
+      if (this.context.user) {
+        this._loadEvent(_sqh);
 
-      _log$5("Popup opened");
+        _log$6("Popup opened");
+      }
     });
   }
 
@@ -1039,7 +1051,7 @@ class PopupWidget extends Widget {
     if (!dialog) throw new Error("Could not determine container div");
     dialog.close();
 
-    _log$5("Popup closed");
+    _log$6("Popup closed");
   }
 
   _clickedOutside(_ref) {
@@ -1060,7 +1072,7 @@ class PopupWidget extends Widget {
 
 }
 
-var _log$4 = debug("squatch-js:widgets");
+var _log$5 = debug("squatch-js:widgets");
 /**
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
  * {@link WidgetApi} but most people will prefer to use these easy methods.
@@ -1149,7 +1161,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$4(err);
+      _log$5(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1215,7 +1227,7 @@ class Widgets {
         var response = await this.api.squatchReferralCookie();
         input(response);
       } catch (e) {
-        _log$4("Autofill error", e);
+        _log$5("Autofill error", e);
 
         throw new Error(e);
       }
@@ -1231,7 +1243,7 @@ class Widgets {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$4("Element id/class or function missing");
+      _log$5("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
@@ -1257,7 +1269,7 @@ class Widgets {
   _renderWidget(response, config, context) {
     var _opts$widget;
 
-    _log$4("Rendering Widget...");
+    _log$5("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     var widget;
@@ -1280,16 +1292,16 @@ class Widgets {
           if (rule.widgetType !== "CONVERSION_WIDGET" || (_response$user = response.user) != null && (_response$user$referr = _response$user.referredBy) != null && _response$user$referr.code) {
             displayOnLoad = rule.displayOnLoad;
 
-            _log$4("Display " + rule.widgetType + " on " + rule.url);
+            _log$5("Display " + rule.widgetType + " on " + rule.url);
           } else {
-            _log$4("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
+            _log$5("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
           }
         }
       });
     }
 
     if (opts.fuelTankAutofillUrls) {
-      _log$4("We found a fuel tank autofill!");
+      _log$5("We found a fuel tank autofill!");
 
       opts.fuelTankAutofillUrls.forEach(_ref => {
         var {
@@ -1300,7 +1312,7 @@ class Widgets {
         if (Widgets._matchesUrl(url)) {
           var _response$user2, _response$user2$refer;
 
-          _log$4("Fuel Tank URL matches");
+          _log$5("Fuel Tank URL matches");
 
           if ((_response$user2 = response.user) != null && (_response$user2$refer = _response$user2.referredBy) != null && _response$user2$refer.code) {
             var formAutofill = document.querySelector(formSelector);
@@ -1310,7 +1322,7 @@ class Widgets {
 
               formAutofill.value = ((_response$user$referr2 = response.user.referredBy.referredReward) == null ? void 0 : _response$user$referr2.fuelTankCode) || "";
             } else {
-              _log$4(new Error("Element with id/class " + formSelector + " was not found."));
+              _log$5(new Error("Element with id/class " + formSelector + " was not found."));
             }
           }
         }
@@ -1318,15 +1330,9 @@ class Widgets {
     }
 
     if (config.engagementMedium === "EMBED") {
-      widget = this._renderEmbedWidget(params, params.context.container);
-    } else if (config.engagementMedium === "POPUP") {
-      widget = this._renderPopupWidget(params);
-      if (displayOnLoad) widget.open();
+      widget = this._renderEmbedWidget(params);
     } else {
-      _log$4("display popup on load");
-
-      widget = new PopupWidget(params);
-      widget.load();
+      widget = this._renderPopupWidget(params);
       if (displayOnLoad) widget.open();
     }
 
@@ -1339,8 +1345,8 @@ class Widgets {
     return widget;
   }
 
-  _renderEmbedWidget(params, container) {
-    var widget = new EmbedWidget(params, container);
+  _renderEmbedWidget(params) {
+    var widget = new EmbedWidget(params, params.context.container);
     widget.load();
     return widget;
   }
@@ -1363,7 +1369,7 @@ class Widgets {
       message
     } = props;
 
-    _log$4(new Error(apiErrorCode + " (" + rsCode + ") " + message));
+    _log$5(new Error(apiErrorCode + " (" + rsCode + ") " + message));
 
     var params = {
       content: "error",
@@ -1479,18 +1485,26 @@ function _validateTrackOptions(raw) {
 
 /** @hidden */
 function asyncLoad() {
-  var loaded = window.squatch || null;
-  var cached = window._squatch || null;
+  var impactNamespace = "impactTBD";
+  var namespace = window[impactNamespace] ? impactNamespace : "squatch";
+  console.log({
+    namespace
+  });
+  var loaded = window[namespace] || null;
+  var cached = window["_" + namespace] || null;
 
   if (loaded && cached) {
     var ready = cached.ready || [];
+    setTimeout(() => window["impactTBD"] = window.squatch, 0);
     ready.forEach(cb => setTimeout(() => cb(), 0));
-    setTimeout(() => window.squatch._auto(), 0); // @ts-ignore -- intetionally deletes `_squatch` to cleanup initialization
+    setTimeout(() => {
+      window.squatch._auto();
+    }, 0); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
 
-    window._squatch = undefined;
+    window["_" + namespace] = undefined;
 
     try {
-      delete window._squatch;
+      delete window["_" + namespace];
     } catch (e) {
       throw e;
     }
@@ -1499,7 +1513,7 @@ function asyncLoad() {
 
 /** @hidden */
 
-var _log$3 = debug("squatch-js");
+var _log$4 = debug("squatch-js");
 
 var isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -1552,7 +1566,7 @@ function _pushCookie() {
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$3("Unable to decode params", error); // don't merge invalid params
+      _log$4("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -1561,26 +1575,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies.get("_saasquatch")));
 
-      _log$3("existing cookie", existingCookie);
+      _log$4("existing cookie", existingCookie);
     } catch (error) {
-      _log$3("Unable to retrieve cookie", error);
+      _log$4("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
       var domain = getTopDomain();
 
-      _log$3("domain retrieved:", domain);
+      _log$4("domain retrieved:", domain);
 
       if (existingCookie) {
         var newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$3("cookie to store:", newCookie);
+        _log$4("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$3("cookie to store:", paramsJSON);
+        _log$4("cookie to store:", paramsJSON);
       }
 
       Cookies.set("_saasquatch", reEncodedCookie, {
@@ -1591,14 +1605,14 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$3("Unable to set cookie", error);
+      _log$4("Unable to set cookie", error);
     }
   }
 }
 
 /** @hidden */
 
-var _log$2 = debug("squatch-js");
+var _log$3 = debug("squatch-js");
 
 function _getAutoConfig(configIn) {
   var queryString = window.location.search;
@@ -1606,7 +1620,7 @@ function _getAutoConfig(configIn) {
   var refParam = urlParams.get("_saasquatchExtra") || "";
 
   if (!refParam) {
-    _log$2("No _saasquatchExtra param");
+    _log$3("No _saasquatchExtra param");
 
     return;
   }
@@ -1616,7 +1630,7 @@ function _getAutoConfig(configIn) {
   try {
     raw = JSON.parse(b64decode(refParam));
   } catch (e) {
-    _log$2("Unable to decode _saasquatchExtra config");
+    _log$3("Unable to decode _saasquatchExtra config");
 
     return;
   }
@@ -1628,7 +1642,7 @@ function _getAutoConfig(configIn) {
   } = convertExtraToConfig(raw);
 
   if (!domain || !tenantAlias || !widgetConfig) {
-    _log$2("_saasquatchExtra did not have an expected structure");
+    _log$3("_saasquatchExtra did not have an expected structure");
 
     return undefined;
   }
@@ -1671,7 +1685,7 @@ function convertExtraToConfig(obj) {
   };
 }
 
-var _log$1 = debug("squatch-js:decodeJwt");
+var _log$2 = debug("squatch-js:decodeJwt");
 
 function decodeUserJwt(tokenStr) {
   try {
@@ -1682,13 +1696,13 @@ function decodeUserJwt(tokenStr) {
     var jsonStr = b64decode(base64Url);
     return (_JSON$parse = JSON.parse(jsonStr)) == null ? void 0 : _JSON$parse.user;
   } catch (e) {
-    _log$1(e);
+    _log$2(e);
 
     return null;
   }
 }
 
-debug$1("sqh:DeclarativeWidget");
+var _log$1 = debug$1("squatch-js:DeclarativeWidget");
 /**
  * Abstract class for building web-components that render SaaSquatch widgets to the DOM.
  * @abstract
@@ -1767,16 +1781,17 @@ class DeclarativeWidget extends HTMLElement {
         content: template,
         context: {
           type: config.type,
+          user: config.user,
+          container: this.container || this,
           engagementMedium: this.type
         },
         type: this.widgetType,
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1789,16 +1804,16 @@ class DeclarativeWidget extends HTMLElement {
         api: this.widgetApi,
         content: "error",
         context: {
-          type: "error"
+          type: "error",
+          container: this.container || this
         },
         type: "ERROR_WIDGET",
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1810,8 +1825,8 @@ class DeclarativeWidget extends HTMLElement {
     this.attachShadow({
       mode: "open"
     }).innerHTML = "<style>:host { display: contents; }</style><slot></slot>";
-    this.config = window.squatchConfig;
-    this.token = window.squatchToken;
+    this.config = getConfig();
+    this.token = getToken();
     this.tenant = window.squatchTenant;
     this.container = this;
   }
@@ -1819,7 +1834,7 @@ class DeclarativeWidget extends HTMLElement {
   _setupApis(config) {
     var _this$config3, _this$config4;
 
-    if (!this.tenant) throw new Error("Requires tenantAlias");
+    if (!this.tenant) throw new Error("tenantAlias not provided");
     this.widgetApi = new WidgetApi({
       tenantAlias: (config == null ? void 0 : config.tenantAlias) || this.tenant,
       domain: (config == null ? void 0 : config.domain) || ((_this$config3 = this.config) == null ? void 0 : _this$config3.domain) || DEFAULT_DOMAIN
@@ -1830,16 +1845,14 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   async renderPasswordlessVariant() {
-    var _configs$widgetConfig, _configs$widgetConfig2, _configs$widgetConfig3;
-
-    var configs = _getAutoConfig();
+    this._setupApis();
 
-    this._setupApis(configs == null ? void 0 : configs.squatchConfig);
+    _log$1("Rendering as an Instant Access widget");
 
     return await this.widgetApi.render({
-      engagementMedium: (configs == null ? void 0 : (_configs$widgetConfig = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig.engagementMedium) || this.type,
-      widgetType: (configs == null ? void 0 : (_configs$widgetConfig2 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig2.widgetType) || this.widgetType,
-      locale: (configs == null ? void 0 : (_configs$widgetConfig3 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig3.locale) || this.locale
+      engagementMedium: this.type,
+      widgetType: this.widgetType,
+      locale: this.locale
     }).then(res => this._setWidget(res.template, {
       type: "passwordless"
     })).catch(this.setErrorWidget);
@@ -1849,7 +1862,13 @@ class DeclarativeWidget extends HTMLElement {
     this._setupApis();
 
     var userObj = decodeUserJwt(this.token);
-    if (!userObj) throw new Error("Could not load user information from jwt");
+
+    if (!userObj) {
+      return this.setErrorWidget(Error("No user object in token."));
+    }
+
+    _log$1("Rendering as a Verified widget");
+
     var widgetInstance = await this.widgetApi.upsertUser({
       user: userObj,
       locale: this.locale,
@@ -1857,7 +1876,8 @@ class DeclarativeWidget extends HTMLElement {
       widgetType: this.widgetType,
       jwt: this.token
     }).then(res => this._setWidget(res.template, {
-      type: "upsert"
+      type: "upsert",
+      user: userObj
     })).catch(this.setErrorWidget);
     return widgetInstance;
   }
@@ -1986,9 +2006,8 @@ class DeclarativePopupWidget extends DeclarativeWidget {
 
     this.type = "POPUP";
     this.addEventListener("click", e => {
-      e.stopPropagation(); // SQUATCH-POPUP target means something in the shadowDOM was clicked (i.e. the dialog element)
-
-      if (e.target.tagName !== "SQUATCH-POPUP") this.open();
+      e.stopPropagation();
+      this.open();
     });
   }
 
@@ -2008,13 +2027,25 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   async connectedCallback() {
+    this.container = this.getAttribute("container") || this;
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
   }
 
 }
-window.customElements.define("squatch-embed", DeclarativeEmbedWidget);
-window.customElements.define("squatch-popup", DeclarativePopupWidget);
+
+class SquatchEmbed extends DeclarativeEmbedWidget {}
+
+class SquatchPopup extends DeclarativePopupWidget {}
+
+class ImpactEmbed extends DeclarativeEmbedWidget {}
+
+class ImpactPopup extends DeclarativePopupWidget {}
+
+window.customElements.define("squatch-embed", SquatchEmbed);
+window.customElements.define("impact-embed", ImpactEmbed);
+window.customElements.define("squatch-popup", SquatchPopup);
+window.customElements.define("impact-popup", ImpactPopup);
 
 // @ts-check
 function help() {
@@ -2141,6 +2172,8 @@ function init(configIn) {
 
   if (config.tenantAlias.match("^test") || config.debug) {
     debug.enable("squatch-js*");
+  } else {
+    debug.disable();
   }
 
   _log("initializing ...");