Converting Web chat Mashup into iframe tag style

General
, , ,
1

I have converted web chat mashup into irame tag as given below . initially, it gives authentication error in chrome but loads webchat within seconds properly .But in browser console it gives errors “Cannot read property ‘_bIsIframeOnly’ of undefined”.

What is best practice for generating webchat channel in iframe style.

below is the sample code:-

…

Webchat channel mashup code generated by pega
…

<script src ='https://example.com/prweb/app/Appname/?pyActivity=pzIncludeMashupScripts'></script>

<div   

class="display:block;width: 500px;height:700px;"  

data-pega-gadgetname ="PegaGadget" 

data-pega-action ="createNewWork"

data-pega-action-param-classname ="Work-Channel-Chat"

data-pega-action-param-flowname ="pyStartCase"

data-pega-isdeferloaded ="false"

data-pega-applicationname ="Appname"

data-pega-threadname ="STANDARD"

data-pega-resizetype ="fixed"

data-pega-url ="https://example.com/prweb/PRChat/app/Appname/"

data-pega-action-param-parameters ='{"channelId":"botid1234"}' >

--------------------------------------------------------------------------------------------------------------------------------------

iframe style code (this code loads chat on click of button , but gives error in chrome browser console)

.................................................................................................................................................................

<script src ='https://example.com/prweb/app/Appname/?pyActivity=pzIncludeMashupScripts'></script>

<script> function loadGadget() { 

var myIframe=document.getElementById("PegaGadgetIfr");

myIframe.src=myIframe.src+"&channelId=botid1234";

myIframe.style.display = "block";

pega.web.api.doAction(myIframe, "load"); 

}

 </script> 

 <iframe name="PegaGadgetIfr" id="PegaGadgetIfr"  class= "display: none;width: 500px;height:700px;" data-pega-iframe-gadgetname ='PegaGadget' data-pega-resizetype ='fixed'   src="https://example.com/prweb/PRChat/app/Appname/[email protected]&action=createNewWork&isWebMashup=true&sendP3P=y&className=Work-Channel-Chat&flowName=pyStartCase" border="0" frameborder="0"></iframe>

 <button onclick="loadGadget()"> load mashup</button>
2

this happens because of CORs and chrome blocks if you run the htmls directly from local machine, try to deploy in a server it should work well, where as firefox does not have any such restrictions