Documentation

Documentation

How do I add the Canva button to my page?

Copy and paste the code from our button builder into the exact spot in your HTML where you’d like the button to appear.

The code we generate for you will look quite similar to this:

<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</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/v1/api.js');</script>

You have to include both the HTML and the JavaScript snippet in your page in order for it to work. Once you’ve done that, your button is ready to go!

How can I customize the Canva button?

To customize the behavior of the button you only need to make changes to the HTML <span> element. Add any combination of these attributes to change what the button does:

AttributeDescriptionValue
data-typeThe type of design you want your users to create.blogTitle, blogGraphic, presentation, storeHeaderSmall, StoreHeaderLarge, adMediumRectangle, adLargeRectangle, adLeaderboard, adWideSkyscraper, facebookAd, facebookCover, twitterHeader, gPlusHeader, twitterPost, facebookPost, facebookApp, pinterest
data-inputThe form input element that receives the image URL once the user is finished.An input element name
data-thumbnailThe img element that will show the thumbnail once the user is finished.An img element id
data-apikeyYour unique API key.A string
data-emailA unique email address that is used to automatically register users. This allows for a seamless onboarding process: if that account exists on Canva they will be asked to login; if it doesn’t exist an account will automatically be created for them.An email address
data-url-callbackA JavaScript callback function that is called once the user is finished.A JavaScript function name

For example, here’s how you specify a button that creates an A4 design:

<data-type="a4" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design with Canva</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:

<form>
<input name="designUrl" />
</form>

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

<span data-type="a4" data-input="designUrl" class="canva-design-button">Design with Canva </span>

It’s also a great idea to show a thumbnail of the design the user just created, so they know what they’re submitting. To automatically show the thumbnail when they’re done, include an empty img tag on your page and reference it in the Canva button HTML:

<form>
<input name="designUrl" />
<img id="designThumbnail" alt="Canva is awesome!" />
</form>
<span data-type="a4" data-input="designUrl" data-thumbnail="designThumbnail" class="canva-design-button">Design with Canva</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. Currently, there are no guarantees to how long the image will be available. That said, it’s fine to display the image on the page when it returns (as our demos show).

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. Just include it in your Canva button HTML:

<span data-type="a4" data-url-callback="designCallback" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design with Canva</span>

That function receives the exported design image URL as an argument, so you can use that to make an AJAX call or perform any other processing you need to do:

function designCallback(imageUrl) {

sendDataViaAjax(imageURL)

...
}