Code example

1 minute to read

Let's see how you can display the Design Editor and load a product into it. Using the IFrame API this requires only two steps:

Defining a product through IProductDefinition.
Loading the editor with the product using loadEditor.

The following example loads a double-sided business card into the Design Editor.

<!DOCTYPE html>

<html lang="en">
<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" width="100%" height="800px"></iframe>
</body>

<script>
    //Defining the product.
    productDefinition = {
        //This safety line is applied to all surfaces of the product.
        defaultSafetyLines: [{
            margin: 8.5,
            color: 'rgba(0,255,0,1)',
            altColor: 'rgba(255,255,255,0)',
            stepPx: 5,
            widthPx: 1
        }],
        surfaces: [
            //The first surface - a front side of the business card.
            {
                printAreas: [{ designFile: "BusinessCard2_side1" }]
            },
            //The second surface - a back side of the business card.
            {
                printAreas: [{ designFile: "BusinessCard2_side2" }]
            }]
    };
    //Getting the iframe element to display the editor in.
    var iframe = document.getElementById("editorFrame");
    //Loading the editor.
    var editor = null;
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
        .then(function(e) {editor = e});
</script>
</html>

The IFrame API is in the IframeApi.js script. You can find it in your instance folder by the following path:

~/Resources/Generated/

Note, it is not enough to link the IframeApi.js URL to get it working. You should also specify the URL to your Design Editor instance so that it can make the IFrame API calls properly. In this example, we use the simplest way to do this by adding id="CcIframeApiScript" to the script tag. If for any reason you do not want to add the ID to the script tag, you can configure the URL to the Design Editor instance as follows:

<script> 
    CustomersCanvas = {
        IframeApi: {
            editorUrl: "http://example.com/" 
        }
    }; 
</script>
 
<script type="text/javascript" src="http://example.com/Resources/Generated/IframeApi.js">
</script>

<script>
    // ...
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
</script>

Code example

Was this page helpful?