not able to send message from html to wix code and the other way around

Ask the community
,
1

I have tried to codes in Corvid: Working with the HTML Element but i can’t pass a message from the page code to html (iframe) nor from html (iframe) to page code, can you please help if possible or tell me what i did wrong, here is my from from html and js from wix code

iframe HTML :

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script data-augment-config='{ "id": "e83d39f812a0eaf25b81fcd6d671aa2d9a4c803e834ef34cc8d87da24c068fd2", "key": "1c6f1a10156efc13625ce1a290ec9d5da71ac80900de11acd8ef6fd89973d19f" }' src="https://cdn.augment.com/web-sdk/1.2/snippet.js"></script>

<!-- key and id for test -->

  <style>

    #web-viewer-container {

      width: 100vw;

      height: 80vh;

      margin: auto;

    }

    button {

      margin: auto;

      font-size: 20px;

      font-weight: bold;

      line-height: 19.6px;

      padding: 9px 18px;

      border-radius: 21px;

      color: white;

      background-color: #555555;

      border: 1px solid #555555;

      cursor: pointer;

    }



    button:hover {

      background-color: #ed4545;;

    }

  </style>

</head>

<body onload="init()">

  <div id="web-viewer-container">

    <div class="button">

      <button id="web-viewer-button" onclick="displayWebViewer()" style="display: none">View in 3D

      </button>

    </div>

  </div>

</body>

<script type="text/javascript">



  function init () {

    window.onmessage = (event) => {

      if (event.data) {

        console.log("HTML Code Element received a message!");

        insertMessage(event.data);

      }

    }

  }



  function insertMessage(msg) {

    document.getElementById('demo').innerHTML = msg;

    sendReturnMessage("Message from the HTML Component!");

  }



  function sendReturnMessage(msg) {

    window.parent.postMessage(msg, "http://mysite.com");

  }



</script>

</html>

wix code js :

1084×1390 87.6 KB

2

Hello.

I can see that you don’t have elements to display and receive data:

700×220 17.5 KB

Make sure to reference these elements in your code too. Also, you can see from our example that there’s a button_click function used to send data to the page element and yet this is missing in your code.

I would recommend that you start by getting the Wix example to work on your site and build it from there.

Good luck!