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.

The generated code will look like 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/designbutton/v2/api.js');
</script>

How can I customize the Canva button?

You can customize the appearance and behavior of the Button by adding HTML attributes to the Button's span element.

​All span elements require the data-api-key attribute. They also require one of the following attributes:
· data-design-type
· data-design-id

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.

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-dimensions-unitsOptional. The unit of data-design-dimensions-height and data-design-dimensions-width, must specify data-design-dimensions-height and data-design-dimensions-width when specifying data-design-dimensions-unitsOne of: px (default), cm, in, mm
data-design-dimensions-heightOptional. The height of design, must specify both data-design-dimensions-height and data-design-dimensions-width, or neitherNumber. For px: 40–5000, for cm: 1.06–134, for mm: 10.6–1340, for in: 0.42–52
data-design-dimensions-widthOptional. The width of design, must specify both data-design-dimensions-height and data-design-dimensions-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-editor-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-design-publishOptional. The form input element that receives the ID of the design once the user is finished.A JavaScript function name.
data-on-design-closeOptional. A Javascript callback function that is called once the design is closed. No parameters will be passed to this functionA JavaScript function name.

These are the attributes to customize 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.

If the 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 "Poster":

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>

If the 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:

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="exportUrl" />
<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
4
<span
data-on-design-publish-input-export-url="exportUrl" data-on-design-publish-input-design-id="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-design-publish="onDesignPublishCallback"
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 onDesignPublishCallback(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.