Integrate Canva in Your Products via the JS SDK (With Examples)
Canva makes design easy; apart from empowering people that use the main site and mobile apps, Canva offers integrations as well, which adds features including but not limited to the powerful editor and the huge media library to your products.
This blog contains:
- a quick go-through on the integration application process
- two demos.
Step 1: Apply for an integration
Go to canva.com/developers, log in to your Canva account (sign up if you haven’t).
Click the “Your Integrations” tab, the entry point for the application form will be there.
Fill the application form, take a look at the terms and conditions, and then submit the form if nothing concerns you in the terms and conditions.
After the submission, the application will get reviewed by Canva.
Step 2: Config the integration
After the application gets approved, Canva will send us an email.
After we clicked the “Get my API keys!” button from the email, go to the application on the developer portal again; this time, we need to update the referrer domains, which configs allowed referrers for the integration.
Given that I want to test the integration locally and also want to provide small demos on my personal website, I’ll keep the localhost and add “davidguan.me” as one allowed referrer.
Step 3: Integration, the coding part
Canva gives the API reference on the integration’s landing page, the code below can be served via a local server to give the integration a quick try :)
A popup modal might ask us to log in to Canva depending on whether we already log in, the flow needs this step so the design can be linked with the user for later re-editing (demo 2 section includes that part).
Demo 1
Below is the new code that randomly choosing one design type from five (the full set of supported design types can be found on this page), creates the design, and will append the exported image to the page after the design is published.
The live demo to play with.
Demo 2
Sometimes we might want to update the exported image, Canva JavaScript SDK provides API to re-edit the old design (therefore people don’t have to start from scratch for situations like updating rasterized text inside images).
Here is the code that adds new images to the page, and clicking any one of them triggers the modification via re-edit the old design.
The live demo to play with.
That’s all, this blog touched only a small subset of the SDK’s functionality though, for more, please visit its landing page to check out, happy to help if you got any questions 😀
Extra note: the exported image URL the SDK gives will be expired after hours, therefore if we want to provide the exported image to users persistently, better to upload that image to a place that we control (e.g., an Amazon S3 bucket).
