Improved Resize feature
This feature is invite-only.
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:
- Navigate to the Canva Helpdesk(opens in a new tab or window).
- Select Integration support.
- Fill out the required fields.
- 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:
-
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.
-
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
andonArtworkCreate
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.