@saasquatch/squatch-js 2.5.1-8 → 2.6.0-0

package/dist/squatch.js

@@ -1,35 +1,10 @@
 var debug = require('debug');
-var EventBus = require('eventbusjs');
 var Cookies = require('js-cookie');
-var superagent = require('superagent');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return n;
-}
-
 var debug__default = /*#__PURE__*/_interopDefaultLegacy(debug);
-var debug__namespace = /*#__PURE__*/_interopNamespace(debug);
-var EventBus__namespace = /*#__PURE__*/_interopNamespace(EventBus);
 var Cookies__default = /*#__PURE__*/_interopDefaultLegacy(Cookies);
-var superagent__namespace = /*#__PURE__*/_interopNamespace(superagent);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -64,159 +39,117 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function doQuery(url, query, variables, token) {
-  const headers = _extends({
-    Accept: "application/json"
+debug.debug("squatch-js:io");
+
+async function doQuery(url, query, variables, token) {
+  var headers = _extends({
+    Accept: "application/json",
+    "Content-Type": "application/json"
   }, token ? {
-    Authorization: `Bearer ${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;
-  });
+  try {
+    var res = await fetch(url, {
+      method: "POST",
+      body: JSON.stringify({
+        query,
+        variables
+      }),
+      headers
+    });
+    if (!res.ok) throw new Error(await res.text());
+    return await res.json();
+  } catch (e) {
+    throw e;
+  }
 }
-function doGet(url, jwt = "") {
-  const headers = {
+async function doGet(url, jwt) {
+  if (jwt === void 0) {
+    jwt = "";
+  }
+
+  var headers = {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
   if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
-  const request = superagent__namespace.get(url).withCredentials().set(headers);
-  return thenableSuperagent(request).then(response => {
-    if ( //@ts-ignore -- superagent types might just be outdated?
-    response.headers["content-type"] && //@ts-ignore -- superagent types might just be outdated?
-    includes(response.headers["content-type"].toLowerCase(), "application/json")) {
-      return JSON.parse(response.text);
-    }
 
-    return response.text;
-  }, ({
-    response
-  }) => {
-    const json = JSON.parse(response.text);
-    throw json;
-  });
+  try {
+    var res = await fetch(url, {
+      method: "GET",
+      credentials: "include",
+      headers
+    });
+    var reply = await res.text();
+    if (!res.ok) throw new Error(reply);
+    return reply ? JSON.parse(reply) : reply;
+  } catch (e) {
+    throw e;
+  }
 }
-/**
- * @hidden
- *
- * @param url The requested url
- * @param data Stringified json object
- *
- * @returns {Promise} superagent promise
- */
-
-function doPost(url, data, jwt) {
-  const headers = {
+async function doPost(url, data, jwt) {
+  var headers = {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
   if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
-  const request = superagent__namespace.post(url).send(data).set(headers);
-  return thenableSuperagent(request).then(({
-    text
-  }) => text ? JSON.parse(text) : text, error => {
-    let json;
 
-    try {
-      json = JSON.parse(error.response.text);
-    } catch (e) {
-      const out = error || e;
-      throw out;
-    }
-
-    throw json;
-  });
+  try {
+    var res = await fetch(url, {
+      method: "POST",
+      body: data,
+      headers
+    });
+    var reply = await res.text();
+    if (!res.ok) throw new Error(reply);
+    return reply ? JSON.parse(reply) : reply;
+  } catch (e) {
+    throw e;
+  }
 }
-function doPut(url, data, jwt) {
-  const headers = {
+async function doPut(url, data, jwt) {
+  var headers = {
     Accept: "application/json",
     "Content-Type": "application/json",
     "X-SaaSquatch-Referrer": window ? window.location.href : ""
   };
   if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
-  const request = superagent__namespace.put(url).withCredentials().send(data).set(headers);
-  return thenableSuperagent(request).then(({
-    text
-  }) => text ? JSON.parse(text) : text, error => {
-    let json;
 
-    try {
-      json = JSON.parse(error.response.text);
-    } catch (e) {
-      const out = error || e;
-      throw out;
-    }
-
-    throw json;
-  });
-}
-/**
- * Avoids using superagent's built in `then` method because that relies on a global promise object being valid.
- *
- * Instead, thanks to babel the promise used in this function should be our custom sandboxed polyfill
- */
-
-function thenableSuperagent(request) {
-  return new Promise((innerResolve, innerReject) => {
-    request.on("error", innerReject);
-    request.end((err, res) => {
-      if (err) innerReject(err);else innerResolve(res);
+  try {
+    var res = await fetch(url, {
+      headers,
+      method: "PUT",
+      credentials: "include",
+      body: data
     });
-  });
-}
-
-function includes(string, search, start) {
-
-  if (typeof start !== "number") {
-    start = 0;
-  }
-
-  if (start + search.length > string.length) {
-    return false;
-  } else {
-    return string.indexOf(search, start) !== -1;
+    var reply = await res.text();
+    if (!res.ok) throw new Error(reply);
+    return reply ? JSON.parse(reply) : reply;
+  } catch (e) {
+    throw e;
   }
 }
 
-function hasProps(object, props) {
-  if (!isObject$1(object)) return false;
-  const keys = Object.keys(object);
-  if (!Array.isArray(props)) return object.hasOwnProperty(props);
-  const hasKeys = props.reduce((acc, cur) => {
-    return acc && keys.indexOf(cur) >= 0;
-  }, true);
-  return hasKeys;
-}
-function isObject$1(x) {
-  return typeof x === "object";
-}
-function assertProp(object, ...props) {
-  props.forEach(p => {
-    if (!hasProps(object, props)) throw new Error(p + " is required");
-  });
-  return true;
-}
-function validateConfig(raw) {
-  if (!isObject$1(raw)) throw new Error("config must be an object");
-  if (!hasProps(raw, "tenantAlias") || typeof raw.tenantAlias !== "string") throw new Error("tenantAlias not provided");
-  const tenantAlias = raw.tenantAlias;
-  const domain = hasProps(raw, "domain") && typeof raw.domain === "string" && raw.domain || "https://app.referralsaasquatch.com";
-  const debug = hasProps(raw, "debug") && typeof raw.debug === "boolean" && raw.debug || false;
-  const npmCdn = hasProps(raw, "npmCdn") && typeof raw.npmCdn === "string" && raw.npmCdn || "https://fast.ssqt.io/npm";
+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,
@@ -224,6 +157,9 @@ function validateConfig(raw) {
     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;
@@ -231,8 +167,7 @@ function validateLocale(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
-
+  if (!(raw != null && raw["user"])) throw new Error("Required properties missing.");
   return raw;
 }
 function validatePasswordlessConfig(raw) {
@@ -240,130 +175,120 @@ function validatePasswordlessConfig(raw) {
   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
-      }
-    }
-  }
-`;
+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";
 
-/**
- *
- * The WidgetApi class is a wrapper around the Widget Endpoints of the SaaSquatch REST API.
- *
+/**
+ *
+ * The WidgetApi class is a wrapper around the Widget Endpoints of the SaaSquatch REST API.
+ *
  */
 
 class WidgetApi {
-  /**
-   * Initialize a new {@link WidgetApi} instance.
-   *
-   * @param {ConfigOptions} config Config details
-   *
-   * @example <caption>Browser example</caption>
-   * var squatchApi = new squatch.WidgetApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Browserify/Webpack example</caption>
-   * var WidgetApi = require('@saasquatch/squatch-js').WidgetApi;
-   * var squatchApi = new WidgetApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Babel+Browserify/Webpack example</caption>
-   * import {WidgetApi} from '@saasquatch/squatch-js';
-   * let squatchApi = new WidgetApi({tenantAlias:'test_12b5bo1b25125'});
+  // TODO: Support using new window variables for initialisation
+
+  /**
+   * Initialize a new {@link WidgetApi} instance.
+   *
+   * @param {ConfigOptions} config Config details
+   *
+   * @example <caption>Browser example</caption>
+   * var squatchApi = new squatch.WidgetApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Browserify/Webpack example</caption>
+   * var WidgetApi = require('@saasquatch/squatch-js').WidgetApi;
+   * var squatchApi = new WidgetApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Babel+Browserify/Webpack example</caption>
+   * import {WidgetApi} from '@saasquatch/squatch-js';
+   * let squatchApi = new WidgetApi({tenantAlias:'test_12b5bo1b25125'});
    */
   constructor(config) {
-    const raw = config; // Flags that we need to validate anything we use from this type
-
-    const clean = validateConfig(raw);
+    this.tenantAlias = void 0;
+    this.domain = void 0;
+    this.npmCdn = void 0;
+    var raw = config;
+    var clean = validateConfig(raw);
     this.tenantAlias = clean.tenantAlias;
     this.domain = clean.domain;
     this.npmCdn = clean.npmCdn;
   }
-  /**
-   * Creates/upserts user.
-   *
-   * @param {Object} params Parameters for request
-   * @param {Object?} params.user The user details
-   * @param {string} params.user.id The user id
-   * @param {string} params.user.accountId The user account id
-   * @param {WidgetType} params.widgetType The content of the widget.
-   * @param {EngagementMedium?} params.engagementMedium How to display the widget.
-   * @param {string?} params.jwt the JSON Web Token (JWT) that is used
-   *                            to validate the data (can be disabled)
-   *
-   * @return {Promise} string if true, with the widget template, jsOptions and user details.
+  /**
+   * Creates/upserts user.
+   *
+   * @param {Object} params Parameters for request
+   * @param {Object?} params.user The user details
+   * @param {string} params.user.id The user id
+   * @param {string} params.user.accountId The user account id
+   * @param {WidgetType} params.widgetType The content of the widget.
+   * @param {EngagementMedium?} params.engagementMedium How to display the widget.
+   * @param {string?} params.jwt the JSON Web Token (JWT) that is used
+   *                            to validate the data (can be disabled)
+   *
+   * @return {Promise} string if true, with the widget template, jsOptions and user details.
    */
 
 
   upsertUser(params) {
-    const raw = params;
-    const clean = validateWidgetConfig(raw);
-    const {
+    var raw = params;
+    var clean = validateWidgetConfig(raw);
+    var {
       widgetType,
       engagementMedium = "POPUP",
       jwt,
       user
     } = clean;
-    const tenantAlias = encodeURIComponent(this.tenantAlias);
-    const accountId = encodeURIComponent(user.accountId);
-    const userId = encodeURIComponent(user.id);
+    var tenantAlias = encodeURIComponent(this.tenantAlias);
+    var accountId = encodeURIComponent(user.accountId);
+    var userId = encodeURIComponent(user.id);
 
-    const optionalParams = _buildParams({
+    var optionalParams = _buildParams({
       widgetType,
       engagementMedium
     });
 
-    const path = `/api/v1/${tenantAlias}/widget/account/${accountId}/user/${userId}/upsert${optionalParams}`;
-    const url = this.domain + path;
-    const cookies = Cookies__default['default'].get("_saasquatch");
+    var path = "/api/v1/" + tenantAlias + "/widget/account/" + accountId + "/user/" + userId + "/upsert" + optionalParams;
+    var url = this.domain + path;
+    var cookies = (Cookies__default['default'] || window.Cookies).get("_saasquatch");
     if (cookies) user["cookies"] = cookies;
     return doPut(url, JSON.stringify(user), jwt);
   }
-  /**
-   * Description here.
-   *
-   * @param {Object} params Parameters for request
-   * @param {Object} params.user The user details
-   * @param {string} params.user.id The user id
-   * @param {string} params.user.accountId The user account id
-   * @param {WidgetType} params.widgetType The content of the widget.
-   * @param {EngagementMedium} params.engagementMedium How to display the widget.
-   * @param {string} params.jwt the JSON Web Token (JWT) that is used
-   *                            to validate the data (can be disabled)
-   * @return {Promise} template html if true.
+  /**
+   * Description here.
+   *
+   * @param {Object} params Parameters for request
+   * @param {Object} params.user The user details
+   * @param {string} params.user.id The user id
+   * @param {string} params.user.accountId The user account id
+   * @param {WidgetType} params.widgetType The content of the widget.
+   * @param {EngagementMedium} params.engagementMedium How to display the widget.
+   * @param {string} params.jwt the JSON Web Token (JWT) that is used
+   *                            to validate the data (can be disabled)
+   * @return {Promise} template html if true.
    */
 
 
   render(params) {
     var _clean$locale;
 
-    const raw = params;
-    const clean = validatePasswordlessConfig(raw);
-    const {
+    var raw = params;
+    var clean = validatePasswordlessConfig(raw);
+    var {
       widgetType,
       engagementMedium = "POPUP",
       jwt,
       user
     } = clean;
-    const tenantAlias = encodeURIComponent(this.tenantAlias);
-    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;
+    var tenantAlias = encodeURIComponent(this.tenantAlias);
+    var accountId = user ? encodeURIComponent(user.accountId) : null;
+    var userId = user ? encodeURIComponent(user.id) : null;
+    var locale = (_clean$locale = clean.locale) != null ? _clean$locale : validateLocale(navigator.language.replace(/\-/g, "_"));
+    var path = "/api/v1/" + tenantAlias + "/graphql";
+    var url = this.domain + path;
     return new Promise(async (resolve, reject) => {
       try {
-        var _res$body, _res$body$data;
+        var _res$data;
 
-        const res = await doQuery(url, RENDER_WIDGET_QUERY, {
+        var res = await doQuery(url, RENDER_WIDGET_QUERY, {
           user: userId && accountId ? {
             id: userId,
             accountId
@@ -372,56 +297,27 @@ class WidgetApi {
           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);
+        resolve(res == null ? void 0 : (_res$data = res.data) == null ? void 0 : _res$data.renderWidget);
       } catch (e) {
         reject(e);
       }
     });
   }
-  /**
-   * An API call to send out referral invites to contacts
-   *
-   * @param {Object} params Parameters for request
-   * @param {Array} params.emailList The list of recipients to send to
-   * @param {string} params.userId The user id
-   * @param {string} params.accountId The user account id
-   * @param {string} params.tenantAlias The tenant alias
-   *
-   * @return {Promise} an object containing total accepted / rejected emails send or error
-   */
-
-
-  invite({
-    emailList = [],
-    userId,
-    accountId,
-    tenantAlias
-  }) {
-    const tenantAliasP = encodeURIComponent(tenantAlias);
-    const path = `/api/v1/${tenantAliasP}/mail/referralinvite`;
-    const url = this.domain + path;
-    const request = {
-      sendingAccountId: accountId,
-      sendingUserId: userId,
-      recipients: emailList
-    };
-    return doPost(url, JSON.stringify(request));
-  }
-  /**
-   * Looks up the referral code of the current user, if there is any.
-   *
-   * @return {Promise<ReferralCookie>} code referral code if true.
+  /**
+   * Looks up the referral code of the current user, if there is any.
+   *
+   * @return {Promise<ReferralCookie>} code referral code if true.
    */
 
 
   async squatchReferralCookie() {
-    const tenantAlias = encodeURIComponent(this.tenantAlias);
+    var tenantAlias = encodeURIComponent(this.tenantAlias);
 
-    const _saasquatch = Cookies__default['default'].get("_saasquatch") || "";
+    var _saasquatch = (Cookies__default['default'] || window.Cookies).get("_saasquatch") || "";
 
-    const cookie = _saasquatch ? `?cookies=${encodeURIComponent(_saasquatch)}` : ``;
-    const url = `${this.domain}/a/${tenantAlias}/widgets/squatchcookiejson${cookie}`;
-    const response = await doGet(url);
+    var cookie = _saasquatch ? "?cookies=" + encodeURIComponent(_saasquatch) : "";
+    var url = this.domain + "/a/" + tenantAlias + "/widgets/squatchcookiejson" + cookie;
+    var response = await doGet(url);
     return Promise.resolve(_extends({}, response, {
       encodedCookie: _saasquatch
     }));
@@ -429,84 +325,99 @@ class WidgetApi {
 
 } // builds a param string for widgets
 
-function _buildParams({
-  widgetType,
-  engagementMedium
-}) {
-  const widgetTypeP = widgetType ? `?widgetType=${encodeURIComponent(widgetType)}` : ``;
-  const engagementMediumP = `${widgetType ? "&" : "?"}engagementMedium=${encodeURIComponent(engagementMedium)}`;
-  const optionalParams = widgetTypeP + engagementMediumP;
+function _buildParams(_ref) {
+  var {
+    widgetType,
+    engagementMedium
+  } = _ref;
+  var widgetTypeP = widgetType ? "?widgetType=" + encodeURIComponent(widgetType) : "";
+  var engagementMediumP = (widgetType ? "&" : "?") + "engagementMedium=" + encodeURIComponent(engagementMedium);
+  var optionalParams = widgetTypeP + engagementMediumP;
   return optionalParams;
 }
 
 // @ts-check
-/**
- *
- * The AnalyticsApi class is a wrapper around the Analytics Endpoints of
- * the SaaSquatch REST API. Used to record Widget events.
- *
- * @hidden
+/**
+ *
+ * The AnalyticsApi class is a wrapper around the Analytics Endpoints of
+ * the SaaSquatch REST API. Used to record Widget events.
+ *
+ * @hidden
  */
 
 class AnalyticsApi {
-  /**
-   * Initialize a new {@link AnalyticsApi} instance.
-   *
-   * @param {Object} config Config details
-   * @param {string} [config.domain='https://app.referralsaasquatch.com'] The server domain.
-   *
+  /**
+   * Initialize a new {@link AnalyticsApi} instance.
+   *
+   * @param {Object} config Config details
+   * @param {string} [config.domain='https://app.referralsaasquatch.com'] The server domain.
+   *
    */
   constructor(config) {
-    const raw = config;
+    var _window$squatchConfig;
 
-    if (hasProps(raw, "domain") && typeof raw.domain === "string") {
-      this.domain = raw.domain;
-    } else {
-      this.domain = "https://app.referralsaasquatch.com";
-    }
+    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;
   }
 
   pushAnalyticsLoadEvent(params) {
     if (!params.externalUserId || !params.externalAccountId) return;
-    const tenantAlias = encodeURIComponent(params.tenantAlias);
-    const accountId = encodeURIComponent(params.externalAccountId);
-    const userId = encodeURIComponent(params.externalUserId);
-    const engagementMedium = encodeURIComponent(params.engagementMedium);
-    const programId = params.programId ? `&programId=${encodeURIComponent(params.programId)}` : ``;
-    const path = `/a/${tenantAlias}/widgets/analytics/loaded?externalAccountId=${accountId}&externalUserId=${userId}&engagementMedium=${engagementMedium}${programId}`;
-    const url = this.domain + path;
+    var tenantAlias = encodeURIComponent(params.tenantAlias);
+    var accountId = encodeURIComponent(params.externalAccountId);
+    var userId = encodeURIComponent(params.externalUserId);
+    var engagementMedium = encodeURIComponent(params.engagementMedium);
+    var programId = params.programId ? "&programId=" + encodeURIComponent(params.programId) : "";
+    var path = "/a/" + tenantAlias + "/widgets/analytics/loaded?externalAccountId=" + accountId + "&externalUserId=" + userId + "&engagementMedium=" + engagementMedium + programId;
+    var url = this.domain + path;
     return doPost(url, JSON.stringify({}));
   }
 
   pushAnalyticsShareClickedEvent(params) {
-    const tenantAlias = encodeURIComponent(params.tenantAlias);
-    const accountId = encodeURIComponent(params.externalAccountId);
-    const userId = encodeURIComponent(params.externalUserId);
-    const engagementMedium = encodeURIComponent(params.engagementMedium);
-    const shareMedium = encodeURIComponent(params.shareMedium);
-    const path = `/a/${tenantAlias}/widgets/analytics/shared?externalAccountId=${accountId}&externalUserId=${userId}&engagementMedium=${engagementMedium}&shareMedium=${shareMedium}`;
-    const url = this.domain + path;
+    var tenantAlias = encodeURIComponent(params.tenantAlias);
+    var accountId = encodeURIComponent(params.externalAccountId);
+    var userId = encodeURIComponent(params.externalUserId);
+    var engagementMedium = encodeURIComponent(params.engagementMedium);
+    var shareMedium = encodeURIComponent(params.shareMedium);
+    var path = "/a/" + tenantAlias + "/widgets/analytics/shared?externalAccountId=" + accountId + "&externalUserId=" + userId + "&engagementMedium=" + engagementMedium + "&shareMedium=" + shareMedium;
+    var url = this.domain + path;
     return doPost(url, JSON.stringify({}));
   }
 
 }
 
+function _validateAnalyticsConfig(raw) {
+  if (!isObject$1(raw)) throw new Error("'options' should be an object");
+  return raw;
+}
+
 // @ts-check
 /** @hidden */
 
-const _log$7 = debug__default['default']("squatch-js:widget");
-/*
- * The Widget class is the base class for the different widget types available
- *
- * Creates an `iframe` in which the html content of the widget gets embedded.
- * Uses element-resize-detector (https://github.com/wnr/element-resize-detector)
- * for listening to the height of the widget content and make the iframe responsive.
- *
+var _log$7 = debug.debug("squatch-js:widget");
+/*
+ * The Widget class is the base class for the different widget types available
+ *
+ * Creates an `iframe` in which the html content of the widget gets embedded.
+ * Uses element-resize-detector (https://github.com/wnr/element-resize-detector)
+ * for listening to the height of the widget content and make the iframe responsive.
+ *
  */
 
 
 class Widget {
   constructor(params) {
+    this.type = void 0;
+    this.content = void 0;
+    this.analyticsApi = void 0;
+    this.widgetApi = void 0;
+    this.context = void 0;
+    this.npmCdn = void 0;
+    this.container = void 0;
+
     _log$7("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
@@ -516,12 +427,47 @@ class Widget {
     this.analyticsApi = new AnalyticsApi({
       domain: params.domain
     });
-    this.frame = document.createElement("iframe");
-    this.frame["squatchJsApi"] = this;
-    this.frame.width = "100%";
-    this.frame.scrolling = "no";
-    this.frame.setAttribute("style", "border: 0; background-color: none; width: 1px; min-width: 100%;");
     this.context = params.context;
+    this.container = params.container;
+  }
+
+  _findElement() {
+    var element;
+
+    if (typeof this.container === "string") {
+      // selector is a string
+      element = document.querySelector(this.container);
+
+      _log$7("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
+
+    } else if (this.container) {
+      element = null;
+
+      _log$7("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);
+    }
+
+    if (!(element instanceof HTMLElement)) throw new Error("element with selector '" + (this.container || "#squatchembed or .squatchembed") + "' not found.'");
+    return element;
+  }
+
+  _createFrame() {
+    var frame = document.createElement("iframe");
+    frame["squatchJsApi"] = this;
+    frame.width = "100%";
+    frame.src = "about:blank";
+    frame.scrolling = "no";
+    frame.setAttribute("style", "border: 0; background-color: none; width: 1px; min-width: 100%;");
+    return frame;
   }
 
   _loadEvent(sqh) {
@@ -533,13 +479,10 @@ class Widget {
       throw new Error("Widget Load event identity property is not an object");
     }
 
-    let params;
-
-    if (hasProps(sqh, "programId")) {
-      if (!hasProps(sqh, ["tenantAlias", "accountId", "userId", "engagementMedium"])) {
-        throw new Error("Widget Load event missing required properties");
-      }
+    var params;
 
+    if ("programId" in sqh) {
+      if (!sqh.tenantAlias || !sqh.accountId || !sqh.userId || !sqh.engagementMedium) throw new Error("Widget Load event missing required properties");
       params = {
         tenantAlias: sqh.tenantAlias,
         externalAccountId: sqh.accountId,
@@ -548,7 +491,7 @@ class Widget {
         programId: sqh.programId
       };
     } else {
-      const {
+      var {
         analytics,
         mode
       } = sqh;
@@ -561,9 +504,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$7(params.engagementMedium + " loaded event recorded.");
     }).catch(ex => {
-      _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+      _log$7(new Error("pushAnalyticsLoadEvent() " + ex));
     });
   }
 
@@ -576,80 +519,44 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$7(`${sqh.mode.widgetMode} share ${medium} event recorded. ${response}`);
+        _log$7(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
       }).catch(ex => {
-        _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+        _log$7(new Error("pushAnalyticsLoadEvent() " + ex));
       });
     }
-  }
+  } // TODO: CA: Refactor how error templates are shown
 
-  _inviteContacts(sqh, emailList) {
-    if (sqh) {
-      this.widgetApi.invite({
-        tenantAlias: sqh.analytics.attributes.tenant,
-        accountId: sqh.analytics.attributes.accountId,
-        userId: sqh.analytics.attributes.userId,
-        emailList
-      }).then(response => {
-        _log$7(`Sent email invites to share ${emailList}. ${response}`);
-      }).catch(ex => {
-        _log$7(new Error(`invite() ${ex}`));
-      });
+
+  _error(rs, mode, style) {
+    if (mode === void 0) {
+      mode = "modal";
     }
-  }
 
-  _error(rs, mode = "modal", style = "") {
-    const errorTemplate = `<!DOCTYPE html>
-    <!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]-->
-    <!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]-->
-    <!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
-    <head>
-      <link rel="stylesheet" media="all" href="https://fast.ssqt.io/assets/css/widget/errorpage.css">
-      <style>
-        ${style}
-      </style>
-    </head>
-    <body>
-
-      <div class="squatch-container ${mode}" style="width:100%">
-        <div class="errorheader">
-          <button type="button" class="close" onclick="window.frameElement.squatchJsApi.close();">&times;</button>
-          <p class="errortitle">Error</p>
-        </div>
-        <div class="errorbody">
-          <div class="sadface"><img src="https://fast.ssqt.io/assets/images/face.png"></div>
-          <h4>Our referral program is temporarily unavailable.</h4><br>
-          <p>Please reload the page or check back later.</p>
-          <p>If the persists please contact our support team.</p>
-          <br>
-          <br>
-          <div class="right-align errtxt">
-            Error Code: ${rs}
-          </div>
-        </div>
-      </div>
-    </body>
-    </html>`;
+    if (style === void 0) {
+      style = "";
+    }
+
+    var errorTemplate = "<!DOCTYPE html>\n    <!--[if IE 7]><html class=\"ie7 oldie\" lang=\"en\"><![endif]-->\n    <!--[if IE 8]><html class=\"ie8 oldie\" lang=\"en\"><![endif]-->\n    <!--[if gt IE 8]><!--><html lang=\"en\"><!--<![endif]-->\n    <head>\n      <link rel=\"stylesheet\" media=\"all\" href=\"https://fast.ssqt.io/assets/css/widget/errorpage.css\">\n      <style>\n        " + style + "\n      </style>\n    </head>\n    <body>\n\n      <div class=\"squatch-container " + mode + "\" style=\"width:100%\">\n        <div class=\"errorheader\">\n          <button type=\"button\" class=\"close\" onclick=\"window.frameElement.squatchJsApi.close();\">&times;</button>\n          <p class=\"errortitle\">Error</p>\n        </div>\n        <div class=\"errorbody\">\n          <div class=\"sadface\"><img src=\"https://fast.ssqt.io/assets/images/face.png\"></div>\n          <h4>Our referral program is temporarily unavailable.</h4><br>\n          <p>Please reload the page or check back later.</p>\n          <p>If the persists please contact our support team.</p>\n          <br>\n          <br>\n          <div class=\"right-align errtxt\">\n            Error Code: " + rs + "\n          </div>\n        </div>\n      </div>\n    </body>\n    </html>";
     return errorTemplate;
   }
 
-  async _findInnerContainer() {
-    const {
+  async _findInnerContainer(frame) {
+    var {
       contentWindow
-    } = this.frame;
+    } = frame;
     if (!contentWindow) throw new Error("Squatch.js frame inner frame is empty");
-    const frameDoc = contentWindow.document;
+    var frameDoc = contentWindow.document;
 
     function search() {
-      const containers = frameDoc.getElementsByTagName("sqh-global-container");
-      const legacyContainers = frameDoc.getElementsByClassName("squatch-container");
-      const fallback = containers.length > 0 ? containers[0] : legacyContainers.length > 0 ? legacyContainers[0] : null;
+      var containers = frameDoc.getElementsByTagName("sqh-global-container");
+      var legacyContainers = frameDoc.getElementsByClassName("squatch-container");
+      var fallback = containers.length > 0 ? containers[0] : legacyContainers.length > 0 ? legacyContainers[0] : null;
       return fallback;
     }
 
-    let found = null;
+    var found = null;
 
-    for (let i = 0; i < 5; i++) {
+    for (var i = 0; i < 5; i++) {
       found = search();
       if (found) break;
       await delay(100);
@@ -661,28 +568,34 @@ class Widget {
 
     return found;
   }
+  /**
+   * Reloads the current widget, makes updated request to API and renders result.
+   * Primarily for Classic widgets with registration
+   * @param param0 Form field values
+   * @param jwt JWT for API authentication
+   */
 
-  reload({
-    email,
-    firstName,
-    lastName
-  }, jwt) {
-    const frameWindow = this.frame.contentWindow;
-    const engagementMedium = this.context.engagementMedium || "POPUP";
+
+  reload(frame, _ref, jwt) {
+    var {
+      email,
+      firstName,
+      lastName
+    } = _ref;
+    var frameWindow = frame.contentWindow;
+    var engagementMedium = this.context.engagementMedium || "POPUP";
 
     if (!frameWindow) {
       throw new Error("Frame needs a content window");
     }
 
-    const frameDoc = frameWindow.document;
-    let response;
+    var response;
 
     if (this.context.type === "upsert") {
-      let userObj = {
+      var userObj = {
         email: email || null,
         firstName: firstName || null,
         lastName: lastName || null,
-        // FIXME: Double check this
         id: this.context.user.id,
         accountId: this.context.user.accountId
       };
@@ -703,66 +616,80 @@ class Widget {
       throw new Error("can't reload an error widget");
     }
 
-    response.then(({
-      template
-    }) => {
-      if (template) {
-        this.content = template;
-        const showStatsBtn = frameDoc.createElement("button");
-        const registerForm = frameDoc.getElementsByClassName("squatch-register")[0];
-
-        if (registerForm) {
-          showStatsBtn.className = "btn btn-primary";
-          showStatsBtn.id = "show-stats-btn";
-          showStatsBtn.textContent = this.type === "REFERRER_WIDGET" ? "Show Stats" : "Show Reward";
-          const widgetStyle = engagementMedium === "POPUP" ? "margin-top: 10px; max-width: 130px; width: 100%;" : "margin-top: 10px;";
-          showStatsBtn.setAttribute("style", widgetStyle);
+    response.then(_ref2 => {
+      var {
+        template
+      } = _ref2;
 
-          showStatsBtn.onclick = () => {
-            this.load(); // @ts-ignore -- open exists in the PopupWidget, so this call will always exist when it's called.
-
-            engagementMedium === "POPUP" && this.open();
-          }; // @ts-ignore -- expect register form to be a stylable element
+      if (template) {
+        this.content = template; // Support for classic widget registration forms
 
+        this.__deprecated__register(frame, {
+          email,
+          engagementMedium
+        }, () => {
+          this.load(frame); // @ts-ignore -- open exists in the PopupWidget, so this call will always exist when it's called.
 
-          registerForm.style.paddingTop = "30px";
-          registerForm.innerHTML = `<p><strong>${email}</strong><br>Has been successfully registered</p>`;
-          registerForm.appendChild(showStatsBtn);
-        }
+          engagementMedium === "POPUP" && this.open(frame);
+        });
       }
-    }).catch(({
-      message
-    }) => {
-      _log$7(`${message}`);
+    }).catch(_ref3 => {
+      var {
+        message
+      } = _ref3;
+
+      _log$7("" + message);
     });
   }
 
+  __deprecated__register(frame, params, onClick) {
+    var frameWindow = frame.contentWindow;
+    var frameDoc = frameWindow.document;
+    var showStatsBtn = frameDoc.createElement("button");
+    var registerForm = frameDoc.getElementsByClassName("squatch-register")[0];
+
+    if (registerForm) {
+      showStatsBtn.className = "btn btn-primary";
+      showStatsBtn.id = "show-stats-btn";
+      showStatsBtn.textContent = this.type === "REFERRER_WIDGET" ? "Show Stats" : "Show Reward";
+      var widgetStyle = params.engagementMedium === "POPUP" ? "margin-top: 10px; max-width: 130px; width: 100%;" : "margin-top: 10px;";
+      showStatsBtn.setAttribute("style", widgetStyle);
+      showStatsBtn.onclick = onClick; // @ts-ignore -- expect register form to be a stylable element
+
+      registerForm.style.paddingTop = "30px";
+      registerForm.innerHTML = "<p><strong>" + params.email + "</strong><br>Has been successfully registered</p>";
+      registerForm.appendChild(showStatsBtn);
+    }
+  }
+
 }
 
 function delay(duration) {
   return new Promise(function (resolve, reject) {
     setTimeout(function () {
-      resolve();
+      resolve(() => {});
     }, duration);
   });
 }
 
-/*!
- * domready (c) Dustin Diaz 2014 - License MIT
- *
+/*!
+ * domready (c) Dustin Diaz 2014 - License MIT
+ *
  */
 function domready(targetDoc, fn) {
-  let fns = [];
-  let listener;
-  let doc = targetDoc;
-  let hack = doc.documentElement.doScroll;
-  let domContentLoaded = "DOMContentLoaded";
-  let loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState);
+  var fns = [];
+  var listener;
+  var doc = targetDoc;
+  var hack = doc.documentElement.doScroll;
+  var domContentLoaded = "DOMContentLoaded";
+  var loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState);
   if (!loaded) doc.addEventListener(domContentLoaded, listener = () => {
     doc.removeEventListener(domContentLoaded, listener);
     loaded = true;
 
-    while (listener = fns.shift()) listener();
+    while (listener = fns.shift()) {
+      listener();
+    }
   }); // @ts-ignore
 
   return loaded ? setTimeout(fn, 0) : fns.push(fn);
@@ -770,78 +697,55 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-const _log$6 = debug__default['default']("squatch-js:EMBEDwidget");
-/**
- * An EmbedWidget is displayed inline in part of your page.
- *
- * To create an EmbedWidget use {@link Widgets}
- *
+var _log$6 = debug.debug("squatch-js:EMBEDwidget");
+/**
+ * An EmbedWidget is displayed inline in part of your page.
+ *
+ * To create an EmbedWidget use {@link Widgets}
+ *
  */
 
 
 class EmbedWidget extends Widget {
   constructor(params, container) {
     super(params);
-    let element;
-
-    if (typeof container === "string") {
-      // selector is a string
-      element = document.querySelector(container);
-
-      _log$6("loading widget with selector", element); // selector is an HTML element
-
-    } else if (container instanceof HTMLElement) {
-      element = container;
-
-      _log$6("loading widget with container", element); // garbage container found
-
-    } else if (container) {
-      element = null;
-
-      _log$6("container must be an HTMLElement or string", container); // find element on page
-
-    } else {
-      element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
-
-      _log$6("loading widget with default selector", element);
-    }
-
-    if (!(element instanceof HTMLElement)) throw new Error(`element with selector '${container}' not found.'`);
-    this.element = element;
+    this.show = this.open;
+    this.hide = this.close;
   }
 
-  async load() {
-    if (this.context.container) {
-      this.element.style.visibility = "hidden";
-      this.element.style.height = "0";
-      this.element.style["overflow-y"] = "hidden"; // Widget reloaded - replace existing element
+  async load(frame) {
+    var element = this._findElement();
 
-      if (this.element.firstChild) {
-        this.element.replaceChild(this.frame, this.element.firstChild); // Add iframe for the first time
+    if (this.container) {
+      if (element.shadowRoot) {
+        element.shadowRoot.appendChild(frame);
+      } // Widget reloaded - replace existing element
+      else if (element.firstChild) {
+        element.replaceChild(frame, element.firstChild); // Add iframe for the first time
       } else {
-        this.element.appendChild(this.frame);
+        element.appendChild(frame);
       }
-    } else if (!this.element.firstChild || this.element.firstChild.nodeName === "#text") {
-      this.element.appendChild(this.frame);
+    } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
+      element.appendChild(frame);
     }
 
-    const {
+    var {
       contentWindow
-    } = this.frame;
+    } = frame;
 
     if (!contentWindow) {
       throw new Error("Frame needs a content window");
     }
 
-    const frameDoc = contentWindow.document;
+    var frameDoc = contentWindow.document;
     frameDoc.open();
     frameDoc.write(this.content);
-    frameDoc.write(`<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`);
+    frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
     domready(frameDoc, async () => {
-      const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
+      var _sqh = contentWindow.squatch || contentWindow.widgetIdent;
 
-      const ctaElement = frameDoc.getElementById("cta");
+      var ctaElement = frameDoc.getElementById("cta");
 
       if (ctaElement) {
         if (!ctaElement.parentNode) {
@@ -852,21 +756,20 @@ class EmbedWidget extends Widget {
       } // @ts-ignore -- number will be cast to string by browsers
 
 
-      this.frame.height = frameDoc.body.scrollHeight; // Adjust frame height when size of body changes
-      // @ts-ignore
+      frame.height = frameDoc.body.scrollHeight; // Adjust frame height when size of body changes
 
-      const ro = new contentWindow["ResizeObserver"](entries => {
-        for (const entry of entries) {
-          const {
+      var ro = new contentWindow["ResizeObserver"](entries => {
+        for (var entry of entries) {
+          var {
             height
           } = entry.contentRect; // @ts-ignore -- number will be cast to string by browsers
 
-          this.frame.height = height;
+          frame.height = height;
         }
       });
-      ro.observe(await this._findInnerContainer()); // Regular load - trigger event
+      ro.observe(await this._findInnerContainer(frame)); // Regular load - trigger event
 
-      if (!this.context.container) {
+      if (!this.container) {
         this._loadEvent(_sqh);
 
         _log$6("loaded");
@@ -875,32 +778,46 @@ class EmbedWidget extends Widget {
   } // Un-hide if element is available and refresh data
 
 
-  open() {
-    var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
+  open(frame) {
+    var _frame$contentDocumen, _frame$contentWindow, _frame$contentWindow2;
 
-    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";
-    (_this$frame = this.frame) == null ? void 0 : (_this$frame$contentDo = _this$frame.contentDocument) == null ? void 0 : _this$frame$contentDo.dispatchEvent(new CustomEvent("sq:refresh"));
+    if (!frame) return _log$6("no target element to open");
 
-    const _sqh = ((_this$frame2 = this.frame) == null ? void 0 : (_this$frame2$contentW = _this$frame2.contentWindow) == null ? void 0 : _this$frame2$contentW.squatch) || ((_this$frame3 = this.frame) == null ? void 0 : (_this$frame3$contentW = _this$frame3.contentWindow) == null ? void 0 : _this$frame3$contentW.widgetIdent);
+    var element = this._findElement();
+
+    element.style.visibility = "unset";
+    element.style.height = "auto";
+    element.style["overflow-y"] = "auto";
+    frame == null ? void 0 : (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
+
+    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);
 
     _log$6("loaded");
   }
 
-  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";
+  close(frame) {
+    if (!frame) return _log$6("no target element to close");
+
+    var element = this._findElement();
+
+    element.style.visibility = "hidden";
+    element.style.height = "0";
+    element.style["overflow-y"] = "hidden";
 
     _log$6("Embed widget closed");
   }
 
-  _error(rs, mode = "embed", style = "") {
+  _error(rs, mode, style) {
+    if (mode === void 0) {
+      mode = "embed";
+    }
+
+    if (style === void 0) {
+      style = "";
+    }
+
     return super._error(rs, mode, style);
   }
 
@@ -908,78 +825,117 @@ class EmbedWidget extends Widget {
 
 // @ts-check
 
-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.
- *
- * To create a PopupWidget use {@link Widgets}
- *
- */
+var _log$5 = debug.debug("squatch-js:POPUPwidget");
 
+var popupId = 0;
+/**
+ * The PopupWidget is used to display popups (also known as "Modals").
+ * Popups widgets are rendered on top of other elements in a page.
+ *
+ * To create a PopupWidget use {@link Widgets}
+ *
+ */
 
 class PopupWidget extends Widget {
-  constructor(params, trigger = ".squatchpop") {
+  constructor(params, trigger) {
+    if (trigger === void 0) {
+      trigger = ".squatchpop";
+    }
+
     super(params);
+    this.trigger = void 0;
+    this.id = void 0;
+    this.show = this.open;
+    this.hide = this.close;
+    this.trigger = trigger;
+
+    if (this.container) {
+      this.id = "squatchModal";
+    } else {
+      this.id = popupId === 0 ? "squatchModal" : "squatchModal__" + popupId;
+      popupId = popupId + 1;
+    }
+
+    document.head.insertAdjacentHTML("beforeend", "<style>#" + this.id + "::-webkit-scrollbar { display: none; }</style>");
+  }
+
+  _initialiseCTA(frame) {
+    var triggerElement;
 
     try {
-      this.triggerElement
+      triggerElement
       /* HTMLButton */
-      = document.querySelector(trigger);
-      if (trigger && !this.triggerElement) _log$5("No element found with trigger selector", trigger);
+      = document.querySelector(this.trigger);
+      if (this.trigger && !triggerElement) _log$5("No element found with trigger selector", this.trigger);
     } catch (_unused) {
-      _log$5("Not a valid selector", trigger);
+      _log$5("Not a valid selector", this.trigger);
     } // Trigger is optional
 
 
-    if (this.triggerElement) {
-      this.triggerElement.onclick = () => {
-        this.open();
+    if (triggerElement) {
+      triggerElement.onclick = () => {
+        this.open(frame);
       };
-    } // If widget is loaded with CTA, look for a 'squatchpop' element to use
+    }
+
+    var element = this._findElement(); // If widget is loaded with CTA, look for a 'squatchpop' element to use
     // that element as a trigger as well.
 
 
-    this.triggerWhenCTA = document.querySelector(".squatchpop");
+    var triggerWhenCTA = element.querySelector(".squatchpop");
 
-    if (trigger === "#cta" && this.triggerWhenCTA) {
-      this.triggerWhenCTA.onclick = () => {
-        this.open();
+    if (this.trigger === "#cta" && triggerWhenCTA) {
+      triggerWhenCTA.onclick = () => {
+        this.open(frame);
       };
     }
+  }
 
-    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;");
+  _createPopupDialog() {
+    var dialog = document.createElement("dialog");
+    dialog.id = this.id;
+    dialog.setAttribute("style", "width: 100%; max-width: 500px; border: none; padding: 0;");
 
-    this.popupdiv.onclick = event => {
-      this._clickedOutside(event);
+    var onClick = e => {
+      if (e.target === dialog) dialog.close();
     };
+
+    dialog.addEventListener("click", onClick);
+    return dialog;
   }
 
-  load() {
-    this.popupdiv.appendChild(this.popupcontent);
-    document.body.appendChild(this.popupdiv);
-    this.popupcontent.appendChild(this.frame); //@ts-ignore -- will occasionally throw a null pointer exception at runtime
+  load(frame) {
+    this._initialiseCTA(frame);
+
+    var element = this._findElement();
+
+    var dialogParent = element.shadowRoot || element;
+
+    var dialog = this._createPopupDialog();
 
-    const frameDoc = this.frame.contentWindow.document;
+    dialog.appendChild(frame);
+    dialogParent.appendChild(dialog);
+    var {
+      contentWindow
+    } = frame;
+
+    if (!contentWindow) {
+      throw new Error("Frame needs a content window");
+    }
+
+    var frameDoc = contentWindow.document;
     frameDoc.open();
     frameDoc.write(this.content);
-    frameDoc.write(`<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`);
+    frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
 
     _log$5("Popup template loaded into iframe");
 
-    this._setupResizeHandler();
+    this._setupResizeHandler(frame);
   }
 
-  _setupResizeHandler() {
-    const popupdiv = this.popupdiv;
-    const frame = this.frame;
-    const {
+  _setupResizeHandler(frame) {
+    var {
       contentWindow
     } = frame;
 
@@ -987,59 +943,46 @@ class PopupWidget extends Widget {
       throw new Error("Frame needs a content window");
     }
 
-    const frameDoc = contentWindow.document; // Adjust frame height when size of body changes
+    var frameDoc = contentWindow.document; // Adjust frame height when size of body changes
 
     domready(frameDoc, async () => {
       frameDoc.body.style.overflowY = "hidden";
-      popupdiv.style.visibility = "hidden";
-      popupdiv.style.display = "block";
-      frame.height = `${frameDoc.body.offsetHeight}px`; // Adjust frame height when size of body changes
+      frame.height = frameDoc.body.offsetHeight + "px"; // Adjust frame height when size of body changes
 
-      const ro = new contentWindow["ResizeObserver"](entries => {
-        for (const entry of entries) {
-          const {
+      var ro = new contentWindow["ResizeObserver"](entries => {
+        for (var entry of entries) {
+          var {
             top,
             bottom
           } = entry.contentRect;
-          const computedHeight = bottom + top;
+          var computedHeight = bottom + top;
           frame.height = computedHeight + ""; // Don't let anything else set the height of this element
 
-          entry.target.style = ``;
-
-          if (window.innerHeight > Number(frame.height)) {
-            popupdiv.style.paddingTop = `${(window.innerHeight - Number(frame.height)) / 2}px`;
-          } else {
-            popupdiv.style.paddingTop = "5px";
-          }
+          entry.target.style = "";
         }
       });
-      ro.observe(await this._findInnerContainer());
+      ro.observe(await this._findInnerContainer(frame));
     });
   }
 
-  open() {
-    const popupdiv = this.popupdiv;
-    const frame = this.frame;
-    const {
+  open(frame) {
+    var element = this._findElement();
+
+    var parent = element.shadowRoot || element;
+    var dialog = parent.querySelector("#" + this.id);
+    if (!dialog) throw new Error("Could not determine container div");
+    dialog.showModal();
+    var {
       contentWindow
     } = frame;
     if (!contentWindow) throw new Error("Squatch.js has an empty iframe");
-    const frameDoc = contentWindow.document; // Adjust frame height when size of body changes
+    var frameDoc = contentWindow.document; // Adjust frame height when size of body changes
 
     domready(frameDoc, () => {
       var _frame$contentDocumen;
 
-      const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-
-      const ctaElement = frameDoc.getElementById("cta");
+      var _sqh = contentWindow.squatch || contentWindow.widgetIdent;
 
-      if (ctaElement) {
-        //@ts-ignore -- will occasionally throw a null pointer exception at runtime
-        ctaElement.parentNode.removeChild(ctaElement);
-      }
-
-      popupdiv.style.visibility = "visible";
-      popupdiv.style.top = "0px";
       (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
 
       this._loadEvent(_sqh);
@@ -1049,218 +992,92 @@ class PopupWidget extends Widget {
   }
 
   close() {
-    this.popupdiv.style.visibility = "hidden";
-    this.popupdiv.style.top = "-2000px";
+    var dialog = document.getElementById(this.id);
+    if (!dialog) throw new Error("Could not determine container div");
+    dialog.close();
 
     _log$5("Popup closed");
   }
 
-  _clickedOutside({
-    target
-  }) {
-    if (target === this.popupdiv) {
-      this.close();
-    }
+  _clickedOutside(_ref) {
   }
 
-  _error(rs, mode = "modal", style = "") {
-    const _style = "body { margin: 0; } .modal { box-shadow: none; border: 0; }";
-    return super._error(rs, mode, style || _style);
-  }
-
-}
-
-const _log$4 = debug__namespace("squatch-js:CTAwidget");
-/**
- * A CtaWidget is displayed on top of your page
- *
- * To create a CtaWidget use {@link Widgets}
- *
- */
-
-
-class CtaWidget extends PopupWidget {
-  constructor(params, opts) {
-    _log$4("CTA constructor");
-
-    const ctaElement = document.createElement("div");
-    ctaElement.id = "cta";
-    document.body.appendChild(ctaElement);
-    super(params, "#cta");
-
-    if (!opts.side && !opts.position) {
-      opts.position = "bottom";
-      opts.side = "right";
-    }
-
-    if (opts.position === "middle") {
-      this.position = "top: 45%;";
-      this.side = opts.side === "center" ? "right: 45%;" : `${opts.side}: -10px;`;
-    } else {
-      this.position = `${opts.position}: -10px;`;
-      this.side = opts.side === "center" ? "right: 45%;" : `${opts.side}: 20px;`;
+  _error(rs, mode, style) {
+    if (mode === void 0) {
+      mode = "modal";
     }
 
-    this.positionClass = opts.position;
-    this.ctaFrame = document.createElement("iframe"); // @ts-ignore - we are creating this pass-through
-
-    this.ctaFrame.squatchJsApi = this;
-    this.ctaFrame.scrolling = "no";
-    this.ctaFrame.setAttribute("style", `border:0; background-color:transparent; position:fixed; display:none;${this.side}${this.position}`);
-    document.body.appendChild(this.ctaFrame);
-
-    _log$4("ctaframe appended to body");
-  }
-
-  load() {
-    super.load();
-
-    if (!this.frame.contentWindow) {
-      throw new Error("frame requires a contentWindow");
+    if (style === void 0) {
+      style = "";
     }
 
-    const widgetFrameDoc = this.frame.contentWindow.document;
-    const ctaFrame = this.ctaFrame;
-    const positionClass = this.positionClass; // Wait for widget doc to be ready to grab the cta HTML
-
-    domready(widgetFrameDoc, () => {
-      const ctaElement = widgetFrameDoc.getElementById("cta");
-
-      if (ctaElement) {
-        if (!ctaElement.parentNode) {
-          throw new Error("ctaElement requires a parentNode");
-        }
-
-        ctaElement.parentNode.removeChild(ctaElement);
-        const ctaFrameWindow = ctaFrame.contentWindow;
-
-        if (!ctaFrameWindow) {
-          throw new Error("ctaFrame requires a contentWindow");
-        }
-
-        const ctaFrameDoc = ctaFrameWindow.document;
-        ctaFrameDoc.open();
-        ctaFrameDoc.write(ctaElement.innerHTML);
-        ctaFrameDoc.write(`<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`);
-        ctaFrameDoc.close(); // Figure out size of CTA as well
-
-        domready(ctaFrameDoc, () => {
-          const ctaContainer = ctaFrameDoc.getElementsByClassName("cta-container")[0]; // @ts-ignore - Assume it's a stylable element, die otherwise
-
-          ctaContainer.style.position = "fixed"; // @ts-ignore - Assume it's an element with offsetHeight
-
-          ctaFrame.height = ctaContainer.offsetHeight; // @ts-ignore - Browser will cast from number to string (we hope)
-
-          ctaFrame.width = ctaContainer.scrollWidth;
-          ctaFrame.style.display = "block";
-
-          if (!ctaContainer.classList.contains(positionClass)) {
-            ctaContainer.className += ` ${positionClass}`;
-          } // Adjust frame height when size of body changes
-
-
-          const ro = new ctaFrameWindow["ResizeObserver"](entries => {
-            for (const entry of entries) {
-              const {
-                height,
-                width
-              } = entry.contentRect; // @ts-ignore - Browser will cast from number to string (we hope)
-
-              ctaFrame.height = height; // @ts-ignore - Browser will cast from number to string (we hope)
-
-              ctaFrame.width = width;
-            }
-          });
-          ro.observe(ctaContainer);
-
-          _log$4("CTA template loaded into iframe");
-        });
-      } else {
-        _log$4(new Error("CTA element not found in theme"));
-      }
-    });
-  }
-  /**
-   *  @inheritdoc
-   */
-
-
-  open() {
-    super.open();
-  }
-  /**
-   *  @inheritdoc
-   */
-
-
-  close() {
-    super.close();
+    var _style = "body { margin: 0; } .modal { box-shadow: none; border: 0; }";
+    return super._error(rs, mode, style || _style);
   }
 
 }
 
-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
- * {@link WidgetApi} but most people will prefer to use these easy methods.
- *
+var _log$4 = debug.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.
+ *
  */
 
 
 class Widgets {
-  /**
-   * Initialize a new {@link Widgets} instance.
-   *
-   * @param {ConfigOptions} config Config details
-   *
-   * @example <caption>Browser example</caption>
-   * var widgets = new squatch.Widgets({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Browserify/Webpack example</caption>
-   * var Widgets = require('@saasquatch/squatch-js').Widgets;
-   * var widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Babel+Browserify/Webpack example</caption>
-   * import {Widgets} from '@saasquatch/squatch-js';
-   * let widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+  /**
+   * Initialize a new {@link Widgets} instance.
+   *
+   * @param {ConfigOptions} config Config details
+   *
+   * @example <caption>Browser example</caption>
+   * var widgets = new squatch.Widgets({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Browserify/Webpack example</caption>
+   * var Widgets = require('@saasquatch/squatch-js').Widgets;
+   * var widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Babel+Browserify/Webpack example</caption>
+   * import {Widgets} from '@saasquatch/squatch-js';
+   * let widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
    */
   constructor(configin) {
-    const raw = configin;
-    const config = validateConfig(raw);
+    this.api = void 0;
+    this.tenantAlias = void 0;
+    this.domain = void 0;
+    this.npmCdn = void 0;
+    var config = validateConfig(configin);
     this.tenantAlias = config.tenantAlias;
     this.domain = config.domain;
-    this.npmCdn = config.npmCdn; // for with locals custom theme, can be removed once with locals isnt' using eventBus anymore.
-
-    this.eventBus = EventBus__namespace;
+    this.npmCdn = config.npmCdn;
     this.api = new WidgetApi(config); // listens to a 'submit_email' event in the theme.
-
-    EventBus__namespace.addEventListener("submit_email", Widgets._cb);
-  }
-  /**
-   * This function calls the {@link WidgetApi.upsertUser} method, and it renders
-   * the widget if it is successful. Otherwise it shows the "error" widget.
-   *
-   * @param {Object} config Config details
-   * @param {Object} config.user The user details
-   * @param {string} config.user.id The user id
-   * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget.
-   * @param {EngagementMedium} config.engagementMedium How to display the widget.
-   * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
-   * @param {HTMLElement | string | undefined} config.container Element to load the widget into
-   * @param {string | undefined} config.trigger Trigger element for opening the popup widget
-   *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+  }
+  /**
+   * This function calls the {@link WidgetApi.upsertUser} method, and it renders
+   * the widget if it is successful. Otherwise it shows the "error" widget.
+   *
+   * @param {Object} config Config details
+   * @param {Object} config.user The user details
+   * @param {string} config.user.id The user id
+   * @param {string} config.user.accountId The user account id
+   * @param {WidgetType} config.widgetType The content of the widget.
+   * @param {EngagementMedium} config.engagementMedium How to display the widget.
+   * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
+   * @param {HTMLElement | string | undefined} config.container Element to load the widget into
+   * @param {string | undefined} config.trigger Trigger element for opening the popup widget
+   *
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
    */
 
 
   async upsertUser(config) {
-    const raw = config;
-    const clean = validateWidgetConfig(raw);
+    var raw = config;
+    var clean = validateWidgetConfig(raw);
 
     try {
-      const response = await this.api.upsertUser(clean);
+      var response = await this.api.upsertUser(clean);
       return {
         widget: this._renderWidget(response, clean, {
           type: "upsert",
@@ -1272,7 +1089,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$3(err);
+      _log$4(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1281,29 +1098,29 @@ class Widgets {
       throw err;
     }
   }
-  /**
-   * This function calls the {@link WidgetApi.render} method, and it renders
-   * the widget if it is successful. Otherwise it shows the "error" widget.
-   *
-   * @param {Object} config Config details
-   * @param {Object} config.user The user details
-   * @param {string} config.user.id The user id
-   * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget.
-   * @param {EngagementMedium} config.engagementMedium How to display the widget.
-   * @param {string} config.jwt the JSON Web Token (JWT) that is used
-   *                            to validate the data (can be disabled)
-   *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+  /**
+   * This function calls the {@link WidgetApi.render} method, and it renders
+   * the widget if it is successful. Otherwise it shows the "error" widget.
+   *
+   * @param {Object} config Config details
+   * @param {Object} config.user The user details
+   * @param {string} config.user.id The user id
+   * @param {string} config.user.accountId The user account id
+   * @param {WidgetType} config.widgetType The content of the widget.
+   * @param {EngagementMedium} config.engagementMedium How to display the widget.
+   * @param {string} config.jwt the JSON Web Token (JWT) that is used
+   *                            to validate the data (can be disabled)
+   *
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
    */
 
 
   async render(config) {
-    const raw = config;
-    const clean = validatePasswordlessConfig(raw);
+    var raw = config;
+    var clean = validatePasswordlessConfig(raw);
 
     try {
-      const response = await this.api.render(clean);
+      var response = await this.api.render(clean);
       return {
         widget: this._renderWidget(response, clean, {
           type: "passwordless",
@@ -1319,21 +1136,23 @@ class Widgets {
       throw err;
     }
   }
-  /**
-   * Autofills a referral code into an element when someone has been referred.
-   * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
-   *
-   * @param selector Element class/id selector, or a callback function
-   * @returns
+  /**
+   * Autofills a referral code into an element when someone has been referred.
+   * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
+   *
+   * @param selector Element class/id selector, or a callback function
+   * @returns
    */
 
 
   autofill(selector) {
-    const input = selector;
+    var input = selector;
 
     if (typeof input === "function") {
-      this.api.squatchReferralCookie().then((...args) => input(...args)).catch(ex => {
-        _log$3("Autofill error", ex);
+      this.api.squatchReferralCookie().then(function () {
+        return input(...arguments);
+      }).catch(ex => {
+        _log$4("Autofill error", ex);
 
         throw ex;
       });
@@ -1341,59 +1160,45 @@ class Widgets {
     }
 
     if (typeof input !== "string") throw new Error("Autofill accepts a string or function");
-    let elems = document.querySelectorAll(input);
-    let elem;
+    var elems = document.querySelectorAll(input);
+    var elem;
 
     if (elems.length > 0) {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$3("Element id/class or function missing");
+      _log$4("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
 
-    this.api.squatchReferralCookie() //@ts-ignore
-    .then(({
-      code
-    }) => {
-      elem.value = code;
+    this.api.squatchReferralCookie().then(_ref => {
+      var {
+        codes
+      } = _ref;
+      elem.value = codes[0];
     }).catch(ex => {
       throw ex;
     });
   }
-  /**
-   * Overrides the default function that submits the user email. If you have
-   * Security enabled, the email needs to be signed before it's submitted.
-   *
-   * @param {function} fn Callback function for the 'submit_email' event.
-   * @returns {void}
-   */
-
-
-  submitEmail(fn) {
-    EventBus__namespace.removeEventListener("submit_email", Widgets._cb);
-    EventBus__namespace.addEventListener("submit_email", fn);
-  }
-  /**
-   * @hidden
-   * @param {Object} response The json object return from the WidgetApi
-   * @param {Object} config Config details
-   * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
-   * @param {string} config.engagementMedium (POPUP, EMBED)
-   * @returns {Widget} widget (PopupWidget, EmbedWidget, or CtaWidget)
+  /**
+   * @hidden
+   * @param {Object} response The json object return from the WidgetApi
+   * @param {Object} config Config details
+   * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
+   * @param {string} config.engagementMedium (POPUP, EMBED)
+   * @returns {Widget} widget (PopupWidget or EmbedWidget)
    */
 
 
   _renderWidget(response, config, context) {
-    _log$3("Rendering Widget...");
+    _log$4("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
-    let widget;
-    let displayOnLoad = !!config.displayOnLoad;
-    let displayCTA = false;
-    const opts = response.jsOptions || "";
-    const params = {
+    var widget;
+    var displayOnLoad = !!config.displayOnLoad;
+    var opts = response.jsOptions || "";
+    var params = {
       content: response.template,
       type: config.widgetType || opts.widget.defaultWidgetType,
       api: this.api,
@@ -1407,67 +1212,47 @@ class Widgets {
         if (Widgets._matchesUrl(rule.url)) {
           if (rule.widgetType !== "CONVERSION_WIDGET" || response.user.referredBy && response.user.referredBy.code) {
             displayOnLoad = rule.displayOnLoad;
-            displayCTA = rule.showAsCTA;
 
-            _log$3(`Display ${rule.widgetType} on ${rule.url}`);
+            _log$4("Display " + rule.widgetType + " on " + rule.url);
           } else {
-            _log$3(`Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`);
+            _log$4("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
           }
         }
       });
     }
 
-    if (opts.conversionUrls) {
-      opts.conversionUrls.forEach(rule => {
-        if (response.user.referredBy && Widgets._matchesUrl(rule)) {
-          _log$3("This is a conversion URL", rule);
-        }
-      });
-    }
-
     if (opts.fuelTankAutofillUrls) {
-      _log$3("We found a fuel tank autofill!");
+      _log$4("We found a fuel tank autofill!");
+
+      opts.fuelTankAutofillUrls.forEach(_ref2 => {
+        var {
+          url,
+          formSelector
+        } = _ref2;
 
-      opts.fuelTankAutofillUrls.forEach(({
-        url,
-        formSelector
-      }) => {
         if (Widgets._matchesUrl(url)) {
-          _log$3("Fuel Tank URL matches");
+          _log$4("Fuel Tank URL matches");
 
           if (response.user.referredBy && response.user.referredBy.code) {
-            const formAutofill = document.querySelector(formSelector);
+            var formAutofill = document.querySelector(formSelector);
 
             if (formAutofill) {
               formAutofill.value = response.user.referredBy.referredReward.fuelTankCode || "";
             } else {
-              _log$3(new Error(`Element with id/class ${formSelector} was not found.`));
+              _log$4(new Error("Element with id/class " + formSelector + " was not found."));
             }
           }
         }
       });
     }
 
-    if (!displayCTA && config.engagementMedium === "EMBED") {
-      widget = new EmbedWidget(params, params.context.container);
-      widget.load();
-    } else if (!displayCTA && config.engagementMedium === "POPUP") {
-      widget = new PopupWidget(params, params.context.trigger);
-      widget.load();
-      if (displayOnLoad) widget.open();
-    } else if (displayCTA) {
-      _log$3("display CTA");
-
-      const side = opts.cta.content.buttonSide;
-      const position = opts.cta.content.buttonPosition;
-      widget = new CtaWidget(params, {
-        side,
-        position
-      });
-      widget.load();
+    if (config.engagementMedium === "EMBED") {
+      this._renderEmbedWidget(params, params.context.container);
+    } else if (config.engagementMedium === "POPUP") {
+      widget = this._renderPopupWidget(params);
       if (displayOnLoad) widget.open();
     } else {
-      _log$3("display popup on load");
+      _log$4("display popup on load");
 
       widget = new PopupWidget(params);
       widget.load();
@@ -1476,24 +1261,45 @@ class Widgets {
 
     return widget;
   }
-  /**
-   * @hidden
-   * @param {Object} error The json object containing the error details
-   * @param {string} em The engagementMedium
-   * @returns {void}
+
+  _renderPopupWidget(params) {
+    var widget = new PopupWidget(params, params.context.trigger);
+
+    var frame = widget._createFrame();
+
+    widget.load(frame);
+    return widget;
+  }
+
+  _renderEmbedWidget(params, container) {
+    var widget = new EmbedWidget(params);
+
+    var frame = widget._createFrame();
+
+    widget.load(frame);
+  }
+  /**
+   * @hidden
+   * @param {Object} error The json object containing the error details
+   * @param {string} em The engagementMedium
+   * @returns {void}
    */
 
 
-  _renderErrorWidget(props, em = "POPUP") {
-    const {
+  _renderErrorWidget(props, em) {
+    if (em === void 0) {
+      em = "POPUP";
+    }
+
+    var {
       apiErrorCode,
       rsCode,
       message
     } = props;
 
-    _log$3(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+    _log$4(new Error(apiErrorCode + " (" + rsCode + ") " + message));
 
-    const params = {
+    var params = {
       content: "error",
       rsCode,
       api: this.api,
@@ -1504,20 +1310,26 @@ class Widgets {
         type: "error"
       }
     };
-    let widget;
+    var widget;
 
     if (em === "EMBED") {
       widget = new EmbedWidget(params);
-      widget.load();
+
+      var frame = widget._createFrame();
+
+      widget.load(frame);
     } else if (em === "POPUP") {
       widget = new PopupWidget(params);
-      widget.load();
+
+      var _frame = widget._createFrame();
+
+      widget.load(_frame);
     }
   }
-  /**
-   * @hidden
-   * @param {string} rule A regular expression
-   * @returns {boolean} true if rule matches Url, false otherwise
+  /**
+   * @hidden
+   * @param {string} rule A regular expression
+   * @returns {boolean} true if rule matches Url, false otherwise
    */
 
 
@@ -1525,18 +1337,18 @@ class Widgets {
     // If there were no matches, null is returned.
     return window.location.href.match(new RegExp(rule)) ? true : false;
   }
-  /**
-   * @hidden
-   * @param {Object} target Object containing the target DOM element
-   * @param {Widget} widget A widget (EmbedWidget, PopupWidget, CtaWidget)
-   * @param {Object} params An object with valid parameters
-   *                        (e.g) {email:'email', firstName:'firstName'}
-   * @returns {void}
+  /**
+   * @hidden
+   * @param {Object} target Object containing the target DOM element
+   * @param {Widget} widget A widget (EmbedWidget, PopupWidget)
+   * @param {Object} params An object with valid parameters
+   *                        (e.g) {email:'email', firstName:'firstName'}
+   * @returns {void}
    */
 
 
   static _cb(target, widget, params) {
-    let paramsObj; // If params is a string, then it should be an email
+    var paramsObj; // If params is a string, then it should be an email
 
     if (typeof params === "string" || params instanceof String) {
       paramsObj = {
@@ -1552,71 +1364,76 @@ class Widgets {
 
 }
 
-/**
- *
- * The EventsApi class is a wrapper around the open endpoints of the SaaSquatch REST API.
- *
+/**
+ *
+ * The EventsApi class is a wrapper around the open endpoints of the SaaSquatch REST API.
+ *
  */
 
 class EventsApi {
-  /**
-   * Initialize a new {@link EventsApi} instance.
-   *
-   * @param {ConfigOptions} config Config details
-   *
-   * @example <caption>Browser example</caption>
-   * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Browserify/Webpack example</caption>
-   * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
-   * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Babel+Browserify/Webpack example</caption>
-   * import {EventsApi} from '@saasquatch/squatch-js';
-   * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+  /**
+   * Initialize a new {@link EventsApi} instance.
+   *
+   * @param {ConfigOptions} config Config details
+   *
+   * @example <caption>Browser example</caption>
+   * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Browserify/Webpack example</caption>
+   * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
+   * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Babel+Browserify/Webpack example</caption>
+   * import {EventsApi} from '@saasquatch/squatch-js';
+   * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
    */
   constructor(config) {
-    const raw = config; // Flags that we need to validate anything we use from this type
+    this.tenantAlias = void 0;
+    this.domain = void 0;
+    var raw = config; // Flags that we need to validate anything we use from this type
 
-    const clean = validateConfig(raw);
+    var clean = validateConfig(raw);
     this.tenantAlias = clean.tenantAlias;
     this.domain = clean.domain;
   }
-  /**
-   * Track an event for a user
-   *
-   * @param params Parameters for request
-   * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
-   *
-   * @return An ID to confirm the event has been accepted for asynchronous processing
+  /**
+   * Track an event for a user
+   *
+   * @param params Parameters for request
+   * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
+   *
+   * @return An ID to confirm the event has been accepted for asynchronous processing
    */
 
 
   track(params, options) {
-    const raw = params;
-    const rawOpts = options;
+    var raw = params;
+    var rawOpts = options;
 
-    const body = _validateEvent(raw);
+    var body = _validateEvent(raw);
 
-    const {
+    var {
       jwt
     } = _validateTrackOptions(rawOpts);
 
-    const ta = encodeURIComponent(this.tenantAlias);
-    const userId = encodeURIComponent(body.userId);
-    const accountId = encodeURIComponent(body.accountId);
-    const path = `/api/v1/${ta}/open/account/${accountId}/user/${userId}/events`;
-    const url = this.domain + path;
+    var ta = encodeURIComponent(this.tenantAlias);
+    var userId = encodeURIComponent(body.userId);
+    var accountId = encodeURIComponent(body.accountId);
+    var path = "/api/v1/" + ta + "/open/account/" + accountId + "/user/" + userId + "/events";
+    var url = this.domain + path;
     return doPost(url, JSON.stringify(body), jwt);
   }
 
 }
 
 function _validateEvent(raw) {
-  if (!assertProp(raw, "accountId", "events", "userId")) ;
-  if (!Array.isArray(raw.events)) throw new Error("'events' should be an array"); // TODO: Better type checking
-
-  return raw;
+  if (!isObject$1(raw)) throw new Error("tracking parameter must be an object");
+  if (!(raw != null && raw["accountId"])) throw new Error("accountId field is required");
+  if (!(raw != null && raw["events"])) throw new Error("events field is required");
+  if (!(raw != null && raw["userId"])) throw new Error("userId field is required");
+  var clean = raw;
+  if (!Array.isArray(clean.events)) throw new Error("'events' should be an array");
+  return clean;
 }
 
 function _validateTrackOptions(raw) {
@@ -1626,12 +1443,13 @@ function _validateTrackOptions(raw) {
 
 /** @hidden */
 function asyncLoad() {
-  const loaded = window.squatch || null;
-  const cached = window._squatch || null;
+  var loaded = window.squatch || null;
+  var cached = window._squatch || null;
 
   if (loaded && cached) {
-    const ready = cached.ready || [];
-    ready.forEach(cb => setTimeout(() => cb(), 0)); // @ts-ignore -- intetionally deletes `_squatch` to cleanup initialization
+    var ready = cached.ready || [];
+    ready.forEach(cb => setTimeout(() => cb(), 0));
+    setTimeout(() => window.squatch._auto(), 0); // @ts-ignore -- intetionally deletes `_squatch` to cleanup initialization
 
     window._squatch = undefined;
 
@@ -1643,392 +1461,16 @@ function asyncLoad() {
   }
 }
 
-/*! (c) Andrea Giammarchi - ISC */
-var self = undefined || /* istanbul ignore next */ {};
-try {
-  (function (URLSearchParams, plus) {
-    if (
-      new URLSearchParams('q=%2B').get('q') !== plus ||
-      new URLSearchParams({q: plus}).get('q') !== plus ||
-      new URLSearchParams([['q', plus]]).get('q') !== plus ||
-      new URLSearchParams('q=\n').toString() !== 'q=%0A' ||
-      new URLSearchParams({q: ' &'}).toString() !== 'q=+%26' ||
-      new URLSearchParams({q: '%zx'}).toString() !== 'q=%25zx'
-    )
-      throw URLSearchParams;
-    self.URLSearchParams = URLSearchParams;
-  }(URLSearchParams, '+'));
-} catch(URLSearchParams) {
-  (function (Object, String, isArray) {    var create = Object.create;
-    var defineProperty = Object.defineProperty;
-    var find = /[!'\(\)~]|%20|%00/g;
-    var findPercentSign = /%(?![0-9a-fA-F]{2})/g;
-    var plus = /\+/g;
-    var replace = {
-      '!': '%21',
-      "'": '%27',
-      '(': '%28',
-      ')': '%29',
-      '~': '%7E',
-      '%20': '+',
-      '%00': '\x00'
-    };
-    var proto = {
-      append: function (key, value) {
-        appendTo(this._ungap, key, value);
-      },
-      delete: function (key) {
-        delete this._ungap[key];
-      },
-      get: function (key) {
-        return this.has(key) ? this._ungap[key][0] : null;
-      },
-      getAll: function (key) {
-        return this.has(key) ? this._ungap[key].slice(0) : [];
-      },
-      has: function (key) {
-        return key in this._ungap;
-      },
-      set: function (key, value) {
-        this._ungap[key] = [String(value)];
-      },
-      forEach: function (callback, thisArg) {
-        var self = this;
-        for (var key in self._ungap)
-          self._ungap[key].forEach(invoke, key);
-        function invoke(value) {
-          callback.call(thisArg, value, String(key), self);
-        }
-      },
-      toJSON: function () {
-        return {};
-      },
-      toString: function () {
-        var query = [];
-        for (var key in this._ungap) {
-          var encoded = encode(key);
-          for (var
-            i = 0,
-            value = this._ungap[key];
-            i < value.length; i++
-          ) {
-            query.push(encoded + '=' + encode(value[i]));
-          }
-        }
-        return query.join('&');
-      }
-    };
-    for (var key in proto)
-      defineProperty(URLSearchParams.prototype, key, {
-        configurable: true,
-        writable: true,
-        value: proto[key]
-      });
-    self.URLSearchParams = URLSearchParams;
-    function URLSearchParams(query) {
-      var dict = create(null);
-      defineProperty(this, '_ungap', {value: dict});
-      switch (true) {
-        case !query:
-          break;
-        case typeof query === 'string':
-          if (query.charAt(0) === '?') {
-            query = query.slice(1);
-          }
-          for (var
-            pairs = query.split('&'),
-            i = 0,
-            length = pairs.length; i < length; i++
-          ) {
-            var value = pairs[i];
-            var index = value.indexOf('=');
-            if (-1 < index) {
-              appendTo(
-                dict,
-                decode(value.slice(0, index)),
-                decode(value.slice(index + 1))
-              );
-            } else if (value.length){
-              appendTo(
-                dict,
-                decode(value),
-                ''
-              );
-            }
-          }
-          break;
-        case isArray(query):
-          for (var
-            i = 0,
-            length = query.length; i < length; i++
-          ) {
-            var value = query[i];
-            appendTo(dict, value[0], value[1]);
-          }
-          break;
-        case 'forEach' in query:
-          query.forEach(addEach, dict);
-          break;
-        default:
-          for (var key in query)
-            appendTo(dict, key, query[key]);
-      }
-    }
-
-    function addEach(value, key) {
-      appendTo(this, key, value);
-    }
-
-    function appendTo(dict, key, value) {
-      var res = isArray(value) ? value.join(',') : value;
-      if (key in dict)
-        dict[key].push(res);
-      else
-        dict[key] = [res];
-    }
-
-    function decode(str) {
-      return decodeURIComponent(str.replace(findPercentSign, '%25').replace(plus, ' '));
-    }
-
-    function encode(str) {
-      return encodeURIComponent(str).replace(find, replacer);
-    }
-
-    function replacer(match) {
-      return replace[match];
-    }
-
-  }(Object, String, Array.isArray));
-}
-
-(function (URLSearchParamsProto) {
-
-  var iterable = false;
-  try { iterable = !!Symbol.iterator; } catch (o_O) {}
-
-  /* istanbul ignore else */
-  if (!('forEach' in URLSearchParamsProto)) {
-    URLSearchParamsProto.forEach = function forEach(callback, thisArg) {
-      var self = this;
-      var names = Object.create(null);
-      this.toString()
-          .replace(/=[\s\S]*?(?:&|$)/g, '=')
-          .split('=')
-          .forEach(function (name) {
-            if (!name.length || name in names)
-              return;
-            (names[name] = self.getAll(name)).forEach(function(value) {
-              callback.call(thisArg, value, name, self);
-            });
-          });
-    };
-  }
-
-  /* istanbul ignore else */
-  if (!('keys' in URLSearchParamsProto)) {
-    URLSearchParamsProto.keys = function keys() {
-      return iterator(this, function(value, key) { this.push(key); });
-    };
-  }
-
-   /* istanbul ignore else */
-  if (!('values' in URLSearchParamsProto)) {
-    URLSearchParamsProto.values = function values() {
-      return iterator(this, function(value, key) { this.push(value); });
-    };
-  }
-
-  /* istanbul ignore else */
-  if (!('entries' in URLSearchParamsProto)) {
-    URLSearchParamsProto.entries = function entries() {
-      return iterator(this, function(value, key) { this.push([key, value]); });
-    };
-  }
-
-  /* istanbul ignore else */
-  if (iterable && !(Symbol.iterator in URLSearchParamsProto)) {
-    URLSearchParamsProto[Symbol.iterator] = URLSearchParamsProto.entries;
-  }
-
-  /* istanbul ignore else */
-  if (!('sort' in URLSearchParamsProto)) {
-    URLSearchParamsProto.sort = function sort() {
-      var
-        entries = this.entries(),
-        entry = entries.next(),
-        done = entry.done,
-        keys = [],
-        values = Object.create(null),
-        i, key, value
-      ;
-      while (!done) {
-        value = entry.value;
-        key = value[0];
-        keys.push(key);
-        if (!(key in values)) {
-          values[key] = [];
-        }
-        values[key].push(value[1]);
-        entry = entries.next();
-        done = entry.done;
-      }
-      // not the champion in efficiency
-      // but these two bits just do the job
-      keys.sort();
-      for (i = 0; i < keys.length; i++) {
-        this.delete(keys[i]);
-      }
-      for (i = 0; i < keys.length; i++) {
-        key = keys[i];
-        this.append(key, values[key].shift());
-      }
-    };
-  }
-
-  function iterator(self, callback) {
-    var items = [];
-    self.forEach(callback, items);
-    /* istanbul ignore next */
-    return iterable ?
-      items[Symbol.iterator]() :
-      {
-        next: function() {
-          var value = items.shift();
-          return {done: value === void 0, value: value};
-        }
-      };
-  }
-
-  /* istanbul ignore next */
-  (function (Object) {
-    var
-      dP = Object.defineProperty,
-      gOPD = Object.getOwnPropertyDescriptor,
-      createSearchParamsPollute = function (search) {
-        function append(name, value) {
-          URLSearchParamsProto.append.call(this, name, value);
-          name = this.toString();
-          search.set.call(this._usp, name ? ('?' + name) : '');
-        }
-        function del(name) {
-          URLSearchParamsProto.delete.call(this, name);
-          name = this.toString();
-          search.set.call(this._usp, name ? ('?' + name) : '');
-        }
-        function set(name, value) {
-          URLSearchParamsProto.set.call(this, name, value);
-          name = this.toString();
-          search.set.call(this._usp, name ? ('?' + name) : '');
-        }
-        return function (sp, value) {
-          sp.append = append;
-          sp.delete = del;
-          sp.set = set;
-          return dP(sp, '_usp', {
-            configurable: true,
-            writable: true,
-            value: value
-          });
-        };
-      },
-      createSearchParamsCreate = function (polluteSearchParams) {
-        return function (obj, sp) {
-          dP(
-            obj, '_searchParams', {
-              configurable: true,
-              writable: true,
-              value: polluteSearchParams(sp, obj)
-            }
-          );
-          return sp;
-        };
-      },
-      updateSearchParams = function (sp) {
-        var append = sp.append;
-        sp.append = URLSearchParamsProto.append;
-        URLSearchParams.call(sp, sp._usp.search.slice(1));
-        sp.append = append;
-      },
-      verifySearchParams = function (obj, Class) {
-        if (!(obj instanceof Class)) throw new TypeError(
-          "'searchParams' accessed on an object that " +
-          "does not implement interface " + Class.name
-        );
-      },
-      upgradeClass = function (Class) {
-        var
-          ClassProto = Class.prototype,
-          searchParams = gOPD(ClassProto, 'searchParams'),
-          href = gOPD(ClassProto, 'href'),
-          search = gOPD(ClassProto, 'search'),
-          createSearchParams
-        ;
-        if (!searchParams && search && search.set) {
-          createSearchParams = createSearchParamsCreate(
-            createSearchParamsPollute(search)
-          );
-          Object.defineProperties(
-            ClassProto,
-            {
-              href: {
-                get: function () {
-                  return href.get.call(this);
-                },
-                set: function (value) {
-                  var sp = this._searchParams;
-                  href.set.call(this, value);
-                  if (sp) updateSearchParams(sp);
-                }
-              },
-              search: {
-                get: function () {
-                  return search.get.call(this);
-                },
-                set: function (value) {
-                  var sp = this._searchParams;
-                  search.set.call(this, value);
-                  if (sp) updateSearchParams(sp);
-                }
-              },
-              searchParams: {
-                get: function () {
-                  verifySearchParams(this, Class);
-                  return this._searchParams || createSearchParams(
-                    this,
-                    new URLSearchParams(this.search.slice(1))
-                  );
-                },
-                set: function (sp) {
-                  verifySearchParams(this, Class);
-                  createSearchParams(this, sp);
-                }
-              }
-            }
-          );
-        }
-      }
-    ;
-    try {
-      upgradeClass(HTMLAnchorElement);
-      if (/^function|object$/.test(typeof URL) && URL.prototype)
-        upgradeClass(URL);
-    } catch (meh) {}
-  }(Object));
-
-}(self.URLSearchParams.prototype));
-var URLSearchParams$1 = self.URLSearchParams;
-
 /** @hidden */
 
-const _log$2 = debug__default['default']("squatch-js");
+var _log$3 = debug.debug("squatch-js");
 
-const isObject = item => typeof item === "object" && !Array.isArray(item);
+var isObject = item => typeof item === "object" && !Array.isArray(item);
 
-const deepMerge = (target, source) => {
-  const isDeep = prop => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
+var deepMerge = (target, source) => {
+  var isDeep = prop => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
 
-  const replaced = Object.getOwnPropertyNames(source).map(prop => ({
+  var replaced = Object.getOwnPropertyNames(source).map(prop => ({
     [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
   })).reduce((a, b) => _extends({}, a, b), {});
   return _extends({}, target, replaced);
@@ -2062,19 +1504,19 @@ function getTopDomain() {
 }
 
 function _pushCookie() {
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams$1(queryString);
-  const refParam = urlParams.get("_saasquatch") || ""; // do nothing if no params
+  var queryString = window.location.search;
+  var urlParams = new URLSearchParams(queryString);
+  var refParam = urlParams.get("_saasquatch") || ""; // do nothing if no params
 
   if (refParam) {
-    let paramsJSON = "",
+    var paramsJSON = "",
         existingCookie = "",
         reEncodedCookie = "";
 
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$2("Unable to decode params", error); // don't merge invalid params
+      _log$3("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -2083,26 +1525,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies__default['default'].get("_saasquatch")));
 
-      _log$2("existing cookie", existingCookie);
+      _log$3("existing cookie", existingCookie);
     } catch (error) {
-      _log$2("Unable to retrieve cookie", error);
+      _log$3("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
-      const domain = getTopDomain();
+      var domain = getTopDomain();
 
-      _log$2("domain retrieved:", domain);
+      _log$3("domain retrieved:", domain);
 
       if (existingCookie) {
-        const newCookie = deepMerge(existingCookie, paramsJSON);
+        var newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$2("cookie to store:", newCookie);
+        _log$3("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$2("cookie to store:", paramsJSON);
+        _log$3("cookie to store:", paramsJSON);
       }
 
       Cookies__default['default'].set("_saasquatch", reEncodedCookie, {
@@ -2113,52 +1555,52 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$2("Unable to set cookie", error);
+      _log$3("Unable to set cookie", error);
     }
   }
 }
 
 /** @hidden */
 
-const _log$1 = debug__default['default']("squatch-js");
+var _log$2 = debug.debug("squatch-js");
 
 function _getAutoConfig(configIn) {
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-  const refParam = urlParams.get("_saasquatchExtra") || "";
+  var queryString = window.location.search;
+  var urlParams = new URLSearchParams(queryString);
+  var refParam = urlParams.get("_saasquatchExtra") || "";
 
   if (!refParam) {
-    _log$1("No _saasquatchExtra param");
+    _log$2("No _saasquatchExtra param");
 
     return;
   }
 
-  let raw;
+  var raw;
 
   try {
     raw = JSON.parse(b64decode(refParam));
   } catch (e) {
-    _log$1("Unable to decode _saasquatchExtra config");
+    _log$2("Unable to decode _saasquatchExtra config");
 
     return;
   }
 
-  const {
+  var {
     domain,
     tenantAlias,
     widgetConfig
   } = convertExtraToConfig(raw);
 
   if (!domain || !tenantAlias || !widgetConfig) {
-    _log$1("_saasquatchExtra did not have an expected structure");
+    _log$2("_saasquatchExtra did not have an expected structure");
 
     return undefined;
   }
 
-  const {
+  var {
     autoPopupWidgetType
   } = widgetConfig,
-        rest = _objectWithoutPropertiesLoose(widgetConfig, ["autoPopupWidgetType"]);
+      rest = _objectWithoutPropertiesLoose(widgetConfig, ["autoPopupWidgetType"]);
 
   return {
     widgetConfig: _extends({
@@ -2173,19 +1615,19 @@ function _getAutoConfig(configIn) {
     })
   };
 }
-/**
- * Deconstructs _saasquatchExtra into domain, tenantAlias, and widgetConfig
- * @param obj {Record<string, any>} Expected to be of the form `{ [appDomain]: { [tenantAlias]: { autoPopupWidgetType: [widgetType], [rest]?: ... } } }`
+/**
+ * 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://"
+  var _domain = Object.keys(obj || {})[0];
+  var tenantAlias = Object.keys((obj == null ? void 0 : obj[_domain]) || {})[0];
+  var 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;
+  var domain = _domain ? "https://" + _domain : undefined;
   return {
     domain,
     tenantAlias,
@@ -2193,9 +1635,240 @@ function convertExtraToConfig(obj) {
   };
 }
 
+var _log$1 = debug.debug("squatch-js:decodeJwt");
+
+function decodeUserJwt(tokenStr) {
+  try {
+    var _JSON$parse;
+
+    var base64Url = tokenStr.split(".")[1];
+    if (base64Url === undefined) return null;
+    var jsonStr = b64decode(base64Url);
+    return (_JSON$parse = JSON.parse(jsonStr)) == null ? void 0 : _JSON$parse.user;
+  } catch (e) {
+    _log$1(e);
+
+    return null;
+  }
+}
+
+debug__default['default']("sqh:DeclarativeWidget");
+
+class DeclarativeWidget extends HTMLElement {
+  constructor() {
+    super();
+    this.config = void 0;
+    this.token = void 0;
+    this.tenant = void 0;
+    this.widgetType = void 0;
+    this.widgetApi = void 0;
+    this.analyticsApi = void 0;
+    this.type = void 0;
+    this.widgetInstance = void 0;
+    this.frame = void 0;
+    this.container = void 0;
+    this.element = void 0;
+
+    this._setWidget = (template, config) => {
+      var _this$config;
+
+      if (!this.widgetType) throw new Error("Widget was no specified");
+      var Widget = this.type === "EMBED" ? EmbedWidget : PopupWidget;
+      return new Widget({
+        api: this.widgetApi,
+        content: template,
+        context: {
+          type: config.type,
+          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
+      });
+    };
+
+    this.setErrorWidget = e => {
+      var _this$config2;
+
+      var Widget = this.type === "EMBED" ? EmbedWidget : PopupWidget;
+      return new Widget({
+        api: this.widgetApi,
+        content: "error",
+        context: {
+          type: "error"
+        },
+        type: "ERROR_WIDGET",
+        domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
+        npmCdn: DEFAULT_NPM_CDN,
+        container: this.container || this
+      });
+    };
+
+    this.show = this.open;
+    this.hide = this.close;
+    this.attachShadow({
+      mode: "open"
+    }).innerHTML = "<style>:host { display: contents; }</style><slot></slot>";
+    this.config = window.squatchConfig;
+    this.token = window.squatchToken;
+    this.tenant = window.squatchTenant;
+    this.container = this;
+  }
+
+  _setupApis(config) {
+    var _this$config3, _this$config4;
+
+    if (!this.tenant) throw new Error("Requires tenantAlias");
+    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
+    });
+    this.analyticsApi = new AnalyticsApi({
+      domain: (config == null ? void 0 : config.domain) || ((_this$config4 = this.config) == null ? void 0 : _this$config4.domain) || DEFAULT_DOMAIN
+    });
+  }
+
+  renderPasswordlessVariant() {
+    var _configs$widgetConfig, _configs$widgetConfig2;
+
+    var configs = _getAutoConfig();
+
+    this._setupApis(configs == null ? void 0 : configs.squatchConfig);
+
+    return 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
+    }).then(res => this._setWidget(res.template, {
+      type: "passwordless"
+    })).catch(this.setErrorWidget);
+  }
+
+  async renderUserUpsertVariant() {
+    if (!this.widgetType) throw new Error("Widget must be specified");
+
+    this._setupApis();
+
+    var userObj = decodeUserJwt(this.token);
+    if (!userObj) throw new Error("Could not load user information from jwt");
+    var widgetInstance = await this.widgetApi.upsertUser({
+      user: userObj,
+      engagementMedium: this.type,
+      widgetType: this.widgetType,
+      jwt: this.token
+    }).then(res => this._setWidget(res.template, {
+      type: "upsert"
+    })).catch(this.setErrorWidget);
+    return widgetInstance;
+  }
+
+  async getWidgetInstance() {
+    var widgetInstance;
+    this.widgetType = this.getAttribute("widget") || undefined;
+    if (!this.widgetType) throw new Error("No widget has been specified");
+
+    if (!this.token) {
+      widgetInstance = await this.renderPasswordlessVariant();
+    } else {
+      widgetInstance = await this.renderUserUpsertVariant();
+    }
+
+    if (!widgetInstance) throw new Error("Could not create widget.");
+    this.widgetInstance = widgetInstance;
+    return widgetInstance;
+  }
+
+  async renderWidget() {
+    await this.getWidgetInstance();
+    this.element = this.widgetInstance._findElement();
+    this.frame = this.widgetInstance._createFrame();
+    await this.widgetInstance.load(this.frame);
+  }
+
+  open() {
+    this.widgetInstance.open(this.frame);
+  }
+
+  close() {
+    this.widgetInstance.close(this.frame);
+  }
+
+}
+
+class DeclarativeEmbedWidget extends DeclarativeWidget {
+  constructor() {
+    super();
+    this.type = "EMBED";
+    this.container = this.getAttribute("container") || this;
+  }
+
+  static get observedAttributes() {
+    return ["widget", "container"];
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    if (oldVal === newVal || !oldVal) return; // nothing to do
+
+    switch (attr) {
+      case "widget":
+        this.connectedCallback();
+        break;
+      // Specific to embed widgets
+
+      case "container":
+        if (this.element) this.close();
+        this.connectedCallback();
+        break;
+    }
+  }
+
+  async connectedCallback() {
+    var _ref, _this$shadowRoot;
+
+    await this.renderWidget();
+    var slot = (_ref = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _ref.find(c => c.tagName === "SLOT");
+    (_this$shadowRoot = this.shadowRoot) == null ? void 0 : _this$shadowRoot.removeChild(slot);
+  }
+
+}
+class DeclarativePopupWidget extends DeclarativeWidget {
+  constructor() {
+    super();
+    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();
+    });
+  }
+
+  static get observedAttributes() {
+    return ["widget", "id", "open"];
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    if (oldVal === newVal || !oldVal) return; // nothing to do
+
+    switch (attr) {
+      case "open":
+      case "widget":
+        this.connectedCallback();
+        break;
+    }
+  }
+
+  async connectedCallback() {
+    await this.renderWidget();
+    if (this.getAttribute("open") !== null) this.open();
+  }
+
+}
+window.customElements.define("squatch-embed", DeclarativeEmbedWidget);
+window.customElements.define("squatch-popup", DeclarativePopupWidget);
+
 // @ts-check
 function help() {
-  console.log(`Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.`);
+  console.log("Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.");
 }
 
 // @ts-check
@@ -2203,51 +1876,54 @@ function help() {
 
 /** @hidden */
 
-const _log = debug__default['default']("squatch-js");
+var _log = debug.debug("squatch-js");
 /** @hidden */
 
-let _api = null;
+var _api = null;
 /** @hidden */
 
-let _widgets = null;
+var _widgets = null;
 /** @hidden */
 
-let _events = null;
-/**
- * A static instance of the {@link WidgetApi} created when you call {@link #init init}.
- *
- * Read the {@link WidgetApi} docs.
- *
- * @returns WidgetApi static instance
+var _events = null;
+/**
+ * A static instance of the {@link WidgetApi} created when you call {@link #init init}.
+ *
+ * Read the {@link WidgetApi} docs.
+ *
+ * @returns WidgetApi static instance
  */
 
 function api() {
+  if (!_api) this.init({});
   return _api;
 }
-/**
- * A static instance of the {@link Widgets} created when you call {@link #init init}.
- *
- * Read the {@link Widgets} docs.
- *
- * @returns static instance
+/**
+ * A static instance of the {@link Widgets} created when you call {@link #init init}.
+ *
+ * Read the {@link Widgets} docs.
+ *
+ * @returns static instance
  */
 
 function widgets() {
+  if (!_widgets) this.init({});
   return _widgets;
 }
-/**
- * A static instance of the {@link EventsApi} created when you call {@link #init init}.
- *
- * Read the {@link EventsApi} docs.
- *
- * @returns EventsApi static instance
+/**
+ * A static instance of the {@link EventsApi} created when you call {@link #init init}.
+ *
+ * Read the {@link EventsApi} docs.
+ *
+ * @returns EventsApi static instance
  */
 
 function events() {
+  if (!_events) this.init({});
   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}.
+/**
+ * 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) {
@@ -2255,21 +1931,17 @@ function widget(widgetConfig) {
 
   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}.
+/**
+ * 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) {
-  console.log({
-    configIn
-  });
-
-  const configs = _getAutoConfig(configIn);
+  var configs = _getAutoConfig(configIn);
 
   if (configs) {
     var _widgets3;
 
-    const {
+    var {
       squatchConfig,
       widgetConfig
     } = configs;
@@ -2277,25 +1949,25 @@ function _auto(configIn) {
     return (_widgets3 = widgets()) == null ? void 0 : _widgets3.render(widgetConfig);
   }
 }
-/**
- * Initializes the static `squatch` global. This sets up:
- *
- *  - `squatch.api()` a static instance of the {@link WidgetApi}
- *  - `squatch.widgets()` a static instance of {@link Widgets}
- *  - `squatch.events()` a static instance of {@link EventsApi}
- *
- * @param config Configuration details
- *
- * @example
- * squatch.init({tenantAlias:'test_basbtabstq51v'});
+/**
+ * Initializes the static `squatch` global. This sets up:
+ *
+ *  - `squatch.api()` a static instance of the {@link WidgetApi}
+ *  - `squatch.widgets()` a static instance of {@link Widgets}
+ *  - `squatch.events()` a static instance of {@link EventsApi}
+ *
+ * @param config Configuration details
+ *
+ * @example
+ * squatch.init({tenantAlias:'test_basbtabstq51v'});
  */
 
 function init(configIn) {
-  const raw = configIn;
-  const config = validateConfig(raw);
+  var raw = configIn;
+  var config = validateConfig(raw);
 
   if (config.tenantAlias.match("^test") || config.debug) {
-    debug__default['default'].enable("squatch-js*");
+    debug.debug.enable("squatch-js*");
   }
 
   _log("initializing ...");
@@ -2310,67 +1982,65 @@ function init(configIn) {
 
   _log("Events API instance", _events);
 }
-/**
- * Squatch.js can't start safely making operations until it's "ready". This
- * function detects that state.
- *
- * @param fn A callback once Squatch.js is ready.
- *
- * @example
- * squatch.ready(function() {
- *   console.log("ready!");
- *   squatch.api().upsertUser();
- * });
+/**
+ * Squatch.js can't start safely making operations until it's "ready". This
+ * function detects that state.
+ *
+ * @param fn A callback once Squatch.js is ready.
+ *
+ * @example
+ * squatch.ready(function() {
+ *   console.log("ready!");
+ *   squatch.api().upsertUser();
+ * });
  */
 
 function ready(fn) {
   fn();
-
-  window.squatch._auto();
 }
-/**
- * Autofills a referral code into an element when someone has been referred.
- * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
- *
- * @param {string} selector Element class/id
- * @returns {void}
+/**
+ * Autofills a referral code into an element when someone has been referred.
+ * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
+ *
+ * @param {string} selector Element class/id
+ * @returns {void}
  */
 
 function autofill(selector) {
   // @ts-ignore -- will throw occasionally throw a null pointer exception at runtime
   widgets().autofill(selector);
 }
-/**
- * Overrides the default function that submits the user email. If you have
- * Security enabled, the email needs to be signed before it's submitted.
- *
- * @param {function} fn Callback function for the 'submit_email' event.
- * @returns {void}
- *
- * @example
- * squatch.submitEmail(function(target, widget, email) {
- *   // Sign email and generate jwt token
- *   var jwt = 'token';
- *   widget.reload(email, jwt);
- * });
+/**
+ * Overrides the default function that submits the user email. If you have
+ * Security enabled, the email needs to be signed before it's submitted.
+ *
+ * @param {function} fn Callback function for the 'submit_email' event.
+ * @returns {void}
+ *
+ * @example
+ * squatch.submitEmail(function(target, widget, email) {
+ *   // Sign email and generate jwt token
+ *   var jwt = 'token';
+ *   widget.reload(email, jwt);
+ * });
  */
 
 function submitEmail(fn) {
   // @ts-ignore -- will throw occasionally throw a null pointer exception at runtime
   widgets().submitEmail(fn);
 }
-/**
- * Manually set the _saasquatch cookie as a 1st party cookie if available as a URL parameter on the current page.
- * This runs automatically immediately when squatch-js is loaded, except when window.SaaSquatchDoNotAutoDrop is true.
- * Use this function manually if you have a single page application or custom routing that causes the `_saasquatch` URL parameter to not be set when Squatch.js loads.
+/**
+ * Manually set the _saasquatch cookie as a 1st party cookie if available as a URL parameter on the current page.
+ * This runs automatically immediately when squatch-js is loaded, except when window.SaaSquatchDoNotAutoDrop is true.
+ * Use this function manually if you have a single page application or custom routing that causes the `_saasquatch` URL parameter to not be set when Squatch.js loads.
  
- * It is safe to run this function multiple times. If the `_saasquatch` URL parameter is invalid or missing it will not clear the 1st party cookie.
+ * It is safe to run this function multiple times. If the `_saasquatch` URL parameter is invalid or missing it will not clear the 1st party cookie.
  
- *
- * @returns {void}
- *
- * @example
- * squatch.pushCookie();
+ *
+ * @returns {void}
+ *
+ * @example
+ * squatch.pushCookie();
  */
 
 function pushCookie() {
@@ -2383,7 +2053,8 @@ if (typeof document !== "undefined" && !window.SaaSquatchDoNotAutoDrop) {
 
 if (typeof document !== "undefined") asyncLoad();
 
-exports.CtaWidget = CtaWidget;
+exports.DeclarativeEmbedWidget = DeclarativeEmbedWidget;
+exports.DeclarativePopupWidget = DeclarativePopupWidget;
 exports.EmbedWidget = EmbedWidget;
 exports.PopupWidget = PopupWidget;
 exports.WidgetApi = WidgetApi;