<section>

  <!-- JSON Crack iframe embed goes here -->
  <iframe id="jsoncrackEmbed" src="https://jsoncrack.com/widget" width="100%" height="100%"></iframe>

  <!-- Option 1: Communicate with onclick event -->
  <script>
    function sendToEmbed() {
      const jsonCrackEmbed = document.getElementById("jsoncrackEmbed");
      
      const json = JSON.stringify({
        congrats: "You did it!"
      });
      const options = {
        theme: "light", // "light" or "dark"
        direction: "RIGHT", // "UP", "DOWN", "LEFT", "RIGHT"
      };
     
      jsonCrackEmbed.contentWindow.postMessage({
        json,
        options
      }, "*");
    }
  </script>

  <button onclick="sendToEmbed()">SEND TO JSON EMBED</button>
</section>
body {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

button {
  width: 100%;
  height: 50px;
  border-radius: 0;
  background: rgb(161, 60, 194);
  outline: none;
  color: white;
  font-weight: 600;
  border: 2px solid #2F2F2F;
  cursor: pointer;
}

#jsoncrackEmbed {
  flex: 1;
  order: 2;
  border: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.