Function: loadEditor()
loadEditor(
editorFrame,product,config?,onFirstLoad?):Promise<Editor>
Loads the web-to-print editor.
Parameters
editorFrame
HTMLIFrameElement
The iframe element to place the editor to.
product
string | string[] | IProductDefinition
The product to load into the editor.
config?
Editor configuration.
onFirstLoad?
() => void
Outdated. A function that handles the first product launch. For details, see Preloader https://customerscanvas.com/dev/editors/iframe-api/customization/preloader.html|Preloader topic.
Returns
An instance of the web-to-print editor.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Customer's Canvas Quick Start Sample Page</title>
<!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
<script
id="CcIframeApiScript"
type="text/javascript"
src="/cc/Resources/Generated/IframeApi.js"
></script>
<!-- Preloading resources of the editor. -->
<script>
CustomersCanvas.IframeApi.preload();
</script>
</head>
<body>
<!-- The iframe to display the editor in. -->
<iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>
<script>
// Initializing a product with only one template - "BusinessCard.psd".
const productDefinition = { surfaces: ["BusinessCard"] };
// Providing the tokenId, which is required in the Secure Mode.
const config = { tokenId: "95c16577-75fe-4145-87ff-c0ba49d1a554" };
// Getting the iframe element to display the editor in.
const iframe = document.getElementById("editorFrame");
// Loading the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, config)
// If an error occurred while loading the editor.
.catch(error => console.error("The editor failed to load with an exception: ", error));
</script>
</html>