> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/button/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

**Tip:**
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:

```html
<input name="exportUrl" />
```

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

```jsx
<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.

## Option 2: JavaScript callbacks

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

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

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

```jsx
<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:

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

You can use this URL to download the design.

**Tip:**
You can also use the `data-on-design-publish` attribute to [get the ID of the user's design](https://www.canva.dev/docs/button/html/editing-designs/).