Copy and paste the code from our Button generator into the exact spot in your HTML where you’d like the button to appear.
Once you've done that, your button is ready to go! Use the attributes listed here to further customize your button.
Please note that the Canva Button is still in beta so there may be changes to the API. When we go out of beta, you'll need to change the URL above from
https://sdk.canva.com/v2/api.js. We'll let you know when it's time to do this with plenty of advance notice.
The code we generate for you will look quite similar to this:
Button can be used in one of two modes, to:
· Create a new design
· Edit an existing design
To customize the behavior of the button you only need to make changes to the HTML
<span> element. Add any combination of the attributes listed below to change what the button does.
In addition to the modes, the look and feel of the button can also be customized. By providing the theme and size of the button, you can adjust the button color theme and size to fit your site.
To create a new design, add any combination of these attributes:
|The type of design you want your users to create. (Either ||One of: |
|Optional. The unit of ||One of: |
|Optional. The height of design, must specify both ||Number. For |
|Optional. The width of design, must specify both ||Number. For |
To edit an existing design, add any combination of these attributes:
|The ID of the existing design you want your user to edit. (Either ||Design ID, a string.|
The following attributes are common to all modes:
|Your unique API key.||A string.|
|Optional. The file type to be used for the exported design.||One of: |
|Optional. The label of the publish button, overriding the default "Publish".||A string.|
|Optional. The form input element that receives the image URL once the user is finished.||An input element name.|
|Optional. The form input element that receives the ID of the design once the user is finished.||An input element name.|
These are the attributes to customize the how the button looks:
|Optional. The color theme of the button.||One of |
|Optional. The size of the button.||One of |
For example, here's how you specify a button that creates a poster design:
Here’s how you specify a button that edits an existing design:
When a user has finished designing in Canva they publish their design and the Canva button automatically passes the relevant data back to your page.
Because you'll probably want to store a reference to their exported design image somewhere in your database, we make it easy to pass that data via a form. All you have to do is tell us what form input you would like the data to be placed into.
If your form looked like this:
You could tell us to place the URL of the exported design image into the input by using this HTML:
The image you get back from the Canva button should be immediately downloaded onto your own server so that it is ultimately served from your application. The reason for storing the image on your own server is that access to the returned image is expected to expire.
The image will be available for download for at least 15 minutes. That said, it’s fine to display the image on the page when it returns, as our demos show.
The design ID you get from the Canva button can be used to edit your design in the future, by setting the
data-design-id. The design ID is a string, no longer than 255 characters.
Just include the callback method name in your Canva Button HTML:
That callback function will receive a design image URL and design ID:
For the best experience with Canva and the Canva Button, we recommend using the most up-to-date version of these browsers:
· Google Chrome
· Mozilla Firefox
· Microsoft Edge
We reserve the right to drop support for certain browsers or their versions at any time. This is a trade-off we make in order to balance supporting the widest possible user base and introducing exciting new features into Canva in a robust way.