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:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Print Partnership Example</title>
10
<script src="https://sdk.canva.com/partnership.js"></script>
11
</head>
12
<body></body>
13
</html>
Copied!
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:
1
app.get("/", async (request, response) => {
2
response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
3
});
Copied!
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.
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:
1
<script src="https://sdk.canva.com/partnership.js"></script>
Copied!
To verify that the SDK is loading, log the Canva.Partnership object to the JavaScript Console:
1
console.log(Canva.Partnership);
Copied!
Then refresh the page.

Step 3: Initialize the SDK

To initialize the SDK, call the initialize method:
1
<script type="text/javascript">
2
(async () => {
3
const api = await Canva.Partnership.initialize();
4
})();
5
</script>
Copied!
This method expects an object with an apiKey property. This property must contain the integration's Partner API key:
1
(async () => {
2
const api = await Canva.Partnership.initialize({
3
apiKey: "<%= partnerApiKey %>",
4
});
5
})();
Copied!
<%= 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 or TypeScript to ensure maximum compatibility.

Example

src/views/index.ejs

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Print Partnership Example</title>
10
<script src="https://sdk.canva.com/partnership.js"></script>
11
</head>
12
<body>
13
<script type="text/javascript">
14
(async () => {
15
const api = await Canva.Partnership.initialize({
16
apiKey: "<%= partnerApiKey %>",
17
});
18
})();
19
</script>
20
</body>
21
</html>
Copied!

src/server.js

1
require("dotenv").config();
2
const express = require("express");
3
4
const app = express();
5
6
app.set("views", "./src/views");
7
app.set("view engine", "ejs");
8
9
app.use(express.json());
10
app.use(express.urlencoded({ extended: true }));
11
12
app.get("/", async (request, response) => {
13
response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
14
});
15
16
app.listen(process.env.PORT || 3000);
Copied!
Last modified 4mo ago