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

ISurfaceUserInfo Interface

A structure containing user data for a specific product page.

// Define your user data.
var data = {
    // These text elements apply to the entire product.
    "Name": "Alex Smith",
    "Position": "Manager",
    // This barcode applies to the entire product.
    "ID": {
        "BarcodeFormat": "EAN_8",
        "BarcodeValue": "1234567"
    // This user data applies to single product pages.
    "surfaces": {
        // The content of the "Name" and "Phone" fields applied to the "surface_0" page.
        "surface_0": {
            "Name": "Christopher Bennett",
            "Phone": "18005551255"

// Load the web-to-print editor.
var editor = null;
CustomersCanvas.IframeApi.loadEditor(iframe, product, configuration)
    .then(function (e) {
        editor = e;
// Populate the product with your user data.


[key: string ]: IUserInfo

A dictionary holding the content of design elements. The key is a design element name. The value is a text or barcode date you want to assign to this element.