Communcation PopUp (iFrame) with unbounce parent page

  • 27 June 2020
  • 1 reply
  • 14 views

Hi

I would like to pass a variable from the popup to the unbounce parent page. Does anybody know how to do this?

Thanks


1 reply

Hey @Ynoooos,

To do this requires quite a bit of coding. You’d need to leverage the Window.postMessage API.

This would also involve handling the message on the host page.

For example, if this message was posted on a button click the setup would look something like this:

<script>
  const  buttonId = "#lp-pom-button-9";
  const  hostDomain = "http://unbouncepages.com/";
 
 document.querySelector(buttonId).onclick =  function () {
   parent.postMessage(JSON.stringify("variable"), hostDomain);
 };
</script>

On the page hosting the popup, code will also need to be added to handle receiving the message.

<script>
  // This will need to be specific to the URL for your popup
  const  popupOrigin = "http://f26e7782694e41398352088f013af031.pages.ubembed.com/";

  // On receiving message from the Convertable set a cookie
  window.onload =  function () {
     function   handleMessage (e) {
       var  eventData = JSON.parse(e.data);

       if (e.origin.includes(popupOrigin)) {
          // Check for the message
          if  (eventData === 'variable') {
             // do whatever you need with the variable
          }
       }
   }

  // Listen for the message from the popup
  window.addEventListener('message', handleMessage);
 }
</script>

Reply