Steps

1) Check that the host platform site/page runs on https:// secure protocol

  • https is a must for the video recording protocol

2) Copy the widget script

  • Go to Survey → Distribute → Widget Tab
  • Select: Panel option
  • Button → [Copy to clipboard]

 

3) Paste the script in the destination website/ page

 

<script id="quantilopewidget" type="text/javascript">
/*** QUANTILOPE WIDGET CODE - ONLY modify where specified!!! */
setTimeout(function(){

   var frame = document.createElement("iframe");


 /* START - you can change code starting here */
   frame.frameBorder="0";
   frame.width = "800"; frame.height = "1000";

   frame.allow="camera 'src'; microphone 'src'";

   frame.allow = "camera 'src'; microphone 'src'";
   frame.src="https://panel-response.quantilope.com/landing/56c5a1d2a637b1a13b34dc80/56c5a7e1e3bb632f06253d77";

 

 /* END - do not change below this line */


   /************ DO NOT CHANGE BELOW THIS LINE ************/
   var SEND_RESPONSE_NAME
   var MESSAGE_HANDLERS = {}

   function receiveMessage(event, callback){
 if (event.source === frame.contentWindow){
       var data = event.data
       var name = data.name
       var content = data.content
 var handlers = MESSAGE_HANDLERS[name] || [];
       var result = true;
       handlers.forEach(function(fn){
 if (typeof fn === 'function'){
           if (fn(content) === false){
             result = false
 }
}
       })
 if (result !== false && typeof window[name] === 'function'){
         window[name](content)
 }
}
   }
   function onMessage(name, fn){
     MESSAGE_HANDLERS[name] = MESSAGE_HANDLERS[name] || [];
     MESSAGE_HANDLERS[name].push(fn)
 }
   function sendMessage(message, callback){
     onMessage(message)
     frame.contentWindow.postMessage(message, '*')
   }
   onMessage('createFunction', function(fnName){
     SEND_RESPONSE_NAME = fnName
     var callback
     onMessage(SEND_RESPONSE_NAME, function(content){
       if (typeof callback === 'function'){
         callback(content)
 }
 return false
 })
     window[SEND_RESPONSE_NAME] = function(fn){
       callback = fn
       sendMessage(SEND_RESPONSE_NAME)
 }
     return false
   })
   window.addEventListener('message', receiveMessage)
   document.getElementById("quantilopewidget").parentNode.appendChild(frame)
},0)
</script>

  /************ DO NOT CHANGE ABOVE THIS LINE ************/


4) Modify the script (only this block of code)

   /* START - you can change code starting here */
   frame.frameBorder="0";
   frame.width = "800"; frame.height = "1000";

   frame.allow="camera 'src'; microphone 'src'";

  frame.src="https://panel-response.quantilope.com/landing/56c5a1d2a637b1a13b34dc80/56c5a7e1e3bb632f06253d77";

 /* END - do not change below this line */


5) Append query parameters, at the end of the frame.src 

frame.src="https://panel-resonse.quantilope.com/landin/56....77?Param1=ValueOfParam1&Param2=ValueOfParam2&Param3=ValueOfParam3&...

where Param1, Param2, ... are parameters as described in the next article: See the Widget Parameters article.


6) Test the widget before launching into production