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.
The generated code will look like this:
You can customize the appearance and behavior of the Button by adding HTML attributes to the Button's
span elements require the
data-api-key attribute. They also require one of the following attributes:
There's a number of other attributes that can be attached to the Button's
span element. These are listed below. Some of these attributes only apply to Buttons in create mode, while others only apply to Buttons in edit mode. Some attributes apply to Buttons in either mode.
|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.|
These are the attributes to customize how the button looks:
|Optional. The color theme of the button.||One of |
|Optional. The size of the button.||One of |
span element has the
data-design-type attribute, the Button will be in create mode. This means clicking the Button will create a new design.
For example, this is a Button that will create a new design with a type of
span element has the
data-design-id attribute, the Button will be in edit mode. This means clicking the Button will open an existing design with that ID.
For example, this is a Button that will open 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.