@saasquatch/squatch-js 2.5.0-0 → 2.5.0

package/dist/squatch.esm.js

@@ -1,9 +1,66 @@
 import * as debug from 'debug';
 import debug__default from 'debug';
 import * as EventBus from 'eventbusjs';
-import * as superagent from 'superagent';
 import Cookies from 'js-cookie';
+import * as superagent from 'superagent';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
 
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function doQuery(url, query, variables, token) {
+  const headers = _extends({
+    Accept: "application/json"
+  }, token ? {
+    Authorization: `Bearer ${token}`
+  } : {}, {
+    "X-SaaSquatch-Referrer": window ? window.location.href : ""
+  });
+
+  const request = superagent.post(url).send({
+    query,
+    variables
+  }).set(headers);
+  return thenableSuperagent(request).then(response => response, error => {
+    let json;
+
+    try {
+      json = JSON.parse(error.response.text);
+    } catch (e) {
+    }
+
+    throw json;
+  });
+}
 function doGet(url, jwt = "") {
   const headers = {
     Accept: "application/json",
@@ -140,12 +197,37 @@ function validateConfig(raw) {
     npmCdn
   };
 }
+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 (!assertProp(raw, "user")) ; // TODO: This should be better type checked
 
   return raw;
 }
+function validatePasswordlessConfig(raw) {
+  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
+  return raw;
+}
+
+const RENDER_WIDGET_QUERY = `
+  query renderWidget ($user: UserIdInput, $engagementMedium: UserEngagementMedium, $widgetType: WidgetType, $locale: RSLocale) {
+    renderWidget(user: $user, engagementMedium: $engagementMedium, widgetType: $widgetType, locale: $locale) {
+      template
+      user {
+        id
+        accountId
+      }
+      jsOptions
+      widgetConfig {
+        values
+      }
+    }
+  }
+`;
 
 /**
  *
@@ -234,8 +316,10 @@ class WidgetApi {
 
 
   render(params) {
+    var _clean$locale;
+
     const raw = params;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
     const {
       widgetType,
       engagementMedium = "POPUP",
@@ -243,17 +327,29 @@ class WidgetApi {
       user
     } = clean;
     const tenantAlias = encodeURIComponent(this.tenantAlias);
-    const accountId = encodeURIComponent(user.accountId);
-    const userId = encodeURIComponent(user.id);
-
-    const optionalParams = _buildParams({
-      widgetType,
-      engagementMedium
-    });
-
-    const path = `/api/v1/${tenantAlias}/widget/account/${accountId}/user/${userId}/render${optionalParams}`;
+    const accountId = user ? encodeURIComponent(user.accountId) : null;
+    const userId = user ? encodeURIComponent(user.id) : null;
+    const locale = (_clean$locale = clean.locale) != null ? _clean$locale : validateLocale(navigator.language.replace(/\-/g, "_"));
+    const path = `/api/v1/${tenantAlias}/graphql`;
     const url = this.domain + path;
-    return doGet(url, jwt);
+    return new Promise(async (resolve, reject) => {
+      try {
+        var _res$body, _res$body$data;
+
+        const res = await doQuery(url, RENDER_WIDGET_QUERY, {
+          user: userId && accountId ? {
+            id: userId,
+            accountId
+          } : null,
+          engagementMedium,
+          widgetType,
+          locale
+        }, jwt);
+        resolve(res == null ? void 0 : (_res$body = res.body) == null ? void 0 : (_res$body$data = _res$body.data) == null ? void 0 : _res$body$data.renderWidget);
+      } catch (e) {
+        reject(e);
+      }
+    });
   }
   /**
    * An API call to send out referral invites to contacts
@@ -287,18 +383,21 @@ class WidgetApi {
   /**
    * Looks up the referral code of the current user, if there is any.
    *
-   * @return {Promise<Object>} code referral code if true.
+   * @return {Promise<ReferralCookie>} code referral code if true.
    */
 
 
-  squatchReferralCookie() {
+  async squatchReferralCookie() {
     const tenantAlias = encodeURIComponent(this.tenantAlias);
 
-    const _saasquatch = Cookies.get("_saasquatch");
+    const _saasquatch = Cookies.get("_saasquatch") || "";
 
     const cookie = _saasquatch ? `?cookies=${encodeURIComponent(_saasquatch)}` : ``;
     const url = `${this.domain}/a/${tenantAlias}/widgets/squatchcookiejson${cookie}`;
-    return doGet(url);
+    const response = await doGet(url);
+    return Promise.resolve(_extends({}, response, {
+      encodedCookie: _saasquatch
+    }));
   }
 
 } // builds a param string for widgets
@@ -341,6 +440,7 @@ class AnalyticsApi {
   }
 
   pushAnalyticsLoadEvent(params) {
+    if (!params.externalUserId || !params.externalAccountId) return;
     const tenantAlias = encodeURIComponent(params.tenantAlias);
     const accountId = encodeURIComponent(params.externalAccountId);
     const userId = encodeURIComponent(params.externalUserId);
@@ -367,7 +467,7 @@ class AnalyticsApi {
 // @ts-check
 /** @hidden */
 
-const _log$6 = debug__default("squatch-js:widget");
+const _log$7 = debug__default("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -380,7 +480,7 @@ const _log$6 = debug__default("squatch-js:widget");
 
 class Widget {
   constructor(params) {
-    _log$6("widget initializing ...");
+    _log$7("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
     this.type = params.type;
@@ -398,6 +498,8 @@ class Widget {
   }
 
   _loadEvent(sqh) {
+    var _this$analyticsApi$pu;
+
     if (!sqh) return; // No non-truthy value
 
     if (!isObject$1(sqh)) {
@@ -431,10 +533,10 @@ class Widget {
       };
     }
 
-    this.analyticsApi.pushAnalyticsLoadEvent(params).then(response => {
-      _log$6(`${params.engagementMedium} loaded event recorded.`);
+    (_this$analyticsApi$pu = this.analyticsApi.pushAnalyticsLoadEvent(params)) == null ? void 0 : _this$analyticsApi$pu.then(response => {
+      _log$7(`${params.engagementMedium} loaded event recorded.`);
     }).catch(ex => {
-      _log$6(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+      _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
     });
   }
 
@@ -447,9 +549,9 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$6(`${sqh.mode.widgetMode} share ${medium} event recorded. ${response}`);
+        _log$7(`${sqh.mode.widgetMode} share ${medium} event recorded. ${response}`);
       }).catch(ex => {
-        _log$6(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+        _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
       });
     }
   }
@@ -462,9 +564,9 @@ class Widget {
         userId: sqh.analytics.attributes.userId,
         emailList
       }).then(response => {
-        _log$6(`Sent email invites to share ${emailList}. ${response}`);
+        _log$7(`Sent email invites to share ${emailList}. ${response}`);
       }).catch(ex => {
-        _log$6(new Error(`invite() ${ex}`));
+        _log$7(new Error(`invite() ${ex}`));
       });
     }
   }
@@ -553,6 +655,7 @@ class Widget {
         email: email || null,
         firstName: firstName || null,
         lastName: lastName || null,
+        // FIXME: Double check this
         id: this.context.user.id,
         accountId: this.context.user.accountId
       };
@@ -562,6 +665,13 @@ class Widget {
         widgetType: this.type,
         jwt
       });
+    } else if (this.context.type === "passwordless") {
+      response = this.widgetApi.render({
+        user: undefined,
+        engagementMedium,
+        widgetType: this.type,
+        jwt: undefined
+      });
     } else {
       throw new Error("can't reload an error widget");
     }
@@ -596,7 +706,7 @@ class Widget {
     }).catch(({
       message
     }) => {
-      _log$6(`${message}`);
+      _log$7(`${message}`);
     });
   }
 
@@ -633,7 +743,7 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-const _log$5 = debug__default("squatch-js:EMBEDwidget");
+const _log$6 = debug__default("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
@@ -651,22 +761,22 @@ class EmbedWidget extends Widget {
       // selector is a string
       element = document.querySelector(container);
 
-      _log$5("loading widget with selector", element); // selector is an HTML element
+      _log$6("loading widget with selector", element); // selector is an HTML element
 
     } else if (container instanceof HTMLElement) {
       element = container;
 
-      _log$5("loading widget with container", element); // garbage container found
+      _log$6("loading widget with container", element); // garbage container found
 
     } else if (container) {
       element = null;
 
-      _log$5("container must be an HTMLElement or string", container); // find element on page
+      _log$6("container must be an HTMLElement or string", container); // find element on page
 
     } else {
       element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
 
-      _log$5("loading widget with default selector", element);
+      _log$6("loading widget with default selector", element);
     }
 
     if (!(element instanceof HTMLElement)) throw new Error(`element with selector '${container}' not found.'`);
@@ -732,7 +842,7 @@ class EmbedWidget extends Widget {
       if (!this.context.container) {
         this._loadEvent(_sqh);
 
-        _log$5("loaded");
+        _log$6("loaded");
       }
     });
   } // Un-hide if element is available and refresh data
@@ -741,7 +851,7 @@ class EmbedWidget extends Widget {
   open() {
     var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
 
-    if (!this.frame) return _log$5("no target element to open");
+    if (!this.frame) return _log$6("no target element to open");
     this.element.style.visibility = "unset";
     this.element.style.height = "auto";
     this.element.style["overflow-y"] = "auto";
@@ -751,16 +861,16 @@ class EmbedWidget extends Widget {
 
     this._loadEvent(_sqh);
 
-    _log$5("loaded");
+    _log$6("loaded");
   }
 
   close() {
-    if (!this.frame) return _log$5("no target element to close");
+    if (!this.frame) return _log$6("no target element to close");
     this.element.style.visibility = "hidden";
     this.element.style.height = "0";
     this.element.style["overflow-y"] = "hidden";
 
-    _log$5("Embed widget closed");
+    _log$6("Embed widget closed");
   }
 
   _error(rs, mode = "embed", style = "") {
@@ -771,7 +881,7 @@ class EmbedWidget extends Widget {
 
 // @ts-check
 
-const _log$4 = debug__default("squatch-js:POPUPwidget");
+const _log$5 = debug__default("squatch-js:POPUPwidget");
 /**
  * The PopupWidget is used to display popups (also known as "Modals").
  * Popups widgets are rendered on top of other elements in a page.
@@ -789,9 +899,9 @@ class PopupWidget extends Widget {
       this.triggerElement
       /* HTMLButton */
       = document.querySelector(trigger);
-      if (trigger && !this.triggerElement) _log$4("No element found with trigger selector", trigger);
+      if (trigger && !this.triggerElement) _log$5("No element found with trigger selector", trigger);
     } catch (_unused) {
-      _log$4("Not a valid selector", trigger);
+      _log$5("Not a valid selector", trigger);
     } // Trigger is optional
 
 
@@ -814,6 +924,7 @@ class PopupWidget extends Widget {
     this.popupdiv = document.createElement("div");
     this.popupdiv.id = "squatchModal";
     this.popupdiv.setAttribute("style", "display: none; position: fixed; z-index: 1; padding-top: 5%; left: 0; top: -2000px; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);");
+    document.head.insertAdjacentHTML("beforeend", `<style>#squatchModal::-webkit-scrollbar { display: none; }</style>`);
     this.popupcontent = document.createElement("div");
     this.popupcontent.setAttribute("style", "margin: auto; width: 80%; max-width: 500px; position: relative;");
 
@@ -833,7 +944,7 @@ class PopupWidget extends Widget {
     frameDoc.write(`<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`);
     frameDoc.close();
 
-    _log$4("Popup template loaded into iframe");
+    _log$5("Popup template loaded into iframe");
 
     this._setupResizeHandler();
   }
@@ -906,7 +1017,7 @@ class PopupWidget extends Widget {
 
       this._loadEvent(_sqh);
 
-      _log$4("Popup opened");
+      _log$5("Popup opened");
     });
   }
 
@@ -914,7 +1025,7 @@ class PopupWidget extends Widget {
     this.popupdiv.style.visibility = "hidden";
     this.popupdiv.style.top = "-2000px";
 
-    _log$4("Popup closed");
+    _log$5("Popup closed");
   }
 
   _clickedOutside({
@@ -932,7 +1043,7 @@ class PopupWidget extends Widget {
 
 }
 
-const _log$3 = debug("squatch-js:CTAwidget");
+const _log$4 = debug("squatch-js:CTAwidget");
 /**
  * A CtaWidget is displayed on top of your page
  *
@@ -943,7 +1054,7 @@ const _log$3 = debug("squatch-js:CTAwidget");
 
 class CtaWidget extends PopupWidget {
   constructor(params, opts) {
-    _log$3("CTA constructor");
+    _log$4("CTA constructor");
 
     const ctaElement = document.createElement("div");
     ctaElement.id = "cta";
@@ -971,7 +1082,7 @@ class CtaWidget extends PopupWidget {
     this.ctaFrame.setAttribute("style", `border:0; background-color:transparent; position:fixed; display:none;${this.side}${this.position}`);
     document.body.appendChild(this.ctaFrame);
 
-    _log$3("ctaframe appended to body");
+    _log$4("ctaframe appended to body");
   }
 
   load() {
@@ -1035,10 +1146,10 @@ class CtaWidget extends PopupWidget {
           });
           ro.observe(ctaContainer);
 
-          _log$3("CTA template loaded into iframe");
+          _log$4("CTA template loaded into iframe");
         });
       } else {
-        _log$3(new Error("CTA element not found in theme"));
+        _log$4(new Error("CTA element not found in theme"));
       }
     });
   }
@@ -1061,7 +1172,7 @@ class CtaWidget extends PopupWidget {
 
 }
 
-const _log$2 = debug__default("squatch-js:widgets");
+const _log$3 = debug__default("squatch-js:widgets");
 /**
  *
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
@@ -1126,7 +1237,7 @@ class Widgets {
       return {
         widget: this._renderWidget(response, clean, {
           type: "upsert",
-          user: clean.user,
+          user: clean.user || null,
           engagementMedium: config.engagementMedium,
           container: config.container,
           trigger: config.trigger
@@ -1134,7 +1245,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$2(err);
+      _log$3(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1162,15 +1273,13 @@ class Widgets {
 
   async render(config) {
     const raw = config;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
 
     try {
-      const response = await this.api.upsertUser(clean);
+      const response = await this.api.render(clean);
       return {
-        widget: this._renderWidget({
-          template: response
-        }, clean, {
-          type: "cookie",
+        widget: this._renderWidget(response, clean, {
+          type: "passwordless",
           engagementMedium: clean.engagementMedium
         }),
         user: response.user
@@ -1197,7 +1306,7 @@ class Widgets {
 
     if (typeof input === "function") {
       this.api.squatchReferralCookie().then((...args) => input(...args)).catch(ex => {
-        _log$2("Autofill error", ex);
+        _log$3("Autofill error", ex);
 
         throw ex;
       });
@@ -1212,7 +1321,7 @@ class Widgets {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$2("Element id/class or function missing");
+      _log$3("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
@@ -1250,11 +1359,11 @@ class Widgets {
 
 
   _renderWidget(response, config, context) {
-    _log$2("Rendering Widget...");
+    _log$3("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     let widget;
-    let displayOnLoad = false;
+    let displayOnLoad = !!config.displayOnLoad;
     let displayCTA = false;
     const opts = response.jsOptions || "";
     const params = {
@@ -1273,9 +1382,9 @@ class Widgets {
             displayOnLoad = rule.displayOnLoad;
             displayCTA = rule.showAsCTA;
 
-            _log$2(`Display ${rule.widgetType} on ${rule.url}`);
+            _log$3(`Display ${rule.widgetType} on ${rule.url}`);
           } else {
-            _log$2(`Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`);
+            _log$3(`Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`);
           }
         }
       });
@@ -1284,20 +1393,20 @@ class Widgets {
     if (opts.conversionUrls) {
       opts.conversionUrls.forEach(rule => {
         if (response.user.referredBy && Widgets._matchesUrl(rule)) {
-          _log$2("This is a conversion URL", rule);
+          _log$3("This is a conversion URL", rule);
         }
       });
     }
 
     if (opts.fuelTankAutofillUrls) {
-      _log$2("We found a fuel tank autofill!");
+      _log$3("We found a fuel tank autofill!");
 
       opts.fuelTankAutofillUrls.forEach(({
         url,
         formSelector
       }) => {
         if (Widgets._matchesUrl(url)) {
-          _log$2("Fuel Tank URL matches");
+          _log$3("Fuel Tank URL matches");
 
           if (response.user.referredBy && response.user.referredBy.code) {
             const formAutofill = document.querySelector(formSelector);
@@ -1305,7 +1414,7 @@ class Widgets {
             if (formAutofill) {
               formAutofill.value = response.user.referredBy.referredReward.fuelTankCode || "";
             } else {
-              _log$2(new Error(`Element with id/class ${formSelector} was not found.`));
+              _log$3(new Error(`Element with id/class ${formSelector} was not found.`));
             }
           }
         }
@@ -1320,7 +1429,7 @@ class Widgets {
       widget.load();
       if (displayOnLoad) widget.open();
     } else if (displayCTA) {
-      _log$2("display CTA");
+      _log$3("display CTA");
 
       const side = opts.cta.content.buttonSide;
       const position = opts.cta.content.buttonPosition;
@@ -1331,7 +1440,7 @@ class Widgets {
       widget.load();
       if (displayOnLoad) widget.open();
     } else {
-      _log$2("display popup on load");
+      _log$3("display popup on load");
 
       widget = new PopupWidget(params);
       widget.load();
@@ -1355,7 +1464,7 @@ class Widgets {
       message
     } = props;
 
-    _log$2(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+    _log$3(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
 
     const params = {
       content: "error",
@@ -1495,7 +1604,8 @@ function asyncLoad() {
 
   if (loaded && cached) {
     const ready = cached.ready || [];
-    ready.forEach(cb => setTimeout(() => cb(), 0)); // @ts-ignore -- intetionally deletes `_squatch` to cleanup initialization
+    ready.forEach(cb => setTimeout(() => cb(), 0));
+    setTimeout(() => window.squatch._auto(), 0); // @ts-ignore -- intetionally deletes `_squatch` to cleanup initialization
 
     window._squatch = undefined;
 
@@ -1507,24 +1617,6 @@ function asyncLoad() {
   }
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 /*! (c) Andrea Giammarchi - ISC */
 var self = undefined || /* istanbul ignore next */ {};
 try {
@@ -1903,7 +1995,7 @@ var URLSearchParams$1 = self.URLSearchParams;
 
 /** @hidden */
 
-const _log$1 = debug__default("squatch-js");
+const _log$2 = debug__default("squatch-js");
 
 const isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -1956,7 +2048,7 @@ function _pushCookie() {
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$1("Unable to decode params", error); // don't merge invalid params
+      _log$2("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -1965,26 +2057,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies.get("_saasquatch")));
 
-      _log$1("existing cookie", existingCookie);
+      _log$2("existing cookie", existingCookie);
     } catch (error) {
-      _log$1("Unable to retrieve cookie", error);
+      _log$2("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
       const domain = getTopDomain();
 
-      _log$1("domain retrieved:", domain);
+      _log$2("domain retrieved:", domain);
 
       if (existingCookie) {
         const newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$1("cookie to store:", newCookie);
+        _log$2("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$1("cookie to store:", paramsJSON);
+        _log$2("cookie to store:", paramsJSON);
       }
 
       Cookies.set("_saasquatch", reEncodedCookie, {
@@ -1995,11 +2087,86 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$1("Unable to set cookie", error);
+      _log$2("Unable to set cookie", error);
     }
   }
 }
 
+/** @hidden */
+
+const _log$1 = debug__default("squatch-js");
+
+function _getAutoConfig(configIn) {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const refParam = urlParams.get("_saasquatchExtra") || "";
+
+  if (!refParam) {
+    _log$1("No _saasquatchExtra param");
+
+    return;
+  }
+
+  let raw;
+
+  try {
+    raw = JSON.parse(b64decode(refParam));
+  } catch (e) {
+    _log$1("Unable to decode _saasquatchExtra config");
+
+    return;
+  }
+
+  const {
+    domain,
+    tenantAlias,
+    widgetConfig
+  } = convertExtraToConfig(raw);
+
+  if (!domain || !tenantAlias || !widgetConfig) {
+    _log$1("_saasquatchExtra did not have an expected structure");
+
+    return undefined;
+  }
+
+  const {
+    autoPopupWidgetType
+  } = widgetConfig,
+        rest = _objectWithoutPropertiesLoose(widgetConfig, ["autoPopupWidgetType"]);
+
+  return {
+    widgetConfig: _extends({
+      widgetType: autoPopupWidgetType,
+      displayOnLoad: true
+    }, rest),
+    squatchConfig: _extends({}, configIn ? {
+      configIn
+    } : {}, {
+      domain,
+      tenantAlias
+    })
+  };
+}
+/**
+ * Deconstructs _saasquatchExtra into domain, tenantAlias, and widgetConfig
+ * @param obj {Record<string, any>} Expected to be of the form `{ [appDomain]: { [tenantAlias]: { autoPopupWidgetType: [widgetType], [rest]?: ... } } }`
+ */
+
+function convertExtraToConfig(obj) {
+  var _obj$_domain;
+
+  const _domain = Object.keys(obj || {})[0];
+  const tenantAlias = Object.keys((obj == null ? void 0 : obj[_domain]) || {})[0];
+  const widgetConfig = obj == null ? void 0 : (_obj$_domain = obj[_domain]) == null ? void 0 : _obj$_domain[tenantAlias]; // domain in _saasquatchExtra doesn't contain "https://"
+
+  const domain = _domain ? `https://${_domain}` : undefined;
+  return {
+    domain,
+    tenantAlias,
+    widgetConfig
+  };
+}
+
 // @ts-check
 function help() {
   console.log(`Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.`);
@@ -2053,6 +2220,33 @@ function widgets() {
 function events() {
   return _events;
 }
+/**
+ * Entry-point for high level API to render a widget using the instance of {@link Widgets} created when you call {@link #init init}.
+ */
+
+function widget(widgetConfig) {
+  var _widgets2;
+
+  return (_widgets2 = widgets()) == null ? void 0 : _widgets2.render(widgetConfig);
+}
+/**
+ * Extracts widget configuration from `_saasquatchExtra` UTM parameter. Initialises `squatch` and renders the widget as a {@link PopupWidget} via static instanct of {@link Widgets}.
+ */
+
+function _auto(configIn) {
+  const configs = _getAutoConfig(configIn);
+
+  if (configs) {
+    var _widgets3;
+
+    const {
+      squatchConfig,
+      widgetConfig
+    } = configs;
+    init(squatchConfig);
+    return (_widgets3 = widgets()) == null ? void 0 : _widgets3.render(widgetConfig);
+  }
+}
 /**
  * Initializes the static `squatch` global. This sets up:
  *
@@ -2095,7 +2289,7 @@ function init(configIn) {
  * @example
  * squatch.ready(function() {
  *   console.log("ready!");
- *   squatch.api().cookieUser();
+ *   squatch.api().upsertUser();
  * });
  */
 
@@ -2157,5 +2351,5 @@ if (typeof document !== "undefined" && !window.SaaSquatchDoNotAutoDrop) {
 
 if (typeof document !== "undefined") asyncLoad();
 
-export { CtaWidget, EmbedWidget, PopupWidget, WidgetApi, Widgets, api, autofill, events, help, init, pushCookie, ready, submitEmail, widgets };
+export { CtaWidget, EmbedWidget, PopupWidget, WidgetApi, Widgets, _auto, api, autofill, events, help, init, pushCookie, ready, submitEmail, widget, widgets };
 //# sourceMappingURL=squatch.esm.js.map