The Canva editor has a Publish button. When a user clicks this button and navigates through the publishing workflow, your website can use the JavaScript API to download the user's design as an image file.
To detect when a user publishes a design, register the onDesignPublish
callback via the createDesign
or editDesign
methods:
api.createDesign({design: {type: "Poster",},onDesignPublish: (opts) => {console.log(opts.exportUrl);},});
javascript
The onDesignPublish
callback receives an opts.exportUrl
argument. This argument contains the URL of the user's published design. You can use this URL to download the design.
You can control the export format of the user's design by setting the opts.editor.fileType
argument in the createDesign
method:
api.createDesign({design: {type: "Poster",},editor: {fileType: "jpg",},onDesignPublish: (opts) => {console.log(opts.exportUrl);},});
javascript
The default value is png
.
Example
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Canva Button</title><script src="https://sdk.canva.com/designbutton/v2/api.js"></script></head><body><button>Create design</button><script type="text/javascript">(async () => {if (!window.Canva || !window.Canva.DesignButton) {return;}const api = await window.Canva.DesignButton.initialize({apiKey: "API KEY GOES HERE",});const button = document.querySelector("button");button.onclick = () => {api.createDesign({design: {type: "Poster",},onDesignPublish: (opts) => {// Download the user's designwindow.open(opts.exportUrl, "_blank");},});};})();</script></body></html>
markup