JSFiddle - React, Tailwind, and code Playground

by David Guan

HTML

<h2>HTML API DEMO, data-on-close-callback part</h2>
<span
  id="canvaButton"
  data-type="Poster"
  data-on-publish-callback="publishCallback"
  data-on-close-callback="closeCallback"
  class="canva-design-button"
  data-api-key="z9_NTq3Z4xbaP4iDgfxMwl7_"
>
  Create a Poster
</span>
<img id="imgForUrlCallback"/>
<script>
  window.publishCallback = function (url) {
      document.getElementById('imgForUrlCallback').src = url;
  }

  window.closeCallback = function () {
    console.log('ah, closed');
  }
</script>
<script>
  (function(c,a,n){var w=c.createElement(a),
    s=c.getElementsByTagName(a)[0];w.src=n;
    s.parentNode.insertBefore(w,s);})
    (document,'script','https://sdk.canva.com/v2/beta/api.js');
</script>

CSS

body {
  text-align: center;
  margin: 50px;
  font-size: 30px;
}

img {
  max-width: 300px;
}