Initialize the Partnership SDK

The Partnership SDK is a JavaScript library for developing the frontend of a Print Partnership integration.

You can use the Partnership SDK to:

Embed Canva's product catalog in a web page.
Embed the Canva editor in a web page.
Control what happens when a user interacts with the catalog or editor.

This part of the tutorial explains how to initialize the Partnership SDK.

Step 1: Render a home page

In the src/views directory, create an index.ejs file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    />
    <title>Print Partnership Example</title>
    <script src="https://sdk.canva.com/partnership.js"></script>
  </head>
  <body></body>
</html>

HTML

This file is the integration's home page.

If you're using the China version of the SDK, replace https://sdk.canva.com/partnership.js with https://sdk.canva.cn/partnership.js.

Next, create a route in the server.js file:

app.get("/", async (request, response) => {
  response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
});

JAVASCRIPT

This route should:

Render the "index" template when users visit the root path.
Pass the Partner API key into the template.

With this code in place, http://localhost:3000⁠(opens in a new tab or window) renders an empty page.

The Partner API key is not a sensitive value. Even so, load it via an environment variable to make it easier to switch between test and production credentials.

Step 2: Embed the Partnership SDK

In the index.ejs file, copy the following code before the closing body tag:

<script src="https://sdk.canva.com/partnership.js"></script>

HTML

To verify that the SDK is loading, log the Canva.Partnership object to the JavaScript Console:

console.log(Canva.Partnership);

JAVASCRIPT

Then refresh the page.

Step 3: Initialize the SDK

To initialize the SDK, call the initialize method:

<script type="text/javascript">
  (async () => {
    const api = await Canva.Partnership.initialize();
  })();
</script>

HTML

This method expects an object with an apiKey property. This property must contain the integration's Partner API key:

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<%= partnerApiKey %>",
  });
})();

JAVASCRIPT

<%= partnerApiKey %> is the EJS syntax for outputting a value. In this case, it outputs the value of the partnerApiKey variable that's passed it from the route.

After making this change, refresh the browser and open the JavaScript Console. If there's no errors, the SDK is initialized.

The examples in this documentation use the async/await syntax for asynchronous functions, which isn't supported in all browsers. In a production environment, we recommend using Babel⁠(opens in a new tab or window) or TypeScript⁠(opens in a new tab or window) to ensure maximum compatibility.

Example

src/views/index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    />
    <title>Print Partnership Example</title>
    <script src="https://sdk.canva.com/partnership.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      (async () => {
        const api = await Canva.Partnership.initialize({
          apiKey: "<%= partnerApiKey %>",
        });
      })();
    </script>
  </body>
</html>

HTML

src/server.js

require("dotenv").config();
const express = require("express");

const app = express();

app.set("views", "./src/views");
app.set("view engine", "ejs");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get("/", async (request, response) => {
  response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
});

app.listen(process.env.PORT || 3000);

JAVASCRIPT