Useful & hidden features of canva button api.
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
- Loading canva sdk and initialising canva button.
- Canva button api structure.
createDesign()to load editor with blank design or desired image.
editDesign()to load a previously created design.
uploadMedia()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.
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.
initialize() method should not be called multiple times on the same page. Once initialised, the same API instance can call
2. Canva button api structure
The canva button api include three main methods
createDesign()for creating a fresh design.
editDesign()for launching the canva editor with previously created design.
uploadMedia()for uploading the images into the canva editor.
createDesign to load editor with blank design or desired image
- In the documentation it’s clearly mentioned that
createDesign()is used to launch Canva editor with an empty design.
- But if you want to open the canva editor with your desired image you can include media in the design object.
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.
editDesign to load a previously created design
- We can pass the designId that is obtained from
editDesign()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.
uploadMedia to upload images to your canva editor
- We can use the
uploadMedia()to upload images to the canva editor.
onMediaUpload()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
- But their api documentation has no enough focus on some most useful features like using
uploadMedia()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 !