How to Embed the Canva Editor on Your Website (Complete Guide)
Canva has become one of the most popular design tools in the world, and many websites now offer users the ability to customize templates directly on their own platform—without leaving the site. If you’ve ever wondered how websites embed the Canva Editor inside a popup or an iframe, you’re not alone.
A growing number of developers, print-on-demand sellers, and design platforms use Canva’s embedded editor to give customers a seamless, built-in design experience. But how exactly does this integration work? And can anyone do it?
This guide breaks down everything you need to know about embedding the Canva Editor on your website.
Can You Really Embed Canva on Your Website?
https://www.canva.com/_partnership/embed
This endpoint allows external websites to launch a Canva editing window directly inside:
- A popup
- A modal
- An iframe
- A custom embedded section
This is exactly how many design tools, POD websites, and marketing platforms allow users to edit templates in a built-in Canva window.
How the Canva Embed Works
When you inspect the code on websites using this feature, you’ll usually see an iframe with a long URL that contains multiple parameters. For example:
https://www.canva.com/_partnership/embed?action=createDesign&type=InstagramPost&fileType=png&supportDesignButtonErrorPage=false&apiMode=button&embed
This URL tells Canva:
- What type of design to create
- How to load the editor
- What file format to export
- Whether it should open full-screen or embedded
- How the user will interact with it
This iframe loads the Canva editor directly inside your own interface.
Why This Feature Is Not Publicly Documented
Here’s the key point most people don’t know:
That means:
- Not all features are guaranteed to work for everyone
- Canva may limit access
- Some parameters may only work for approved partners
- Full integration may require a business agreement with Canva
Still, many users successfully embed the editor using the same structure found in existing websites.
How to Embed the Canva Editor in Your Website
Here is the simplest, developer-friendly method to embed the Canva editor using an iframe.
Step 1: Use the Canva Embed URL
Start with this base URL:
https://www.canva.com/_partnership/embed
Then add parameters like:
- action=createDesign
- type=InstagramPost
- fileType=png
- embed=true
- apiMode=button
Example iframe:
<iframesrc="https://www.canva.com/_partnership/embed?action=createDesign&type=InstagramPost&fileType=png&embed"width="100%"height="800"style="border:0; overflow:hidden;"allowfullscreen></iframe>
This will open a full Canva editor inside your site.
Step 2: Choose the Design Type
You can change the template size by editing:
&type=InstagramPost
Available types include:
- Poster
- Flyer
- Presentation
- BusinessCard
- Logo
- InstagramPost
- A4Document
- Custom size (using width & height params)
Example:
&type=BusinessCard
Step 3: Load a Template Instead of a Blank Design
If you want users to edit a specific template, add a template ID:
&template=<template-id>
Example:
src="https://www.canva.com/_partnership/embed?action=useTemplate&template=XYZ123"
Step 4: Collect the Finished Design
The default behavior exports the design as a PNG, but you can change the output:
fileType=pngfileType=jpgfileType=pdffileType=pdf_print
Some websites hook into Canva’s "export to URL" flow to save designs automatically.
Can You Use This Without a Canva Partnership?
Technically, yes—many sites simply embed the iframe manually.
But here are the limitations:
- You cannot remove Canva branding
- You cannot customize the toolbar
- You cannot automatically save user files
- You cannot fully integrate authentication
- You cannot unlock white-label functionality
If you want deeper integration, you’ll need to contact Canva for business partnership access.
Example: Embedding Canva in a Popup
To open Canva in a modal popup, wrap the iframe in a popup library (like SweetAlert2, Bootstrap modal, or custom JS).
Example (basic HTML modal):
<div id="canva-modal" style="display:none;"><iframesrc="https://www.canva.com/_partnership/embed?action=createDesign&type=InstagramPost"width="100%"height="700"style="border:0;"></iframe></div>
Then toggle visibility via JavaScript.
Important Notes Before You Embed Canva
Here are a few things you should keep in mind:
✔ Canva can change or remove the embed API anytime
Since this feature isn’t publicly documented, updates may break your code.
✔ Some features may not work without proper authorization
Autosaving, template locking, and white-label features require permission.
✔ You must follow Canva’s terms of use
Embedding Canva doesn’t allow you to resell Canva functionality illegally.
Why Websites Use Canva Embeds
Embedding Canva offers many advantages for businesses:
- Increases user engagement
- Keeps visitors on the website
- Allows customers to customize products
- Enables POD sellers to create design built-in workflows
- Makes template editing seamless
For e-commerce stores and digital tools, this can significantly boost conversions.
Final Thoughts: Yes, You Can Embed the Canva Editor
While Canva doesn't provide public documentation for this feature, the embed mechanism is real—and many websites already use it. By inspecting their code and using Canva’s embed endpoint, you can load the Canva editor inside your own platform using a simple iframe.
However:
- Advanced features require a partnership
- Canva may update the API at any time
- You are limited to what the iframe supports
If you only need a built-in design tool for your users, the iframe method works perfectly. But if you need deeper customization, it’s worth contacting Canva directly for official integration options.
