# Integrating The Canva Button With Your App ## Introduction The Canva button is a great tool for enabling your customers or users to create amazing designs, beautiful ads, banners, headers and much more to publish back on your site without having to leave your site or app. What's more? It is free and easy to integrate with many popular JavaScript frameworks like React, Vue, Angular, etc. In this article I will be focussing on Canva button API methods and how to use them according to your requirement along with an introduction to some useful features like `uploadMedia()` for image upload and launching the Canva editor with a desired image instead of an empty design using `createDesign()`. I hope this article proves to be an informative read about navigating through Canva! ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1629300329544/Ac-xjVgFj.jpeg) #### Prerequisites: - You have already applied for the Canva button and got your API key or else you can get one for your site or app [here](https://www.canva.com/button). - You have gone through the [Canva button API documentation](https://www.canva.com/button/documentation/js-api/) at least once or else I would highly recommend you to go through it for understanding this article better. #### This article deals with - Loading Canva SDK and initialising Canva button. - Canva button API methods. - Using `createDesign()` to load editor with blank design or desired image. - Using `editDesign()` to load a previously created design. - Using `uploadMedia()` to upload images to your Canva editor. ## The Coding ### 1. Loading Canva SDK and initialising Canva button - You can either load the 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 nowadays most website pages are rendered dynamically via javascript frameworks or libraries like React, Vue, Angular, etc. Enter the following code snipper into your console to continue: ``` // dynamically loading canva button sdk script. (function(document, url) { const script = document.createElement("script"); script.src = url; script.id = "canva-api"; script.onload = function() { // Initialising canva button after script is loaded. (async function() { if (window.Canva && window.Canva.DesignButton) { const api = await window.Canva.DesignButton.initialize({ apiKey: < YOUR - API - KEY > , }); // You have to save the api instance for further use. } })(); }; document.body.appendChild(script); })(document, "https://sdk.canva.com/designbutton/v2/api.js"); ``` > 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:** - 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 which is not the desired result. - The `initialize()` method should not be called multiple times on the same page. Once initialised, the same API instance can call `createDesign()` or `editDesign()` or `uploadMedia()`multiple times. ### 2. Canva button API Methods The Canva button API include three main methods `createDesign()` , `editDesign()` and `uploadMedia()`: - `createDesign()` for creating a fresh design or desired image. - `editDesign()` for launching the Canva editor with previously created design. - `uploadMedia()` for uploading the images into the Canva editor. ### 3. Using `createDesign` to load editor with a blank design or desired image - In the [documentation](https://www.canva.com/button/documentation/js-api/), it’s clearly mentioned that `createDesign()` is used to launch Canva editor with an empty design. Use the following code format to load the Canva editor with an empty template using `createDesign.snippet`: ``` api.createDesign({ design: { type: "Poster", }, onDesignOpen: ({ designId }) => { // Triggered when editor finishes loading and opens a new design. // You can save designId for future use. }, onDesignPublish: ({ exportUrl, designId }) => { // Triggered when design is published to an image. // Save the image to your server as the exportUrl will expire shortly. }, onDesignClose: () => { // Triggered when editor is closed. }, }); ``` - If you want to open the Canva editor with your desired image you can include the desired media in the design object. Given below is the code format to load the Canva editor with the desired image template using `createDesign`: ``` api.createDesign({ design: { type: "Poster", media: { source: image - source - url, altText: //alternative text for image, fileName: //image file name (or) id: // mediaId returned from uploadMedia function. } }, onDesignOpen: ({ designId }) => { // Triggered when editor finishes loading and opens a new design. // You can save designId for future use. }, onDesignPublish: ({ exportUrl, designId }) => { // Triggered when design is published to an image. // Save the image to your server as the exportUrl will expire shortly. }, onDesignClose: () => { // Triggered when editor is closed. }, }); ``` > **Note**: Here are some important considerations: > You can only pass either `id` or (`source`, `altText` and `fileName`) in the media object. 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 the `id` i.e `mediaId` of any previously uploaded image, you can launch the Canva editor with that specific image. ### 4. Using `editDesign` to load a previously created design - We can pass the `designId` that is obtained from the `createDesign()`in the `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 the previously edited state of any image design. Canva will maintain that for us provided we have the `designId`. - The code format to load the Canva editor with a previously edited mage using `editDesign` is given below: ``` api.editDesign({ design: { id: // designId generated from createDesign. }, onDesignOpen: ({ designId }) => { // Triggered when editor finishes loading and opens a new design. // You can save designId for future use. }, onDesignPublish: ({ exportUrl, designId }) => { // Triggered when design is published to an image. // Save the image to your server as the exportUrl will expire shortly. }, onDesignClose: () => { // Triggered when editor is closed. }, }); ``` ### 5. Using `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 the image successfully to the Canva editor. We can use this ID to launch the Canva editor with the image design that is already uploaded as discussed in the `createDesign()` section. The code format to upload an image to Canva editor using `uploadMedia` is given below: ``` api.uploadMedia({ media: { source: //image-source-url, altText: //alternative text for the image, fileName: // file name of the image, }, onMediaUpload({ mediaId }) { // we can save mediaId for further use } }); ``` ## Conclusion The Canva Button is an API that can be integrated with only a few lines of code, making it a low effort integration for product teams to bring design capabilities to their own users by saving them the hassle of switching between platforms to create, upload, and publish the perfect design that suits their site or app. With that being said I would recommend you go through the [Canva button API documentation](https://www.canva.com/button/documentation/js-api/) to explore more features like designs types, dimensions and publish label customisation, etc. Hope you find this article useful. Thanks & Happy Learning !