Downloading designs

Search…
Downloading designs
Download a published design with the HTML API.
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.
By default, Canva publishes designs as PNG files. You can use the data-editor-file-type attribute to change the file type.
Option 1: Input element
On the same page as the Canva Button, create an input element with a unique name attribute:
1
<input name="exportUrl" />
Copied!
Then add the data-on-design-publish-input-export-url attribute to the Canva Button's button element:
1
<button
2
  data-design-type="Poster"
3
  data-on-design-publish-input-export-url="exportUrl"
4
  data-api-key="API KEY GOES HERE"
5
  class="canva-design-button"
6
  style="display: none;"
7
  >Design with Canva</button
8
>
9
<script>
10
  (function (c, a, n) {
11
    var w = c.createElement(a),
12
      s = c.getElementsByTagName(a)[0];
13
    w.src = n;
14
    s.parentNode.insertBefore(w, s);
15
  })(document, "script", "https://sdk.canva.com/designbutton/v2/api.js");
16
</script>
Copied!
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.
Option 2: JavaScript callbacks
On the same page as the Canva Button, create a JavaScript function that receives an argument:
1
function onDesignPublish(opts) {
2
  console.log(opts);
3
}
Copied!
Then add the data-on-design-publish attribute to the Canva Button's button element:
1
<button
2
  data-design-type="Poster"
3
  data-on-design-publish="onDesignPublish"
4
  data-api-key="API KEY GOES HERE"
5
  class="canva-design-button"
6
  style="display: none;"
7
  >Design with Canva</button
8
>
9
<script>
10
  (function (c, a, n) {
11
    var w = c.createElement(a),
12
      s = c.getElementsByTagName(a)[0];
13
    w.src = n;
14
    s.parentNode.insertBefore(w, s);
15
  })(document, "script", "https://sdk.canva.com/designbutton/v2/api.js");
16
</script>
Copied!
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:
1
function onDesignPublish(opts) {
2
  console.log(opts.exportUrl);
3
}
Copied!
You can use this URL to download the design.
You can also use the data-on-design-publish attribute to get the ID of the user's design.
Last modified 7mo ago
Copy link
Contents
Option 1: Input element
Option 2: JavaScript callbacks