@sprig-technologies/sprig-browser 2.14.0

package/controller/controller.js

@@ -0,0 +1,1038 @@
+/*global UserLeap, window, document, Event, localStorage, Backbone, atob*/
+// Polyfills
+import 'core-js';
+import 'regenerator-runtime/runtime';
+
+import ConflictingWidgets from '../shared/conflicting_widgets';
+import { APP_MODES, CSS_CONSTANTS } from '../shared/constants';
+import { ulFetch, killNetworkRequests, getHttpHeaders } from '../shared/network';
+import { createFrame, createContainer, removeContainerOnClose, removeContainer } from '../controller/iframe';
+import './queue';
+import eventEmitter from '../shared/eventEmitter';
+import { ulEvents, DISMISS_REASONS, SURVEY_STATE, internalEvents } from '../shared/ulEvents';
+import { calculateFrameHeight, overrideStyles } from '../shared/tool';
+import { v4 as uuidv4 } from 'uuid';
+import { delay } from '../shared/networkHelper';
+import shouldDirectEmbed from '../shared/shouldDirectEmbed';
+import {
+  MOBILE_MAX_WIDTH,
+  PAGE_URL_EVENT_NAME,
+  MOBILE_PLATFORM_HEADERS,
+  INSTALLATION_METHOD,
+} from '../shared/constants';
+
+const credentialsStorageKey = 'userleap.ids';
+const pageViewsStorageKey = 'userleap.pageviews';
+const dismissOnPageChangeEventTypes = ['popState', 'pushState', 'replaceState'];
+
+const PATH_ENV = 'environments';
+const PATH_VISITOR = 'visitors';
+const VIEW_TAG = 'ul-view-sdk-script';
+const MATCHERS_BY_TYPE = Object.freeze({
+  contains: (pattern, url) => url.includes(pattern),
+  notContains: (pattern, url) => !url.includes(pattern),
+  exactly: (pattern, url) => url === pattern,
+  notExactly: (pattern, url) => url !== pattern,
+  startsWith: (pattern, url) => url.startsWith(pattern),
+  endsWith: (pattern, url) => url.endsWith(pattern),
+  regex: (pattern, url) => {
+    return new RegExp(pattern).test(url);
+  },
+  legacy: (pattern, url) => {
+    return new RegExp(pattern, 'i').test(url);
+  },
+});
+
+function checkUrlMatch(event, url) {
+  const { matchType, pattern } = event;
+  const matcher = matchType ? MATCHERS_BY_TYPE[matchType] : MATCHERS_BY_TYPE.legacy;
+
+  return matcher(pattern, url);
+}
+
+function shouldDisplaySurveyAfterDelay(triggeringEventId, trackStartUrl) {
+  const { pageUrlEvents, interactiveEvents, dismissOnPageChange } = UserLeap._config;
+  if (!dismissOnPageChange) return true;
+
+  const urlAndInteractiveEvents = [];
+  if (pageUrlEvents && pageUrlEvents.length) urlAndInteractiveEvents.push(...pageUrlEvents);
+  if (interactiveEvents && interactiveEvents.length) urlAndInteractiveEvents.push(...interactiveEvents);
+
+  const triggeringEvent = triggeringEventId && urlAndInteractiveEvents.find((event) => event.id === triggeringEventId);
+  if (triggeringEvent) return checkUrlMatch(triggeringEvent, window.location.href);
+  return trackStartUrl === window.location.href;
+}
+
+function locationChangeHandler(event) {
+  const { pageUrlEvents, interactiveEvents, dismissOnPageChange, platform } = UserLeap._config;
+  if (platform && platform !== 'web') return; // we should clean this up during web sdk controller refactor along with the should direct embed
+  if (pageUrlEvents) UserLeap.trackPageView(window.location.href);
+  if (interactiveEvents) {
+    // need to remove old listeners bc current page may not be targeted
+    removeInteractiveEventListener();
+    addInteractiveEventListeners();
+  }
+  if (dismissOnPageChange && event && dismissOnPageChangeEventTypes.includes(event.type))
+    UserLeap('dismissActiveSurvey', DISMISS_REASONS.PAGE_CHANGE);
+}
+
+const INTERACTIVE_LISTENER_OPTIONS = { capture: true };
+
+const addInteractiveEventListeners = () => {
+  const activeEventsForUrl = UserLeap._config.interactiveEvents.filter((event) =>
+    checkUrlMatch(event, window.location.href)
+  );
+
+  const handlersForActiveEvents = activeEventsForUrl.map((i) => {
+    const { name, properties } = i;
+    const { selector, innerText } = properties;
+    return selector
+      ? (e) => !!e.target.closest(selector) && UserLeap('track', name)
+      : (e) => e.target.innerText === innerText && UserLeap('track', name);
+  });
+
+  const combinedHandler = (e) => handlersForActiveEvents.forEach((h) => h(e));
+
+  UserLeap._config.interactiveEventsHandler = combinedHandler;
+  window.addEventListener('click', combinedHandler, INTERACTIVE_LISTENER_OPTIONS);
+};
+
+const removeInteractiveEventListener = () => {
+  window.removeEventListener('click', UserLeap._config.interactiveEventsHandler, INTERACTIVE_LISTENER_OPTIONS);
+  delete UserLeap._config.interactiveEventsHandler;
+};
+
+function registerEventListeners() {
+  ['hashchange', 'popstate'].forEach((evt) => window.addEventListener(evt, locationChangeHandler, true));
+}
+
+function unregisterEventListeners() {
+  ['hashchange', 'popstate'].forEach((evt) => window.removeEventListener(evt, locationChangeHandler, true));
+  if (UserLeap._config.interactiveEvents) removeInteractiveEventListener();
+}
+
+function apiUrl(version, fillPaths, trailing) {
+  const components = [UserLeap._API_URL, 'sdk', version];
+  if (fillPaths) {
+    fillPaths.forEach((p) => {
+      components.push(p);
+      if (p === PATH_ENV) components.push(UserLeap.envId);
+      else if (p === PATH_VISITOR) components.push(UserLeap.widgetGetVID());
+    });
+  }
+  if (trailing) components.push(trailing);
+  return components.join('/');
+}
+
+/**
+ * Construct the get questions URL
+ * @param  {String} visitorId
+ * @param  {Object} config
+ * @param  {Object} options
+ * @param  {Number} options.surveyId Active SurveyId for the Environment display, from displaySurvey
+ * @param  {Number} options.surveyTemplateId SurveyTemplateId to display, from previewSurvey / Template Previews
+ * @return {String}
+ */
+function getQuestionURL(vid, options) {
+  let url = apiUrl(1, [PATH_ENV], 'questions?');
+  if (vid != null) url += `&vid=${vid}`;
+  if (options) {
+    if (options.surveyId) url += `&surveyid=${options.surveyId}`;
+    if (options.surveyTemplateId) url += `&surveytemplateid=${options.surveyTemplateId}`;
+  }
+  return url;
+}
+
+function isLocalStorageAvailable() {
+  try {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('is_available', 'yes');
+      if (localStorage.getItem('is_available') === 'yes') {
+        localStorage.removeItem('is_available');
+        return true;
+      }
+    }
+  } catch (e) {
+    return false;
+  }
+  return false;
+}
+
+function widgetGetLocalStorageCredentialsValue(field) {
+  if (!UserLeap.localStorageAvailable) return null;
+  const savedIdsJson = localStorage.getItem(credentialsStorageKey);
+  if (savedIdsJson) {
+    try {
+      const savedIds = JSON.parse(savedIdsJson);
+      const ids = savedIds[UserLeap.envId];
+      return (ids && ids[field]) || null;
+    } catch (err) {
+      err.stack = savedIdsJson;
+      UserLeap.reportError('Failed to parse local storage credentials', err);
+      console.warn(`[Sprig] (ERR-427) Failed to lookup saved ids`, err);
+    }
+  }
+  return null;
+}
+
+function widgetSetLocalStorageCredentialsValue(field, value) {
+  if (!UserLeap.localStorageAvailable) return;
+  const savedIdsJson = localStorage.getItem(credentialsStorageKey);
+  let savedIds = {}; //default value
+  if (savedIdsJson) {
+    try {
+      savedIds = JSON.parse(savedIdsJson);
+    } catch (err) {
+      err.stack = savedIdsJson;
+      UserLeap.reportError('Failed to parse local storage credentials', err);
+      console.warn(`[Sprig] (ERR-427) Failed to lookup saved ids`, err);
+    }
+  }
+  let ids = savedIds[UserLeap.envId];
+  if (ids) {
+    ids[field] = value;
+  } else {
+    ids = { [field]: value };
+  }
+  savedIds[UserLeap.envId] = ids;
+  try {
+    localStorage.setItem(credentialsStorageKey, JSON.stringify(savedIds));
+  } catch (err) {
+    console.warn(`[Sprig] (ERR-426) Unable to write to Local Storage:: ${err.message}`);
+  }
+}
+
+function generateVisitorId() {
+  if (window.previewMode) return;
+  UserLeap.visitorId = uuidv4();
+  widgetSetLocalStorageCredentialsValue('vid', UserLeap.visitorId);
+  eventEmitter.emit(ulEvents.VISITOR_ID_UPDATED, { visitorId: UserLeap.visitorId });
+}
+
+UserLeap.UPDATES = ulEvents;
+
+UserLeap.widgetGetVID = function() {
+  return window.previewMode ? 0 : UserLeap.visitorId;
+};
+
+UserLeap.trackPageView = function(location) {
+  if (!UserLeap.localStorageAvailable) return;
+  if (location.endsWith('mock_snippet.html')) {
+    return;
+  }
+  //filter out pages that aren't being tracked
+  const pageUrlEvents = UserLeap._config.pageUrlEvents;
+  if (pageUrlEvents && pageUrlEvents.length) {
+    let shouldTrackPage = false;
+    for (let i = 0; i < pageUrlEvents.length; i++) {
+      shouldTrackPage = checkUrlMatch(pageUrlEvents[i], location);
+
+      if (shouldTrackPage) {
+        break;
+      }
+    }
+    if (!shouldTrackPage) return;
+  }
+  if (UserLeap.debugMode) console.log('[DEBUG] Sprig trackPageView', arguments);
+  //Seconds that must elapse for the same location to be considered a new page view
+  const sameLocationThreshold = 10;
+  //Seconds that must elapse before considering a location change to be valid
+  //this exists primarily to stop redirects from being counted several times
+  const redirectThreshold = 1;
+  let pageViews = [];
+
+  const payload = {
+    viewedAt: Date.now(),
+    location: location,
+  };
+  const pageViewsStorage = localStorage.getItem(pageViewsStorageKey);
+  try {
+    if (pageViewsStorage) {
+      //read existing views from local storage
+      pageViews = JSON.parse(pageViewsStorage);
+      if (pageViews.length > 0) {
+        const latestPageView = pageViews[pageViews.length - 1];
+        const secondsElapsed = (Date.now() - latestPageView.viewedAt) / 1000;
+
+        //check location and time elapsed to dedupe and avoid overcounting on redirects
+        if (
+          (latestPageView.location != location && secondsElapsed > redirectThreshold) ||
+          secondsElapsed > sameLocationThreshold
+        ) {
+          UserLeap._queue.push(['track', PAGE_URL_EVENT_NAME, { url: location }]);
+          pageViews.push(payload);
+        }
+      }
+    } else {
+      UserLeap._queue.push(['track', PAGE_URL_EVENT_NAME, { url: location }]);
+      pageViews.push(payload);
+    }
+
+    // Only keep the last 5 page views
+    if (pageViews.length > 5) {
+      pageViews.splice(0, pageViews.length - 5);
+    }
+
+    try {
+      localStorage.setItem(pageViewsStorageKey, JSON.stringify(pageViews));
+    } catch (err) {
+      console.warn(`[Sprig] Unable to write to Local Storage: ${err.message}`);
+    }
+  } catch (err) {
+    err.stack = pageViewsStorage;
+    console.warn(`[Sprig] (ERR-425) Failed to update page views in local storage`);
+    UserLeap.reportError('trackPageView', err);
+  }
+};
+
+function bindTrackingEvents() {
+  const historyRef = 'Backbone' in window && window.Backbone && Backbone.history ? Backbone.history : window.history;
+
+  historyRef.pushState = ((f) =>
+    function pushState() {
+      const ret = f.apply(this, arguments);
+      const event = new Event('pushState');
+      window.dispatchEvent(event);
+      locationChangeHandler(event);
+      return ret;
+    })(historyRef.pushState);
+
+  historyRef.replaceState = ((f) =>
+    function replaceState() {
+      const ret = f.apply(this, arguments);
+      const event = new Event('replaceState');
+      window.dispatchEvent(event);
+      locationChangeHandler(event);
+      return ret;
+    })(historyRef.replaceState);
+  registerEventListeners();
+}
+
+UserLeap.getQuestions = async function(options, submitAnswers) {
+  const visitorId = UserLeap.widgetGetVID();
+  if (options && !submitAnswers) {
+    UserLeap._config.mode = APP_MODES.test;
+  }
+  const response = await authenticatedFetch(getQuestionURL(visitorId, options), {}, 0, true);
+  if (!response.ok) {
+    if (response.reportError) {
+      console.warn(`[Sprig] (ERR-414) Failed to request questions from the server`, response.error);
+      UserLeap.reportError('getQuestions', response.error);
+    }
+    return { success: false, surveyState: SURVEY_STATE.NO_SURVEY };
+  }
+  response.json.delay && (await delay(response.json.delay));
+  return UserLeap.displayQuestions(response.json);
+};
+
+UserLeap.displayQuestions = function(responseJson) {
+  const { vid, uuid, questions, surveyId, context, locale, responseGroupUid, endCard, productConfig } = responseJson;
+  const experimentFlags = responseJson.experimentFlags || {};
+  const headers = getHttpHeaders(UserLeap);
+  const isMobileWebview = calculateIsMobileWebview(headers);
+  const useMobileStyling = calculateUseMobileStyling(headers);
+  // Unrender if survey, vid or questions are undefined or empty
+  if (vid == null || !questions || !questions.length) {
+    return { success: false, message: '[Sprig] no survey found', surveyState: SURVEY_STATE.NO_SURVEY };
+  }
+  // Are we showing a Survey already?
+  if (UserLeap.container) {
+    const message = `[Sprig] (ERR-409) Found an existing Survey container, aborting rendering of this survey`;
+    console.warn(message);
+    return { success: false, message, surveyState: SURVEY_STATE.NO_SURVEY };
+  }
+  if (vid !== UserLeap.visitorId && uuid !== UserLeap.visitorId && !window.previewMode) {
+    const message = 'Attempted to display survey to a different visitor';
+    UserLeap.reportError('DisplaySurvey', new Error(message));
+    return { success: false, message, surveyState: SURVEY_STATE.NO_SURVEY };
+  }
+
+  ConflictingWidgets.disable();
+
+  let frameId, contentWinDocHead, contentWindow, hasOverlay;
+  const verifyViewVersion = (data) => {
+    const { [internalEvents.data.VIEW_VERSION]: viewSdkVersion } = data;
+    if (viewSdkVersion !== headers['x-ul-sdk-version']) {
+      removeContainer();
+    }
+    eventEmitter.removeListener(internalEvents.name.VERIFY_VIEW_VERSION, verifyViewVersion);
+  };
+  eventEmitter.subscribe(internalEvents.name.VERIFY_VIEW_VERSION, verifyViewVersion);
+
+  if (shouldDirectEmbed(headers)) {
+    frameId = 'ul-survey-frame';
+    contentWinDocHead = document.head;
+    contentWindow = window;
+    hasOverlay = false;
+    if (isMobileWebview) {
+      createContainer();
+      const mobileFrame = document.createElement('div');
+      mobileFrame.id = frameId;
+      UserLeap.container.appendChild(mobileFrame);
+      removeContainerOnClose();
+      eventEmitter.emit(ulEvents.SURVEY_LIFE_CYCLE, { state: 'presented' });
+      eventEmitter.emit(ulEvents.SURVEY_PRESENTED, { name: ulEvents.SURVEY_PRESENTED });
+    }
+  } else {
+    ({ frameId, contentWinDocHead, contentWindow, hasOverlay } = createFrame(productConfig, useMobileStyling));
+  }
+
+  UserLeap.frameId = frameId;
+  UserLeap.useMobileStyling = useMobileStyling;
+  const configureExitOnOverlayClick = (exit) => {
+    eventEmitter.subscribe(ulEvents.CLOSE_SURVEY_ON_OVERLAY_CLICK, exit);
+  };
+  // Attach questions response to frame bootstrap config
+  const config = Object.assign(
+    {
+      frame: frameId,
+      envId: UserLeap.envId,
+      surveyId,
+      userId: uuid,
+      cards: questions,
+      context,
+      locale,
+      fontFamily: UserLeap.fontFamily,
+      fontFamilyURL: UserLeap.fontFamilyURL,
+      apiURL: UserLeap._API_URL,
+      responseGroupUid,
+      headers,
+      endCard,
+      useMobileStyling,
+      mobilePlatform: UserLeap.mobilePlatform,
+      mobileSDKVersion: UserLeap.mobileSDKVersion,
+      experimentFlags,
+      configureExitOnOverlayClick,
+      eventEmitter,
+      ulEvents,
+    },
+    UserLeap._config
+  );
+  if (UserLeap.customStyles) {
+    config.customStyles = UserLeap.customStyles;
+  }
+  contentWindow.__cfg = config;
+
+  function makeSafeScriptTag() {
+    const scriptTag = document.createElement('script');
+    if (UserLeap.nonce) {
+      scriptTag.setAttribute('nonce', UserLeap.nonce);
+    }
+    scriptTag.id = VIEW_TAG;
+    return scriptTag;
+  }
+  const frameSrc = UserLeap.viewSDKURL ? UserLeap.viewSDKURL : config.path;
+
+  const existingScript = document.getElementById(VIEW_TAG);
+  existingScript && existingScript.remove();
+  // Inject frame application script
+  const frameScript = makeSafeScriptTag();
+
+  if (hasOverlay) {
+    frameScript.addEventListener('load', () => {
+      if (UserLeap.container) Object.assign(UserLeap.container.style, { display: 'flex' });
+    });
+  }
+
+  if (config.installationMethod === INSTALLATION_METHOD.NPM) {
+    const encodedViewJs = require('./encodedViewJs');
+    frameScript.textContent = atob(encodedViewJs.default);
+  } else {
+    frameScript.src = frameSrc;
+    contentWindow.addEventListener(
+      'error',
+      (e) => {
+        if (e.target.nodeName === 'SCRIPT' && e.target.src === frameSrc) {
+          UserLeap.reportError('loadFrameScript', new Error(`Frame script failed to load`));
+        }
+      },
+      {
+        capture: true,
+        once: true,
+      }
+    );
+  }
+  contentWinDocHead.appendChild(frameScript);
+  return { success: true, surveyState: SURVEY_STATE.READY };
+};
+
+function calculateUseMobileStyling(headers) {
+  if (UserLeap.useMobileStyling !== undefined) return UserLeap.useMobileStyling;
+
+  // handle default-0 width iframes, if UserLeap.windowDimensions.width is not specified, with desktop styling
+  const windowWidth = (UserLeap.windowDimensions && UserLeap.windowDimensions.width) || document.body.clientWidth;
+  return calculateIsMobileWebview(headers) || (windowWidth > 10 && windowWidth < MOBILE_MAX_WIDTH);
+}
+
+function calculateIsMobileWebview(headers) {
+  return MOBILE_PLATFORM_HEADERS.includes(headers['userleap-platform']);
+}
+
+function shuffleInteractiveEvents(events) {
+  // All qualifying events will be sent when a user clicks the selected target element,
+  // but we shuffle them here so that we don't bias towards always sending any particular
+  // one first.
+  let currentIndex = events.length;
+  while (currentIndex) {
+    const randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+    const tmp = events[currentIndex];
+    events[currentIndex] = events[randomIndex];
+    events[randomIndex] = tmp;
+  }
+}
+
+/**
+ * Gather identifier data, retrieve questions, and render widget
+ * @param  {Object} config [description]
+ */
+UserLeap.widgetInitialize = function(config) {
+  if (!config) return;
+  UserLeap._config = config;
+  if (config.mute) {
+    // Userleap.mute isn't defined yet
+    UserLeap._queue.pause();
+  }
+
+  const { interactiveEvents, pageUrlEvents, dismissOnPageChange } = config;
+  if (interactiveEvents) shuffleInteractiveEvents(interactiveEvents);
+
+  if (interactiveEvents || pageUrlEvents || dismissOnPageChange) {
+    bindTrackingEvents();
+    locationChangeHandler();
+  }
+};
+
+async function authenticatedFetch(url, options, attempt = 0, shouldDropOnRateLimit = false) {
+  options.headers = Object.assign(getHttpHeaders(UserLeap), options.headers);
+  const results = await ulFetch(url, options, attempt, shouldDropOnRateLimit);
+  if (results.ok) {
+    const authHeader = results.headers.get('Authorization');
+    const tokenPieces = authHeader ? authHeader.split(' ') : undefined;
+    const headerToken = tokenPieces && tokenPieces.length === 2 ? tokenPieces[1] : undefined;
+    const visitorId = results.headers.get('x-ul-visitor-id');
+    // reset the token and visitor id when they are valid and if either one of them is different from old values
+    if (headerToken && visitorId && (visitorId !== UserLeap.visitorId || UserLeap.token !== headerToken)) {
+      widgetSetLocalStorageCredentialsValue('token', headerToken);
+      widgetSetLocalStorageCredentialsValue('vid', visitorId);
+      eventEmitter.emit(ulEvents.VISITOR_ID_UPDATED, { visitorId });
+      UserLeap.token = headerToken;
+      UserLeap.visitorId = visitorId;
+    }
+  }
+  return results;
+}
+
+/**
+ * Hydrates the window.userLeap object with test mode
+ * specific functions
+ * @param  {Object} config
+ */
+const __enableUserLeapAPIActions = function(config) {
+  if (!window.UserLeap) {
+    return;
+  }
+
+  const identifyAndTrackHelper = async (payload) => {
+    const { userId, anonymousId, metadata = {} } = payload;
+    let { eventName } = payload;
+    if (UserLeap.debugMode && eventName !== PAGE_URL_EVENT_NAME) console.log('[DEBUG] Sprig track', arguments);
+    if (config.mode === 'test') {
+      return;
+    }
+    if (!eventName || eventName.trim().length === 0) {
+      eventName = eventName ? String(eventName) : '';
+      const message = `[Sprig] - Invalid event name ` + eventName;
+      console.warn(message);
+      return { success: false, message, surveyState: SURVEY_STATE.NO_SURVEY };
+    }
+    const trackStartUrl = window.location.href;
+    if (!metadata.url) metadata.url = trackStartUrl;
+
+    // set userId and/or anonymousId locally.
+    // they will be included in request header.
+    if (userId) UserLeap.userId = userId;
+    if (anonymousId) UserLeap.partnerAnonymousId = anonymousId;
+
+    const result = await authenticatedFetch(
+      apiUrl(1, [PATH_VISITOR], 'events'),
+      {
+        body: JSON.stringify({
+          event: eventName,
+          metadata,
+        }),
+        method: 'POST',
+      },
+      0,
+      true
+    );
+
+    if (!result.ok) {
+      const errorMessage = `[Sprig] (ERR-421) Failed to track event`;
+      if (result.reportError) {
+        console.warn(errorMessage, result.error);
+        UserLeap.reportError('track', result.error);
+      }
+      // if setting user/anon id fails, queue is paused forever (unless client invokes UserLeap("unmute"))
+      if (userId || anonymousId) killNetworkRequests('Disabled: Failed to set userId or anonymousId');
+      return { success: false, message: errorMessage, error: result.error, surveyState: SURVEY_STATE.NO_SURVEY };
+    }
+    if (userId) widgetSetLocalStorageCredentialsValue('uid', userId);
+    if (anonymousId) widgetSetLocalStorageCredentialsValue('aid', anonymousId);
+
+    const responseBody = result.json;
+    responseBody.delay && (await delay(responseBody.delay));
+    if (shouldDisplaySurveyAfterDelay(responseBody.eventId, trackStartUrl)) {
+      return UserLeap.displayQuestions(responseBody);
+    } else {
+      return {
+        success: false,
+        message: 'Study should not be displayed after page navigation',
+        surveyState: SURVEY_STATE.NO_SURVEY,
+      };
+    }
+  };
+
+  const apiActions = {
+    // Triggers displaying specified survey. Does submit answers!
+    async displaySurvey(surveyId) {
+      UserLeap('dismissActiveSurvey', DISMISS_REASONS.OVERRIDE);
+      return UserLeap.getQuestions({ surveyId }, true);
+    },
+    // Triggers displaying specified survey template. Does not submit answers
+    previewSurvey(surveyTemplateId) {
+      UserLeap('dismissActiveSurvey', DISMISS_REASONS.OVERRIDE);
+      UserLeap.getQuestions({ surveyTemplateId }, false);
+    },
+    // Triggers displaying specified survey. Does not submit answers
+    reviewSurvey(surveyId) {
+      UserLeap('dismissActiveSurvey', DISMISS_REASONS.OVERRIDE);
+      UserLeap.getQuestions({ surveyId }, false);
+    },
+    mute() {
+      UserLeap._queue.pause();
+    },
+    unmute() {
+      UserLeap._queue.unpause();
+    },
+    setVisitorToken() {
+      console.warn('[UserLeap] setVisitorToken is deprecated.');
+    },
+    dismissActiveSurvey(initiator = DISMISS_REASONS.API) {
+      eventEmitter.emit(ulEvents.SURVEY_WILL_CLOSE, { initiator });
+    },
+    // Set an arbitrary attribute on the visitor
+    async setAttribute(attribute, value) {
+      if (!attribute || !value) return;
+      return this.setAttributes({ [attribute]: value });
+    },
+    async setAttributes(attributes) {
+      if (UserLeap.debugMode) console.log('[DEBUG] Sprig setAttributes', arguments);
+      if (config.mode === 'test') return;
+      if (attributes === null || attributes === undefined || Object.keys(attributes).length === 0) {
+        const message = `[Sprig] - Disregarding empty attributes provided`;
+        console.warn(message);
+        return { success: false, message };
+      }
+      const result = await authenticatedFetch(apiUrl(1, [PATH_ENV, PATH_VISITOR], 'attributes'), {
+        body: JSON.stringify(attributes),
+        method: 'PUT',
+      });
+      if (!result.ok && result.reportError) {
+        console.warn(`[Sprig] (ERR-432) Set attributes failed`, result.error);
+        UserLeap.reportError('setAttributes', result.error);
+      }
+      return { success: !!result.ok };
+    },
+    // identifies and sets attributes on visitor; see sprig-browser/index.js for documentation
+    async identifyAndSetAttributes(payload) {
+      if (UserLeap.debugMode) console.log('[DEBUG] Sprig identifyAndSetAttributes', arguments);
+      if (config.mode === 'test') return;
+      if (
+        payload === null ||
+        typeof payload !== 'object' ||
+        !(payload.userId || payload.anonymousId || payload.attributes)
+      ) {
+        const message = `[Sprig] - Disregarding empty payload provided`;
+        console.warn(message);
+        return { success: false, message };
+      }
+      const { userId, anonymousId, attributes } = payload;
+
+      if (
+        // no attributes to set, and the provided userId and/or anonymousId are already set locally; nothing to do.
+        !attributes &&
+        (!userId || UserLeap.userId === userId) &&
+        (!anonymousId || UserLeap.partnerAnonymousId === anonymousId)
+      ) {
+        return { success: true };
+      }
+
+      const putUserBody = {};
+      // set userId and/or anonymousId locally, and in potential request body if there are no attributes.
+      // they will be included in request header and used in authentication.
+      if (userId) putUserBody.userId = UserLeap.userId = userId;
+      if (anonymousId) putUserBody.partnerAnonymousId = UserLeap.partnerAnonymousId = anonymousId;
+
+      let result;
+      if (attributes) {
+        result = await authenticatedFetch(apiUrl(1, [PATH_ENV, PATH_VISITOR], 'attributes'), {
+          body: JSON.stringify(attributes),
+          method: 'PUT',
+        });
+        if (!result.ok && result.reportError) {
+          console.warn(`[Sprig] (ERR-432) identifyAndSetAttributes failed`, result.error);
+          UserLeap.reportError('identifyAndSetAttributes', result.error);
+        }
+      } else {
+        result = await authenticatedFetch(apiUrl(1, [PATH_ENV, PATH_VISITOR]), {
+          body: JSON.stringify(putUserBody),
+          method: 'PUT',
+        });
+      }
+
+      if (userId || anonymousId) {
+        if (result.ok) {
+          if (userId) widgetSetLocalStorageCredentialsValue('uid', userId);
+          if (anonymousId) widgetSetLocalStorageCredentialsValue('aid', anonymousId);
+        } else {
+          // if setting user/anon id fails, queue is paused forever (unless client invokes UserLeap("unmute"))
+          killNetworkRequests('Disabled: Failed to set userId or anonymousId');
+        }
+      }
+
+      return { success: !!result.ok };
+    },
+    async removeAttributes(attributes) {
+      if (UserLeap.debugMode) console.log('[DEBUG] Sprig removeAttributes', arguments);
+      if (config.mode === 'test') return;
+      if (attributes === null || attributes === undefined || attributes.length === 0) {
+        const message = `[Sprig] - Disregarding empty attributes provided`;
+        console.warn(message);
+        return { success: false, message };
+      }
+      const result = await authenticatedFetch(apiUrl(1, [PATH_ENV, PATH_VISITOR], 'attributes'), {
+        body: JSON.stringify({ delete: attributes }),
+        method: 'DELETE',
+      });
+      if (!result.ok && result.reportError) {
+        console.warn(`[Sprig] (ERR-433) Remove attributes failed`, result.error);
+        UserLeap.reportError('removeAttributes', result.error);
+      }
+      return { success: !!result.ok };
+    },
+    async addSurveyListener(listener) {
+      eventEmitter.subscribe(ulEvents.SURVEY_LIFE_CYCLE, listener);
+    },
+    async removeSurveyListener(listener) {
+      eventEmitter.removeListener(ulEvents.SURVEY_LIFE_CYCLE, listener);
+    },
+    async addListener(event, listener) {
+      eventEmitter.subscribe(event, listener);
+    },
+    async removeListener(event, listener) {
+      eventEmitter.removeListener(event, listener);
+    },
+    async removeAllListeners() {
+      eventEmitter.removeAllListeners();
+    },
+    //Deprecated function name
+    setVisitorAttribute(attribute, value) {
+      console.warn('[Sprig] setVisitorAttribute is deprecated. Please use setAttribute');
+      return apiActions.setAttribute(attribute, value);
+    },
+    // Attach an email address to visitor
+    async setEmail(email) {
+      return apiActions.setAttribute('!email', email);
+    },
+    // Deprecated function name
+    async setVisitorEmail(email) {
+      console.warn('[Sprig] setVisitorEmail is deprecated. Please use setEmail');
+      return apiActions.setEmail(email);
+    },
+    /**
+     * Attach a user id to the visitor
+     */
+    async setUserId(userId) {
+      if (UserLeap.debugMode) console.log('[DEBUG] Sprig setUserId', arguments);
+      if (userId === null || userId === undefined) {
+        const message = `[Sprig] - Invalid userId ${userId}`;
+        console.warn(message);
+        return { success: false, message };
+      }
+      if (config.mode === 'test' || userId === UserLeap.userId) {
+        return;
+      }
+
+      UserLeap.userId = userId;
+      const result = await authenticatedFetch(apiUrl(1, [PATH_ENV, PATH_VISITOR]), {
+        body: JSON.stringify({
+          userId,
+        }),
+        method: 'PUT',
+      });
+      if (!result.ok) {
+        //if setUserId fails, queue is paused forever (unless client invokes UserLeap("unmute"))
+        if (result.reportError) {
+          console.warn(`[Sprig] (ERR-420) Failed to set user id`, result.error);
+          UserLeap.reportError('setUserId', result.error);
+        }
+        killNetworkRequests('Disabled: Failed to set userId');
+        return;
+      }
+      widgetSetLocalStorageCredentialsValue('uid', userId);
+    },
+
+    /**
+     * Set a partner anonymous id for future requests -- to be deprecated, never documented.
+     */
+    async setPartnerAnonymousId(partnerAnonymousId) {
+      if (UserLeap.debugMode) console.log('[DEBUG] Sprig setPartnerAnonymousId', arguments);
+      if (partnerAnonymousId === null || partnerAnonymousId === undefined) {
+        const message = `[Sprig] - Invalid partnerAnonymousId ${partnerAnonymousId}`;
+        console.warn(message);
+        return { success: false, message };
+      }
+
+      UserLeap.partnerAnonymousId = partnerAnonymousId;
+      return { success: true };
+    },
+
+    /**
+     * track an event to show survey if eligible
+     * @param {*} eventName
+     * @param {*} metadata
+     * @returns
+     */
+    async track(eventName, metadata = {}) {
+      return await identifyAndTrackHelper({ eventName, metadata });
+    },
+    // identifies and tracks event on visitor; see sprig-browser/index.js for documentation
+    async identifyAndTrack(payload) {
+      return await identifyAndTrackHelper(payload);
+    },
+    applyStyles(styleString) {
+      UserLeap.customStyles = styleString;
+      if (UserLeap.container) {
+        // survey already present override the styles
+        // this will only work for web sdk as when sdk is direct embedded there would not be a frame
+        const surveyDocument = UserLeap.container.children[0].contentDocument;
+        const customStyle = surveyDocument.getElementById(CSS_CONSTANTS.CUSTOM_STYLE_TAG_ID);
+        customStyle ? (customStyle.textContent = styleString) : overrideStyles(surveyDocument, styleString);
+      }
+    },
+    /**
+      set viewport dimensions, in int pixels. necessary if Sprig is installed in an iframe/component defaulting to 0 width and height.
+      * @param {Number} width
+      * @param {Number} height
+    */
+    setWindowDimensions(width, height) {
+      const parsedWidth = parseInt(width, 10);
+      const parsedHeight = parseInt(height, 10);
+      UserLeap.windowDimensions = {
+        width: !Number.isNaN(parsedWidth) && parsedWidth,
+        height: !Number.isNaN(parsedHeight) && parsedHeight,
+      };
+      if (!UserLeap.frameId) return; // nothing to do if there's no survey frame
+      const iframe = document.getElementById(UserLeap.frameId);
+      if (!iframe) return;
+      if (UserLeap.useMobileStyling) {
+        // desktop style is not repsonsive, but still emit SURVEY_DIMENSIONS
+        if (UserLeap.windowDimensions.width) iframe.style.width = `${UserLeap.windowDimensions.width}px`;
+        if (UserLeap.windowDimensions.height) iframe.style.maxHeight = `${UserLeap.windowDimensions.height - 20}px`;
+        iframe.style.height = calculateFrameHeight(iframe.contentDocument);
+      }
+      eventEmitter.emit(ulEvents.SURVEY_DIMENSIONS, {
+        name: ulEvents.SURVEY_DIMENSIONS,
+        contentFrameWidth: iframe.clientWidth,
+        contentFrameHeight: iframe.clientHeight,
+      });
+    },
+    teardown() {
+      unregisterEventListeners();
+      window.UserLeap('dismissActiveSurvey', DISMISS_REASONS.API);
+      delete window.UserLeap;
+      delete window.Sprig;
+      delete window._Sprig;
+    },
+  };
+
+  Object.assign(window.UserLeap, apiActions);
+};
+
+/**
+ * Pulls down presentation config settings from server and
+ * applies them to supplied config dict
+ */
+UserLeap.applyRemoteConfig = async function(config) {
+  const headers = UserLeap.mobileHeadersJSON ? JSON.parse(UserLeap.mobileHeadersJSON) : {};
+  let response = await ulFetch(apiUrl(1, [PATH_ENV], 'config'), { headers });
+
+  const cspErrorName = 'TypeError';
+  UserLeap.error = response.error;
+  if (!response.ok && response.error && response.error.name === cspErrorName) {
+    UserLeap._API_URL = 'https://api.userleap.com';
+    UserLeap.reportError('sprigDomainRequest', response.error);
+    response = await ulFetch(apiUrl(1, [PATH_ENV], 'config'), { headers });
+  }
+
+  if (!response.ok) {
+    if (response.reportError) {
+      console.warn(`[Sprig] (ERR-422) Failed to load configuration`, response.error);
+      UserLeap.reportError('applyRemoteConfig', response.error);
+    }
+    killNetworkRequests('Disabled: failed to fetch configuration');
+    return config;
+  }
+  const properties = response.json;
+  if (properties && properties.disabled) {
+    killNetworkRequests(`Disabled: ${properties.disabled}`);
+    return;
+  }
+  const newConfig = Object.assign({}, config, properties);
+  return newConfig;
+};
+
+UserLeap.reportError = async function(action, err) {
+  const mode = window.__cfg && window.__cfg.mode;
+  const fetchFreshIfNotSet = false;
+  const vid = UserLeap.widgetGetVID(fetchFreshIfNotSet);
+  const envId = UserLeap.envId;
+  const pde = window.document.documentElement;
+  const meta = {
+    mode,
+    screenWidth: window.screen.width,
+    screenHeight: window.screen.height,
+    clientWidth: pde.clientWidth,
+    clientHeight: pde.clientHeight,
+    location: window.location.href,
+    language: window.navigator.language,
+  };
+  const body = {
+    action,
+    err: { message: err.message, stack: err.stack },
+    meta,
+    vid,
+    envId,
+  };
+  const result = await authenticatedFetch(
+    apiUrl(1, null, 'errors'),
+    {
+      method: 'POST',
+      headers: { 'x-ul-error': window.btoa(`userleap-${Date.now()}-error`) },
+      body: JSON.stringify(body),
+    },
+    0,
+    true
+  );
+  if (!result.ok) {
+    console.warn(`[Sprig] (ERR-444) Failed to report error to API`, err);
+  }
+};
+
+UserLeap.logoutUser = function() {
+  if (UserLeap.debugMode) console.log('[DEBUG] Sprig logout');
+  //clear in-memory
+  UserLeap.visitorId = null;
+  UserLeap.userId = null;
+  UserLeap.partnerAnonymousId = null;
+  UserLeap.token = null;
+  //clear local storage
+  if (UserLeap.localStorageAvailable) {
+    localStorage.removeItem(credentialsStorageKey);
+    localStorage.removeItem(pageViewsStorageKey);
+  }
+  /**
+   * If it's paused, we're not going to wait for it to unpause to replay
+   * the queued items because it may replay it with a different visitorId
+   */
+  if (UserLeap._queue.isPaused()) UserLeap._queue.empty();
+  generateVisitorId();
+  UserLeap._queue.unpause();
+};
+
+/**
+ * Initialize frame and bootstrap data
+ * @param {Object} config this is included in the compilation step (points to the default viewSDKURL)
+ * @param {String} config.envId Environment Id
+ * @param {String} config.path Frame script url
+ * @param {String} [config.border] Border color
+ */
+export default function sprigInitializer(config = {}) {
+  async function load() {
+    if (UserLeap.loaded) return;
+    UserLeap.loaded = true;
+    //combine compile-provided config and installation-snippet config
+    UserLeap._config = Object.assign({}, config, UserLeap.config);
+    //backwards compat
+    if (UserLeap._config && typeof UserLeap._config === 'object') {
+      for (const attr in UserLeap._config) {
+        UserLeap[attr] = UserLeap._config[attr];
+      }
+    }
+    //backwards compatibility for old installation snippet which set appId instead of envId
+    if (!UserLeap.envId) {
+      if (UserLeap.appId) {
+        UserLeap.envId = UserLeap.appId;
+      } else {
+        throw new Error('Missing Environment id');
+      }
+    }
+    if (UserLeap.debugMode) console.log('[DEBUG] Sprig debug mode enabled');
+    const localStorageAvailable = isLocalStorageAvailable();
+    UserLeap.localStorageAvailable = localStorageAvailable;
+    const sampleRate = UserLeap.sampleRate;
+    if (sampleRate) {
+      if (!localStorageAvailable) {
+        if (UserLeap.debugMode) console.log('[DEBUG] Sprig cannot sample users without localStorage permissions');
+      } else {
+        let sampled = widgetGetLocalStorageCredentialsValue('sampled');
+        if (sampled === null) {
+          sampled = Math.random() < sampleRate;
+          widgetSetLocalStorageCredentialsValue('sampled', sampled);
+        }
+        if (!sampled) return;
+      }
+    } else if (localStorageAvailable) {
+      //if customer removed sampleRate config, need to remove from localStorage
+      const sampled = widgetGetLocalStorageCredentialsValue('sampled');
+      if (sampled !== null) {
+        widgetSetLocalStorageCredentialsValue('sampled', null);
+      }
+    }
+    if (!UserLeap._API_URL) UserLeap._API_URL = 'https://api.sprig.com';
+    //make a copy of existing queue, we will replay this after configuring
+    //Note: UserLeap._queue is an array at this point (defined in installation snippet)
+    const queueItems = [...UserLeap._queue];
+    //converts [] -> Queue()
+    UserLeap._queue = new UserLeap.Queue(UserLeap, []);
+    UserLeap._queue.pause();
+    for (let i = 0; i < queueItems.length; i++) {
+      UserLeap._queue.push(queueItems[i]);
+    }
+
+    const cachedToken = widgetGetLocalStorageCredentialsValue('token');
+    if (cachedToken) {
+      UserLeap.token = cachedToken;
+      UserLeap.visitorId = widgetGetLocalStorageCredentialsValue('vid');
+      UserLeap.userId = widgetGetLocalStorageCredentialsValue('uid');
+      UserLeap.partnerAnonymousId = widgetGetLocalStorageCredentialsValue('aid');
+    } else {
+      if (UserLeap.localStorageAvailable) localStorage.removeItem(credentialsStorageKey);
+      generateVisitorId();
+    }
+    const remoteConfig = await UserLeap.applyRemoteConfig(config);
+    __enableUserLeapAPIActions(remoteConfig);
+    await UserLeap.widgetInitialize(remoteConfig);
+    UserLeap._queue.unpause();
+    eventEmitter.emit(ulEvents.SDK_READY);
+    eventEmitter.emit(ulEvents.VISITOR_ID_UPDATED, { visitorId: UserLeap.visitorId });
+  }
+  if (document.readyState === 'complete') {
+    load();
+  } else if (window.attachEvent) {
+    window.attachEvent('onload', load);
+  } else {
+    window.addEventListener('load', load, false);
+  }
+}