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.

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 renders an empty page.

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.

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