This is an old documentation. Go to the latest Customer's Canvas docs

Generating Tokens and Loading the Editor

In addition to general configuration parameters responsible for displaying images, you must pass user-specific parameters: the user ID (representing a folder in your Amazon S3 bucket) and a token within the editor's config.

To generate tokens, the Design Editor provides the following endpoint:

GET /api/users/{userId}/getToken

This method accepts the userId=[string] parameter. Here, you must pass a folder in your Amazon S3 bucket.

If successful, the token will appear in the response as follows:

"7FCE96562C0D5CEADDF02A73B4757495"

Now, you can use this token when loading the editor. The following example illustrates how you can generate a token and pass it into the Design Editor.

JavaScript
const userId = "JohnWood";
let response = await fetch(`https://localhost:44500/api/users/${userId}/getToken`, {
    headers: {
        'X-GoogleDriveAPIKey': 'UniqueSecurityKey'
    }
});
            
const token = await response.json();

let product = {
    "surfaces": [{
        "printAreas": [{ "designFile": "invitation" }]
    }]
};

let config = {
    "assetSources": {
        "[source]AmazonS3": {
            "requestParams": {
                "token": token,
                "userId": userId
            }
        }
    }
};

let editor = await CustomersCanvas.IframeApi.loadEditor(
            document.getElementById("editorFrame"), product, config);

See Also

Manual