---
title: "IframeApi.js Reference | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/"
---

# 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](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/variables/IframeApi.editorUrl.md) property. Here is the simplest way to enable the IFrame API on your page.

```html
<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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) type and a product to load into the editor. The product should be defined via the [IProductDefinition](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IProductDefinition.md) interface. For details, refer to the [quick start example](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/quick-start/self-hosted-iframe.md).