Resize designs with Magic Resize
This feature is in a closed, invite-only beta.
Canva has a Magic 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 Magic Resize feature.

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

You can’t enable the Magic Resize feature via 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:
1
(async () => {
2
const api = await Canva.Partnership.initialize({
3
apiKey: "<partner_api_key>",
4
autoAuthToken: "<auto_auth_token>",
5
container: document.getElementById("container"),
6
});
7
8
const onMultiArtworkCreate = (opts) => {
9
console.log(opts);
10
};
11
12
const onProductSelect = (opts) => {
13
api.createDesign({
14
...opts,
15
onMultiArtworkCreate
16
});
17
};
18
19
api.showCatalog({
20
onProductSelect,
21
});
22
})();
Copied!
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:
1
const onMultiArtworkCreate = (opts) => {
2
opts.artworks.forEach((artwork) => {
3
console.log(artwork);
4
});
5
};
Copied!
Canva doesn’t impose any restrictions on how an integration uses this information. Some common use cases include allowing a user to:

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 Magic 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.
Last modified 2mo ago