Useful & hidden features of canva button api.

Integrating canva button in your website.

To keep this article short and to the point I will be focussing on all canva api methods and how to use them according to your requirement and some of the useful features which are not mentioned in the canva button api documentation.

For the basic overview of features like types of designs and dimensions, publish label customisation, etc. you can go through the api documentation.

Before starting this article it is assumed that

1. You have already applied for canva button and got your api key or else you. can get one for your website here.

2. You have gone through the canva button api documentation at-least once or else I would recommend you to do go through that for understanding this article better.

Contents of the article

  1. Loading canva sdk and initialising canva button.
  2. Canva button api structure.
  3. Using to load editor with blank design or desired image.
  4. Using to load a previously created design.
  5. Using to upload images to your canva editor.

1. Loading canva sdk and initialising canva button

You can either load SDK script dynamically or statically depending on how your website or application is built.

But in this article we will follow the dynamic loading approach because now-a-days in most of the websites pages are rendered dynamically via javascript frameworks or libraries like React, Vue, Angular, etc.

Code snippet for loading canva sdk script and initialising canva button to get the api object.

Note: You can save the api instance in the state for further use.

Couple of things to keep in mind while loading and initialising canva button

i. You should avoid loading the sdk script multiple times.

Depending on the library, including it more than once could have undesired effects.

Example: Think of it like this, if you have a script that binds a click event to a button, and you include that script twice, those actions will be ran twice when the button is clicked.

ii. The method should not be called multiple times on the same page. Once initialised, the same API instance can call or or multiple times.

2. Canva button api structure

The canva button api include three main methods , and .

  • for creating a fresh design.
  • for launching the canva editor with previously created design.
  • for uploading the images into the canva editor.

3. Using to load editor with blank design or desired image

  • In the documentation it’s clearly mentioned that is used to launch Canva editor with an empty design.
Code format to load canva editor with empty template using createDesign.
  • But if you want to open the canva editor with your desired image you can include media in the design object.
Code format to load canva editor with desired image template using createDesign.

Note: You can only pass either id or (source, altText and fileName) in the media object and we will discuss about the mediaId later in this article.

  • By providing the source, altText and fileName in the media object the image will be uploaded to canva editor and it will be launched with the same.
  • By providing id i.e mediaId of any previously uploaded image you can launch the canva editor with that specific image.

4. Using to load a previously created design

  • We can pass the designId that is obtained from in the to open the image which is previously designed in the canva in it’s previously designed state.

Note: There is no need to worry about maintaining previously edited state of any image design. Canva will maintain that for us provided we have the designId.

Code format to load canva editor with previously edited mage using editDesign.

5. Using to upload images to your canva editor

  • We can use the to upload images to the canva editor.
  • provides mediaId after uploading image successfully to the canva editor. we can use this id to launch the canva editor with image design that is already uploaded as discussed in the section.
Code format to upload image to canva editor using uploadMedia.

Conclusion

  • Canva button is a great tool for enabling your customers to create amazing designs, without leaving your site and It is easy to integrate with any popular javascript frameworks like React, Vue, Angular, etc.
  • But their api documentation has no enough focus on some most useful features like using for image upload, uploading and launching the canva editor with a desired image instead of empty design. using .
  • So I came up with this article for better understanding on the useful features canva button api provides.

Hope you find this article useful. Thanks & Happy Learning !

Full stack developer, love to code web and mobile apps