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="plottowidget" type="text/javascript">
/*** PLOTTO 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
.src="https://panel-response.plotto.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
("plottowidget").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.src
="https://panel-response.plotto.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.plotto.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