Canva Button

One simple button to let your customers design a

How do I add the Canva button to my page?

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/beta/api.js to 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:

1
2
3
4
5
6
7
8
<span data-design-type="Poster" data-api-key="YOUR-UNIQUE-API-KEY-HERE"
class="canva-design-button" style="display: none;">Design on Canva</span>
<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/v2/beta/api.js');
</script>

How can I customize the Canva button?

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:

Create-mode attributeDescriptionValue
data-design-typeThe type of design you want your users to create. (Either data-design-type or data-design-id must be provided, using data-design-type and data-design-id at the same time is not allowed.)One of: A4Document, Announcement, BirthdayCard, BirthdayInvitation, BlogBanner, BookCover, Bookmark, Brochure, BusinessCard, Calendar, Card, Certificate, DesktopWallpaper, EmailHeader, EtsyShopCover, EtsyShopIcon, FacebookAd, FacebookAppAd, FacebookCover, FacebookEventCover, FacebookPost, Flyer, GiftCertificate, Infographic, InstagramPost, InstagramStory, Invitation, Invoice, Label, LargeRectangleAd, LeaderboardAd, LessonPlan, Letter, LinkedInBanner, Logo, MagazineCover, MediumRectangleAd, Menu, MindMap, Newsletter, PhotoCollage, PinterestGraphic, Postcard, Poster, Presentation, Presentation43, ProductLabel, RecipeCard, Resume, SnapchatGeofilter, SocialMedia, Ticket, TumblrGraphic, TwitterHeader, TwitterPost, WattpadBookCover, WeddingInvitation, WideSkyscraperAd, Worksheet, Yearbook, YouTubeChannelArt, YouTubeThumbnail
data-design-unitsOptional. The unit of data-design-width and data-design-height, must specify data-design-height and data-design-width when specifying data-design-unitsOne of: px (default), cm, in, mm
data-design-heightOptional. The height of design, must specify both data-design-height and data-design-width, or neitherNumber. For px: 40–5000, for cm: 1.06–134, for mm: 10.6–1340, for in: 0.42–52
data-design-widthOptional. The width of design, must specify both data-design-height and data-design-width, or neitherNumber. For px: 40–5000, for cm: 1.06–134, for mm: 10.6–1340, for in: 0.42–52

To edit an existing design, add any combination of these attributes:

Edit-mode attributeDescriptionValue
data-design-idThe ID of the existing design you want your user to edit. (Either data-design-type or data-design-id must be provided, using data-design-type and data-design-id at the same time is not allowed.)Design ID, a string.

The following attributes are common to all modes:

Common attributeDescriptionValue
data-api-keyYour unique API key.A string.
data-export-file-typeOptional. The file type to be used for the exported design.One of: png (default), pdf, jpeg or jpg.
data-editor-publish-labelOptional. The label of the publish button, overriding the default "Publish".A string.
data-on-publish-url-inputOptional. The form input element that receives the image URL once the user is finished.An input element name.
data-on-publish-id-inputOptional. The form input element that receives the ID of the design once the user is finished.An input element name.
data-on-publish-callbackOptional. A JavaScript callback function that is called once the user is finished. The published design image URL and design ID will be passed to this function.A JavaScript function name.

These are the attributes to customize the how the button looks:

Button attributeDescriptionValue
data-button-themeOptional. The color theme of the button.One of default (default), dark and light.
data-button-sizeOptional. The size of the button.One of large, default (default), small and tiny.

For example, here's how you specify a button that creates a poster design:

1
2
3
<span data-design-type="Poster"
data-api-key="YOUR-UNIQUE-API-KEY-HERE" class="canva-design-button"
style="display: none;">Design on Canva</span>

Here’s how you specify a button that edits an existing design:

1
2
3
<span data-design-id="DESIGN-ID"
data-api-key="YOUR-UNIQUE-API-KEY-HERE" class="canva-design-button"
style="display: none;">Design a poster</span>

What do I do once a user has finished designing?

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:

1
2
3
4
<form>
<input name="designUrl" />
<input name="designId" />
</form>

You could tell us to place the URL of the exported design image into the input by using this HTML:

1
2
3
<span data-design-url-input="designUrl" data-on-publish-id-input="designId"
data-design-type="Poster" data-api-key="YOUR-UNIQUE-API-KEY-HERE"
class="canva-design-button" style="display: none;">Design a poster</span>

What should I do with the image?

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.

What should I do with the ID?

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.

What if I don’t want to use forms and inputs?

You can register a JavaScript callback function that will be executed when the user completes their design. The callback function receives an object containing the exported design image URL and design ID. You can then send this via an AJAX call or perform any other processing you need to do.

Just include the callback method name in your Canva Button HTML:

1
2
3
<span data-design-type="Poster" data-on-publish-callback="designCallback"
data-api-key="YOUR-UNIQUE-API-KEY-HERE" class="canva-design-button"
style="display: none;">Design on Canva</span>

That callback function will receive a design image URL and design ID:

1
2
3
4
5
function designCallback(options) {
var exportUrl = options.exportUrl;
var designId = options.designId;
sendDataViaAjax(exportUrl, designId);
}

Supported Browsers

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
· Safari
· 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.