Custom landing page
Canva provides a product catalog to help partners get an integration up and running as quickly as possible. However, not all partners want to use the pre-made catalog. Some prefer to use a custom landing page that better integrates with their existing user experience.
This guide explains how to open the Canva editor via a custom landing page, which eliminates the integration's dependency on the product catalog.
Custom landing pages don't support templates. You can open the Canva editor with a selected product, but not with a template.
Step 1: Provide Canva with the ID of each product
When you use the product catalog, the showCatalog
method provides all of the required data for creating new designs.
When you don't use the product catalog, you need to provide Canva with the ID (such as a SKU) of each product that you'd like to make available to users. For example, a poster product may have the ID "Poster11x17in"
.
You can't define these IDs via the Partnership SDK. You need to request Canva to set them up in the backend.
To raise a request:
- Navigate to the Canva Helpdesk(opens in a new tab or window).
- Select Integration support.
- In the Description field, provide the ID of each product.
If you inspect the SDK's opts
objects, you might find theproductId
or productSizeOptionId
properties. These are internal, volatile properties that are different from the partnerProductId
.
Step 2: Call the createDesign
method
When the product IDs are defined in Canva's backend, call the createDesign
method and pass the product ID via the partnerProductId
property.
(async () => {const api = await Canva.Partnership.initialize({apiKey: "<partner_api_key>",autoAuthToken: "<auto_auth_token>",});api.createDesign({partnerProductId: "Poster11x17in",maxPages: 2,title: "Untitled Design - Poster",designSource: "direct",onBackClick,onArtworkCreate,});})();
This code doesn't depend on the showCatalog
function, which means the product catalog is optional.