A Cloud Instance
- 1 minute to read
Cloud instances of Design Editor have the Control Panel already installed.
Opening the Control Panel
To administrate your cloud instance, follow the h.customerscanvas.com link and enter your login and password.
Note
Accounts on h.customerscanvas.com and customerscanvas.com are two different accounts.
Using the Cloud Instance
To integrate the web-to-print editor into your design page, you must use an API URL, which includes the ID of your Design Editor instance. This URL looks as follows: https://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/Generated/IframeApi.js, where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx is your instance ID. You can find the ID here:
The following example displays the editor with the businesscard.psd template loaded into it:
<html>
<head>
<title>Simplest Design Page</title>
<!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
<script id="CcIframeApiScript" type="text/javascript"
src="https://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/Generated/IframeApi.js">
</script>
</head>
<body>
<!-- The iframe to display the editor in. -->
<iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>
<script>
//Initializing the product with only one template - "businesscard.psd".
productDefinition = { surfaces: ["businesscard"] };
//Getting the iframe element to display the editor in.
var iframe = document.getElementById("editorFrame");
var editor = null;
//Loading the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
//If the editor has been successfully loaded.
.then(function (e) {
editor = e;
})
//If there was an error thrown when loading the editor.
.catch(function (error) {
console.error("The editor failed to load with an exception: ", error);
});
</script>
</html>
Just copy this code, paste it into an HTML file, and replace xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx with the identifier of your Design Editor instance. Open the saved file in a browser and the editor should appear. By clicking the Download button, you can get the high-resolution output of your newly-created product.