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.

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:

1. Navigate to the Canva Helpdesk.
2. Select Integration support.
3. In the Description field, provide the ID of each product.

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.