{"id":26563,"date":"2023-01-25T09:30:53","date_gmt":"2023-01-25T16:30:53","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=26563"},"modified":"2023-07-25T11:31:40","modified_gmt":"2023-07-25T18:31:40","slug":"create-content-using-canva-then-publish-it-to-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create-content-using-canva-then-publish-it-to-cloudinary","title":{"rendered":"Create Content Using Canva then Publish it to Cloudinary"},"content":{"rendered":"\n

Canva<\/a> is an Australian graphic design platform used to create social media graphics, presentations, posters, documents, logos, and other visual content. Over 75 million people use Canva monthly to unlock their creativity and achieve their goals.<\/p>\n\n\n\n

Canva Publish Extension<\/h2>\n\n\n\n

A Canva Publish Extension adds a publish destination to Canva. This destination appears in the Publish<\/strong> menu. Users can use publish extensions to seamlessly bridge the gap between Canva and third-party platforms. <\/p>\n\n\n\n

Cloudinary Canva Publish Extension<\/h2>\n\n\n\n

Creating a Cloudinary Canva Publish Extension allows your designs to be published to a Cloudinary account. Cloudinary provides Programmable Media APIs and Digital Asset Management<\/a> to developers and content managers\u2013 allowing sharing, collaboration, management, and a wide array of creative transformations along with efficient delivery via global CDNs. There are many instances when publishing your Canva creations to a Cloudinary account is useful. For example, if you need to collaborate with website creators and content managers that use Cloudinary as a single source of truth for images and videos – saving the need to download, upload, email, and\/or Slack media files.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Goal<\/h2>\n\n\n\n

In this article you will learn how to create a Canva Publish Extension that allows Canva users to publish their content in Cloudinary and create optimized delivery URLs within Canva. This project implements a set of simple RESTful APIs endpoints based on Canva Publish Extension documentation<\/a>. It uses Express<\/a>, a minimal and flexible Node.js framework that includes a number of HTTP utility methods for quickly using Cloudinary APIs via the Cloudinary Node.js SDK<\/a>. <\/p>\n\n\n\n

This project uses Glitch<\/a> where millions of creators, professionals, and educators build and host dynamic websites. The extension is a private, team-level one. This post is educational in focus and is intended to explain how to customize and extend Cloudinary\u2019s integration with Canva.<\/p>\n\n\n\n

Let’s Get Building<\/h2>\n\n\n\n

Building the app is a two-stage process. First, create the Glitch backend to integrate with Cloudinary. Second, create the Canva app that connects the Canva UI to the Glitch backend via a publish app.<\/p>\n\n\n\n

Stage 1 – Creating the Glitch Project<\/h3>\n\n\n\n

If you don’t already have a Glitch account – sign up, it’s free. <\/p>\n\n\n\n

Once you’re signed up, Remix<\/em><\/strong> our Cloudinary Canva Sample Publish Extension<\/a> project on Glitch to create a copy of an existing project. From there, you can customize the project and make other changes. <\/p>\n\n\n\n

For this integration, you will use your existing Cloudinary account or create a free account<\/a> if you don\u2019t already have one. (For more information on how to open Cloudinary’s Programmable Media<\/strong> account please review our documentation<\/a>.)<\/p>\n\n\n

\n\n<\/iframe>\n<\/div>\n<\/div>\n\n\n

In Glitch, create a .env<\/strong> file with 2 variables: <\/p>\n\n\n\n

CANVA_CLIENT_SECRET<\/strong><\/p>\n\n\n\n

Your app must verify that any incoming HTTP requests originate from Canva. When a request can’t be verified, reject it with a 401 status code. In the second stage, when your Canva app is created, you will <\/a>Generate Client Secret<\/a> and paste it here.<\/p>\n\n\n\n

CLOUDINARY_URL<\/strong><\/p>\n\n\n\n

Setting the CLOUDINARY_URL environment variable<\/a> You can configure the required cloud_name, api_key, and api_secret by defining the CLOUDINARY_URL environment variable. The CLOUDINARY_URL value is available on the Dashboard page of the Cloudinary Console.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can use console.log for debugging purposes.<\/p>\n\n\n\n

How Publish Extensions work<\/h3>\n\n\n\n

Endpoints<\/h4>\n\n\n\n

Canva expects REST API to implement find, get and upload endpoints. We implemented all 3 endpoints in our sample project, plus verification.<\/p>\n\n\n\n