@saasquatch/squatch-js 2.4.3 → 2.5.0

package/dist/squatch.js

@@ -1,7 +1,7 @@
 var debug = require('debug');
 var EventBus = require('eventbusjs');
-var superagent = require('superagent');
 var Cookies = require('js-cookie');
+var superagent = require('superagent');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,8 +28,8 @@ function _interopNamespace(e) {
 var debug__default = /*#__PURE__*/_interopDefaultLegacy(debug);
 var debug__namespace = /*#__PURE__*/_interopNamespace(debug);
 var EventBus__namespace = /*#__PURE__*/_interopNamespace(EventBus);
-var superagent__namespace = /*#__PURE__*/_interopNamespace(superagent);
 var Cookies__default = /*#__PURE__*/_interopDefaultLegacy(Cookies);
+var superagent__namespace = /*#__PURE__*/_interopNamespace(superagent);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -49,6 +49,45 @@ function _extends() {
   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__namespace.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",
@@ -185,12 +224,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
+      }
+    }
+  }
+`;
 
 /**
  *
@@ -223,39 +287,6 @@ class WidgetApi {
     this.domain = clean.domain;
     this.npmCdn = clean.npmCdn;
   }
-  /**
-   * Creates/upserts an anonymous user.
-   *
-   * @param {Object} params Parameters for request
-   * @param {WidgetType} params.widgetType The content of the widget.
-   * @param {EngagementMedium} params.engagementMedium How to display the widget.
-   * @param {CookieUser} params.user An optional user object
-   * @param {string} params.jwt the JSON Web Token (JWT) that is used to
-   *                            validate the data (can be disabled)
-   *
-   * @return {Promise} json object if true, with the widget template, jsOptions and user details.
-   */
-
-
-  cookieUser(params) {
-    // validateInput(params, CookieUserSchema);
-    const {
-      widgetType,
-      engagementMedium = "POPUP",
-      jwt,
-      user
-    } = params;
-    const tenantAlias = encodeURIComponent(this.tenantAlias);
-
-    const optionalParams = _buildParams({
-      widgetType,
-      engagementMedium
-    });
-
-    const path = `/api/v1/${tenantAlias}/widget/user/cookie_user${optionalParams}`;
-    const url = this.domain + path;
-    return doPut(url, JSON.stringify(user ? user : {}), jwt);
-  }
   /**
    * Creates/upserts user.
    *
@@ -312,8 +343,10 @@ class WidgetApi {
 
 
   render(params) {
+    var _clean$locale;
+
     const raw = params;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
     const {
       widgetType,
       engagementMedium = "POPUP",
@@ -321,17 +354,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
@@ -422,6 +467,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);
@@ -448,7 +494,7 @@ class AnalyticsApi {
 // @ts-check
 /** @hidden */
 
-const _log$6 = debug__default['default']("squatch-js:widget");
+const _log$7 = debug__default['default']("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -461,7 +507,7 @@ const _log$6 = debug__default['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;
@@ -479,6 +525,8 @@ class Widget {
   }
 
   _loadEvent(sqh) {
+    var _this$analyticsApi$pu;
+
     if (!sqh) return; // No non-truthy value
 
     if (!isObject$1(sqh)) {
@@ -512,10 +560,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}`));
     });
   }
 
@@ -528,9 +576,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}`));
       });
     }
   }
@@ -543,9 +591,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}`));
       });
     }
   }
@@ -634,6 +682,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
       };
@@ -643,17 +692,12 @@ class Widget {
         widgetType: this.type,
         jwt
       });
-    } else if (this.context.type === "cookie") {
-      let userObj = {
-        email: email || null,
-        firstName: firstName || null,
-        lastName: lastName || null
-      };
-      response = this.widgetApi.cookieUser({
-        user: userObj,
+    } else if (this.context.type === "passwordless") {
+      response = this.widgetApi.render({
+        user: undefined,
         engagementMedium,
         widgetType: this.type,
-        jwt
+        jwt: undefined
       });
     } else {
       throw new Error("can't reload an error widget");
@@ -689,7 +733,7 @@ class Widget {
     }).catch(({
       message
     }) => {
-      _log$6(`${message}`);
+      _log$7(`${message}`);
     });
   }
 
@@ -726,7 +770,7 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-const _log$5 = debug__default['default']("squatch-js:EMBEDwidget");
+const _log$6 = debug__default['default']("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
@@ -744,22 +788,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.'`);
@@ -825,7 +869,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
@@ -834,7 +878,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";
@@ -844,16 +888,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 = "") {
@@ -864,7 +908,7 @@ class EmbedWidget extends Widget {
 
 // @ts-check
 
-const _log$4 = debug__default['default']("squatch-js:POPUPwidget");
+const _log$5 = debug__default['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.
@@ -882,9 +926,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
 
 
@@ -907,6 +951,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;");
 
@@ -926,7 +971,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();
   }
@@ -999,7 +1044,7 @@ class PopupWidget extends Widget {
 
       this._loadEvent(_sqh);
 
-      _log$4("Popup opened");
+      _log$5("Popup opened");
     });
   }
 
@@ -1007,7 +1052,7 @@ class PopupWidget extends Widget {
     this.popupdiv.style.visibility = "hidden";
     this.popupdiv.style.top = "-2000px";
 
-    _log$4("Popup closed");
+    _log$5("Popup closed");
   }
 
   _clickedOutside({
@@ -1025,7 +1070,7 @@ class PopupWidget extends Widget {
 
 }
 
-const _log$3 = debug__namespace("squatch-js:CTAwidget");
+const _log$4 = debug__namespace("squatch-js:CTAwidget");
 /**
  * A CtaWidget is displayed on top of your page
  *
@@ -1036,7 +1081,7 @@ const _log$3 = debug__namespace("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";
@@ -1064,7 +1109,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() {
@@ -1128,10 +1173,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"));
       }
     });
   }
@@ -1154,7 +1199,7 @@ class CtaWidget extends PopupWidget {
 
 }
 
-const _log$2 = debug__default['default']("squatch-js:widgets");
+const _log$3 = debug__default['default']("squatch-js:widgets");
 /**
  *
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
@@ -1192,41 +1237,6 @@ class Widgets {
 
     EventBus__namespace.addEventListener("submit_email", Widgets._cb);
   }
-  /**
-   * This function calls the {@link WidgetApi.cookieUser} method, and it renders
-   * the widget if it is successful. Otherwise it shows the "error" widget.
-   *
-   * @param {Object} config Config details
-   * @param {WidgetType} config.widgetType The content of the widget.
-   * @param {EngagementMedium} config.engagementMedium How to display the widget.
-   * @param {User} config.user An optional user to include
-   * @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 createCookieUser(config) {
-    try {
-      const response = await this.api.cookieUser(config);
-      return {
-        widget: this._renderWidget(response, config, {
-          type: "cookie",
-          engagementMedium: config.engagementMedium
-        }),
-        user: response.user
-      };
-    } catch (err) {
-      _log$2(err);
-
-      if (err.apiErrorCode) {
-        this._renderErrorWidget(err, config.engagementMedium);
-      }
-
-      throw err;
-    }
-  }
   /**
    * This function calls the {@link WidgetApi.upsertUser} method, and it renders
    * the widget if it is successful. Otherwise it shows the "error" widget.
@@ -1254,7 +1264,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
@@ -1262,7 +1272,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$2(err);
+      _log$3(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1290,15 +1300,13 @@ class Widgets {
 
   async render(config) {
     const raw = config;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
 
     try {
-      const response = await this.api.cookieUser(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
@@ -1325,7 +1333,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;
       });
@@ -1340,7 +1348,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");
     }
@@ -1378,11 +1386,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 = {
@@ -1401,9 +1409,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}`);
           }
         }
       });
@@ -1412,20 +1420,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);
@@ -1433,7 +1441,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.`));
             }
           }
         }
@@ -1448,7 +1456,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;
@@ -1459,7 +1467,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();
@@ -1483,7 +1491,7 @@ class Widgets {
       message
     } = props;
 
-    _log$2(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+    _log$3(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
 
     const params = {
       content: "error",
@@ -1623,7 +1631,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;
 
@@ -2013,7 +2022,7 @@ var URLSearchParams$1 = self.URLSearchParams;
 
 /** @hidden */
 
-const _log$1 = debug__default['default']("squatch-js");
+const _log$2 = debug__default['default']("squatch-js");
 
 const isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -2066,7 +2075,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;
@@ -2075,26 +2084,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies__default['default'].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__default['default'].set("_saasquatch", reEncodedCookie, {
@@ -2105,11 +2114,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['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.`);
@@ -2163,6 +2247,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:
  *
@@ -2205,7 +2316,7 @@ function init(configIn) {
  * @example
  * squatch.ready(function() {
  *   console.log("ready!");
- *   squatch.api().cookieUser();
+ *   squatch.api().upsertUser();
  * });
  */
 
@@ -2272,6 +2383,7 @@ exports.EmbedWidget = EmbedWidget;
 exports.PopupWidget = PopupWidget;
 exports.WidgetApi = WidgetApi;
 exports.Widgets = Widgets;
+exports._auto = _auto;
 exports.api = api;
 exports.autofill = autofill;
 exports.events = events;
@@ -2280,5 +2392,6 @@ exports.init = init;
 exports.pushCookie = pushCookie;
 exports.ready = ready;
 exports.submitEmail = submitEmail;
+exports.widget = widget;
 exports.widgets = widgets;
 //# sourceMappingURL=squatch.js.map