Register for a free webinar to learn more about the latest version of our software.
  1. Customer's Canvas 6.11.1
  2. APIs
  3. IFrame API
  4. IframeApi Module
This is an old documentation. Go to the latest Customer's Canvas docs

loadEditor Function

Callable

  • Loads 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".
    var productDefinition = { surfaces: ["BusinessCard"] };
    // Providing the tokenId, which is required in the Secure Mode.
    var config = { tokenId: "95c16577-75fe-4145-87ff-c0ba49d1a554" };
    // 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, config)
        // 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>

    Parameters

    • editorFrame: HTMLIFrameElement

      The iframe element to place the editor to.

    • product: string | string [] | IProductDefinition

      The product to load into the editor. You can configure the product through an IProductDefinition instance or construct it from one or more states. For the latter option you need to pass an array of strings (or a single string) that contains product stateIds previously returned by the Editor.finishProductDesign or Editor.saveProduct methods.

    • Optional config: IConfiguration

      Editor configuration.

    • Optional onFirstLoad: function

      Outdated. A function that handles the first product launch. For details, see The Product Loading Screen topic.

        • ( ) : void

        • Returns void

    Returns Promise < Editor >

    An instance of the web-to-print editor.