Downloading designs

The Canva editor has a Publish button. When a user clicks this button and navigates through the publishing workflow, your website can download the user's design as a PNG, JPG, or PDF file.

This page explains a couple of different ways to get the URL of a published design with the HTML API.

On the same page as the Canva Button, create an input element with a unique name attribute:

<input name="exportUrl" />

Then add the data-on-design-publish-input-export-url attribute to the Canva Button's button element:

<button
  data-design-type="Poster"
  data-on-design-publish-input-export-url="exportUrl"
  data-api-key="API KEY GOES HERE"
  class="canva-design-button"
  style="display: none;"
  >Design with Canva</button
>
<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/designbutton/v2/api.js");
</script>

The value of this attribute should be the name of the input element.

When a user publishes their design, Canva inserts the URL of the exported design into the specified field when the user publishes their design. You can use this URL to download the design.

On the same page as the Canva Button, create a JavaScript function that receives an argument:

function onDesignPublish(opts) {
  console.log(opts);
}

Then add the data-on-design-publish attribute to the Canva Button's button element:

<button
  data-design-type="Poster"
  data-on-design-publish="onDesignPublish"
  data-api-key="API KEY GOES HERE"
  class="canva-design-button"
  style="display: none;"
  >Design with Canva</button
>
<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/designbutton/v2/api.js");
</script>

The value of this attribute should be the name of the function.

When a user publishes their design, the Canva Button SDK calls the specified function. You can access the URL of the exported design via the opts.exportUrl parameter:

function onDesignPublish(opts) {
  console.log(opts.exportUrl);
}

You can use this URL to download the design.