feat: Add transferableUrlParameters option to the embed API

Author: supertinou

demo/popup-api.html

@@ -134,17 +134,17 @@
       window.addEventListener('DOMContentLoaded', function () {
         document.getElementById('btn-popup').onclick = function(e) {
           e.preventDefault()
-          makeMockPopup({mode: 'popup'}).open()
+          makeMockPopup({mode: 'popup', transferableUrlParameters: ['utm_source']}).open()
         }
 
         document.getElementById('btn-drawer_left').onclick = function(e) {
           e.preventDefault()
-          makeMockPopup({mode: 'drawer_left'}).open()
+          makeMockPopup({mode: 'drawer_left', transferableUrlParameters: ['utm_source']}).open()
         }
 
         document.getElementById('btn-drawer_right').onclick = function(e) {
           e.preventDefault()
-          makeMockPopup({mode: 'drawer_right', width: 300}).open()
+          makeMockPopup({mode: 'drawer_right', width: 300, transferableUrlParameters: ['utm_source']}).open()
         }
 
         let popoverPopup
@@ -164,6 +164,7 @@
               mode: 'popover',
               width: 400,
               height: 400,
+              transferableUrlParameters: ['utm_source'],
               onReady: popoverReadyCallback
             })
             popoverButton.innerHTML = '...'
@@ -202,6 +203,7 @@
               mode: 'side_panel',
               width: 400,
               height: 400,
+              transferableUrlParameters: ['utm_source'],
               container: sidePanelContainerElement,
               onReady: sidePanelReadyCallback
             })

demo/popup.html

@@ -95,6 +95,7 @@
       href="./form/mock.html#foobar=hello"
       data-mode="popup"
       data-submit-close-delay="4"
+      data-transferable-url-parameters="utm_source"
       target="_blank"
     >
       Launch me as a popup!
@@ -107,6 +108,7 @@
       href="./form/mock.html?foobar=hello"
       data-mode="drawer_left"
       data-submit-close-delay="4"
+      data-transferable-url-parameters="utm_source"
       target="_blank"
     >
       Launch me as a drawer!
@@ -119,6 +121,7 @@
       data-mode="drawer_right"
       data-width="400"
       data-submit-close-delay="4"
+      data-transferable-url-parameters="utm_source"
       target="_blank"
     >
       Launch me as a right drawer!
@@ -134,6 +137,7 @@
       data-width="500"
       data-height="600"
       data-submit-close-delay="4"
+      data-transferable-url-parameters="utm_source"
       target="_blank"
     >
       <span class="icon">
@@ -155,6 +159,7 @@
         data-width="360"
         data-height="560"
         data-submit-close-delay="4"
+        data-transferable-url-parameters="utm_source"
         target="_blank"
       >
         <span class="icon">

demo/widget-legacy.html

@@ -10,6 +10,7 @@
     <div
       class="typeform-widget"
       data-url="./form/mock.html?foobar=hello"
+      data-transferable-url-parameters="utm_source"
       style="width:100%; height:500px;"
     ></div>
 

demo/widget.html

@@ -10,6 +10,7 @@
     <div
       class="typeform-widget"
       data-url="./form/mock.html#foobar=hello"
+      data-transferable-url-parameters="utm_source"
       style="width:100%; height:500px;"
     ></div>
 

e2e/spec/functional/popup.spec.js

@@ -17,8 +17,8 @@ const popupModes = {
 }
 
 const pages = {
-  '/popup.html': 'embed code',
-  '/popup-api.html': 'API'
+  '/popup.html?utm_source=facebook  ': 'embed code',
+  '/popup-api.html?utm_source=facebook': 'API'
 }
 
 Object.keys(popupModes).forEach(popupMode => {
@@ -35,6 +35,10 @@ Object.keys(popupModes).forEach(popupMode => {
             cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /foobar=hello/)
           })
 
+          it('Passes Browser URL parameters', () => {
+            cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /utm_source=facebook/)
+          })
+
           it('Closes Embed Popup clicking on the close button', () => {
             if (popupMode === 'popover' || popupMode === 'side_panel') {
               closePopupViaButton(`#btn-${popupMode}`) // no close button, popup closes via the button that opened it

e2e/spec/functional/widget.spec.js

@@ -10,7 +10,7 @@ describe('Embed Widget in div with position:absolute on mobile', () => {
 describe('Basic Embed Widget', () => {
   describe('On Desktop', () => {
     before(() => {
-      open('/widget.html')
+      open('/widget.html?utm_source=facebook')
     })
 
     it('Loads correctly the basic embed widget', () => {
@@ -20,11 +20,15 @@ describe('Basic Embed Widget', () => {
     it('Passes hidden field parameter', () => {
       cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /foobar=hello/)
     })
+
+    it('Passes Browser URL parameters', () => {
+      cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /utm_source=facebook/)
+    })
   })
 
   describe('On Mobile', () => {
     before(() => {
-      openOnMobile('/widget.html')
+      openOnMobile('/widget.html?utm_source=facebook')
     })
 
     it('Loads correctly the basic embed widget', () => {
@@ -34,13 +38,17 @@ describe('Basic Embed Widget', () => {
     it('Passes hidden field parameter', () => {
       cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /foobar=hello/)
     })
+
+    it('Passes Browser URL parameters', () => {
+      cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /utm_source=facebook/)
+    })
   })
 })
 
 describe('Basic Embed Widget with Legacy Hidden Fields', () => {
   describe('On Desktop', () => {
     before(() => {
-      open('/widget-legacy.html')
+      open('/widget-legacy.html?utm_source=facebook')
     })
 
     it('Loads correctly the basic embed widget', () => {
@@ -50,11 +58,15 @@ describe('Basic Embed Widget with Legacy Hidden Fields', () => {
     it('Passes hidden field parameter', () => {
       cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /foobar=hello/)
     })
+
+    it('Passes Browser URL parameters', () => {
+      cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /utm_source=facebook/)
+    })
   })
 
   describe('On Mobile', () => {
     before(() => {
-      openOnMobile('/widget-legacy.html')
+      openOnMobile('/widget-legacy.html?utm_source=facebook')
     })
 
     it('Loads correctly the basic embed widget', () => {
@@ -64,6 +76,10 @@ describe('Basic Embed Widget with Legacy Hidden Fields', () => {
     it('Passes hidden field parameter', () => {
       cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /foobar=hello/)
     })
+
+    it('Passes Browser URL parameters', () => {
+      cy.get(IFRAME_SELECTOR).should('have.attr', 'src').and('match', /utm_source=facebook/)
+    })
   })
 })
 

src/core/make-popup.js

@@ -7,6 +7,9 @@ import {
   ensureMetaViewport,
   noop
 } from './utils'
+import {
+  transferUrlParametersToQueryStrings
+} from './utils/url-parameters-transfer'
 import randomString from './utils/random-string'
 import {
   isMobile,
@@ -45,6 +48,7 @@ const buildOptions = (embedId, options) => {
     hideHeaders: false,
     hideScrollbars: false,
     disableTracking: false,
+    transferableUrlParameters: options.transferableUrlParameters || [],
     onSubmit: noop,
     open: null,
     openValue: null,
@@ -72,9 +76,12 @@ const renderComponent = (params, options) => {
     onSubmit
   } = options
 
+  let queryStrings = replaceExistingKeys(options, queryStringKeys)
+  queryStrings = transferUrlParametersToQueryStrings(options.transferableUrlParameters, queryStrings)
+
   const urlWithQueryString = appendParamsToUrl(
     url,
-    replaceExistingKeys(options, queryStringKeys)
+    queryStrings
   )
 
   if (!isMobile(navigator.userAgent) && isScreenBig()) {

src/core/make-widget.js

@@ -7,6 +7,9 @@ import {
   noop,
   omit
 } from './utils'
+import {
+  transferUrlParametersToQueryStrings
+} from './utils/url-parameters-transfer'
 import {
   isMobile
 } from './utils/mobile-detection'
@@ -19,6 +22,7 @@ const defaultOptions = {
   hideHeaders: false,
   hideScrollbars: false,
   disableTracking: false,
+  transferableUrlParameters: [],
   onSubmit: noop
 }
 
@@ -38,6 +42,7 @@ export default function makeWidget (element, url, options) {
   const enabledFullscreen = isMobile(navigator.userAgent)
 
   let queryStrings = replaceExistingKeys(options, queryStringKeys)
+  queryStrings = transferUrlParametersToQueryStrings(options.transferableUrlParameters, queryStrings)
 
   if (enabledFullscreen) {
     queryStrings = {

src/core/utils/url-parameters-transfer.js

@@ -0,0 +1,23 @@
+const urlSearchToParams = (search) => {
+  var params = {}
+  if (search !== '' && search !== null) {
+    var vars = search.split('&')
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=')
+      params[pair[0]] = decodeURIComponent(pair[1])
+    }
+  }
+  return params
+}
+
+export const transferUrlParametersToQueryStrings = (transferableUrlParameters, queryStrings) => {
+  const urlSearchString = window.location.search.substr(1)
+  const urlSearchParams = urlSearchToParams(urlSearchString)
+  const queryStringsWithTransferedParams = { ...queryStrings }
+  transferableUrlParameters.forEach(transferableParam => {
+    if (!(transferableParam in queryStrings)) {
+      queryStringsWithTransferedParams[transferableParam] = urlSearchParams[transferableParam]
+    }
+  })
+  return queryStringsWithTransferedParams
+}

src/core/utils/url-parameters-transfer.spec.js

@@ -0,0 +1,32 @@
+import { transferUrlParametersToQueryStrings } from './url-parameters-transfer'
+
+describe('transferUrlParametersToQueryStrings', () => {
+  const { location } = window
+
+  beforeAll(() => {
+    delete window.location
+    window.location = { search: '?foo=jason&bar=rachel&utm_medium=cpc&utm_campaign=camp2008&utm_source=instagram&embed-hide-footer=false' }
+  })
+
+  afterAll(() => {
+    window.location = location
+  })
+
+  it('should return ?foo=jason&bar=rachel&utm_medium=cpc&utm_campaign=camp2008&utm_source=instagram&embed-hide-footer=false', () => {
+    expect(window.location.search).toEqual('?foo=jason&bar=rachel&utm_medium=cpc&utm_campaign=camp2008&utm_source=instagram&embed-hide-footer=false')
+  })
+
+  it('transfer the parameters of the URL in the query strings', () => {
+    const urlParameters = ['foo', 'bar']
+    const queryStrings = {}
+    const queryStringWithTransferedUrlParameters = transferUrlParametersToQueryStrings(urlParameters, queryStrings)
+    expect(queryStringWithTransferedUrlParameters).toEqual({ foo: 'jason', bar: 'rachel' })
+  })
+
+  it('does not override existing queryString for embed configuration', () => {
+    const urlParameters = ['foo', 'bar', 'embed-hide-footer']
+    const queryStrings = { 'embed-hide-footer': true }
+    const queryStringWithTransferedUrlParameters = transferUrlParametersToQueryStrings(urlParameters, queryStrings)
+    expect(queryStringWithTransferedUrlParameters).toEqual({ foo: 'jason', bar: 'rachel', 'embed-hide-footer': true })
+  })
+})