IframeApi.js Reference

Use the Customer's Canvas IFrame API for complex configurations, for example, multipage products. You can configure the Design Editor and print products flexibly, and change a product configuration at runtime — add or remove surfaces, change mockups, and more.

To use the Customer's Canvas IFrame API, link the IframeApi.js script located in ~/Resources/Generated/. Also, specify a URL that leads to the Design Editor instance — either add id="CcIframeApiScript" to the script tag or set the IframeApi.editorUrl property. Here is the simplest way to enable the IFrame API on your page.

<head>
    <meta charset="utf-8" />
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
    <script id="CcIframeApiScript" type="text/javascript" src="http://example.com/Resources/Generated/IframeApi.js">
    </script>
</head>

<body>
    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame"></iframe>
</body>

<script>
    ...
    //Loading the editor.
    CustomersCanvas.IframeApi.loadEditor(iframe, ...);
</script>

The key function of the IFrame API is loadEditor. It displays the web-to-print editor in the given IFRAME element, loads the given product to the editor, and configures the editor. The two mandatory parameters here are the IFRAME element of the HTMLIFrameElement type and a product to load into the editor. The product should be defined via the IProductDefinition interface. For details, refer to the quick start example.

Was this page helpful?