IframeApi.js Reference

1 minute to read

The main advantages of the Customer's Canvas IFrame API are:

It is suitable for complex configurations, for example, for multipage products.
It offers flexibility when configuring the Design Editor and print products.
It allows for changing a product configuration at runtime, namely, add or remove surfaces, change mockups, etc.

To use the Customer's Canvas IFrame API, you should link the IframeApi.js script located in ~/Resources/Generated/. In addition, you need to specify a URL leading to the Design Editor instance - either by adding id="CcIframeApiScript" to the script tag or using the IframeApi.editorUrl property. Here is the simplest way to enable 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 more details, you can refer to the quick start example.

IframeApi.js Reference

Was this page helpful?