Improved Resize feature

Canva has an improved Resize feature that intelligently resizes a user's design after the proofing process. By enabling this feature, partners can upsell or cross-sell products to their customers.

This page explains how to enable the improved Resize feature.

Step 1: Provide Canva with a list of products and dimensions

You can't enable the Resize feature using an API. You must:

• Request Canva to enable the feature.
• Provide a list of products and dimensions to support.

To raise a request:

1. Navigate to the Canva Helpdesk.
2. Select Integration support.
3. Fill out the required fields.
4. Provide a list of products and dimensions for each product to support. Products can support multiple sets of dimensions.

Step 2: Resize a design

Pass the onMultiArtworkCreate callback into the createDesign and editDesign methods:

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    autoAuthToken: "<auto_auth_token>",
    container: document.getElementById("container"),
  });

  const onMultiArtworkCreate = (opts) => {
    console.log(opts);
  };

  const onProductSelect = (opts) => {
    api.createDesign({
      ...opts,
      onMultiArtworkCreate,
    });
  };

  api.showCatalog({
    onProductSelect,
  });
})();

Canva locks the design at this stage. Users can return to editing the design by clicking the pencil icon.

Canva shows the additional products with the resized designs in a separate panel. Users can select one or more products.

After this stage, Canva:

1. Generates a separate artwork for:

   • The product that the user originally selected when creating the design.
   • Each additional product with the resized design that the user selected.

2. Passes information about these artworks into the onMultiArtworkCreate callback, including the design ID of the resized design.

You can access the information about these artworks via the opts.artworks parameter:

const onMultiArtworkCreate = (opts) => {
  opts.artworks.forEach((artwork) => {
    console.log(artwork);
  });
};

Canva doesn't impose any restrictions on how an integration uses this information. Some common use cases include allowing a user to:

• Preview the artworks in different sizes.
• Edit a resized design.

Notes

• If you try to use the onMultiArtworkCreate and onArtworkCreate callbacks at the same time, the SDK shows an error in the JavaScript Console.
• If you use the onArtworkCreate callback while the improved Resize feature is enabled, the SDK shows a warning in the JavaScript Console and Canva generates an artwork only for the design in its original dimensions.