---
title: "Populating designs with user info | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/user-info/"
---

# Populating designs with user info

> Imagine your user is customizing a series of different products requiring them to enter the same information into the fields. Filling out each product from scratch is drudgery. Fortunately, Design Editor supports the pre-populating of fields with data loaded from the customer's account. For example, suppose the e-commerce system stores first and last names, phone numbers, and email addresses in user accounts. We can make Design Editor pre-populate these fields in user generated products:

## Load User Info Feature

1.  On demand: enable the **Load my info button** either in **clientConfig.json** globally or through the [IConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) interface for a single product.

    ```json
    "loadUserInfoButtonEnabled": true
    ```

    After that, when the page opens or reloads, the **Load my info button** appears in the user interface.

    ![The Load my info button.](images/WorkingWithUserData.png)

2.  Automatically on product load: enable the `autoLoadUserInfo` feature either in **clientConfig.json** globally or through the [IConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) interface for a single product.

    ```json
    "autoLoadUserInfo": true
    ```

    In this case, when a product is loaded into the editor, it is already populated with data; the **Load my info** button is not displayed in the user interface.

## Populating Products with Predefined Data

The data used to populate a product should be loaded from your e-commerce system and passed to the [loadEditor](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/functions/IframeApi.loadEditor.md) method as a part of the editor configuration.

```js title="Populating Products"
var productDefinition = {
    surfaces: [ "business-card" ]
};

var configuration = {
    autoLoadUserInfo: true,
    userInfo: {
        "FirstName": "Jon",
        "LastName": "Snow",
        "Phone": "0123456789",
        "Email": "jon.snow@example.com",
        "Photo": "https://example.com/jon.snow.jpg",
        "Slogan": "<p><span style='bold:true;color:green'>Only premium printing</span></p><p>always</p>",
        "Barcode": {
            "BarcodeFormat": "QR_CODE",
            "BarcodeSubType": "Url",
            "Url": "https://example.com"
        }
    }
};

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
```

The `userInfo` property accepts data in the JSON format, where keys are layer names (without markers) or in-string placeholder names in PSD templates. For example:

-   If a layer name is `"FirstName<LC>"`, the corresponding key is `"FirstName"`.
-   If a layer contains the `Position: [#Your_Position]` in-string placeholder, the corresponding key is `"Your_Position"`.
-   If a layer is an image placeholder named `<PH>Logo`, the corresponding key is `"Logo"`. Values for images and image placeholders contain details about the image location:

    -   If the target image is stored in the user folder, then the value should contain the `user:` prefix; for example, the following key-value pair `"Logo": "user:myLogo.jpg"` tells the editor to fill the `Logo` image placeholder with the `myLogo.jpg` from the user folder.
    -   If the target image is stored in the public folder, then the value contains the `public:` prefix; for example, the following key-value pair `"Logo": "public:car_logos/ford.jpg"` tells the editor to fill the Logo image placeholder with the ford.jpg logo from the `\car_logos\` subfolder of the public image folder.
    -   If the target image is stored on the Web, then the value should contain either http: or https: protocol name; for example, the following key-value pair `"Logo": "http://example.com/company.svg"` tells the editor to fill the Logo layer with the `company.svg` image by the direct URL.

-   If a layer is a barcode placeholder named `<BPH> Barcode`, the corresponding key is `"Barcode"`. Values for barcode placeholders are objects whose properties depend on the [barcode format](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Barcode.IBarcodeData.md).

For populating a product with predefined data, Design Editor matches layer names and in-string placeholder names against keys passed in the `userInfo` dictionary. If a layer or a placeholder has a match, its value is replaced with a corresponding value from the dictionary.

Note that rich formatted text elements accept data in a special format defining paragraphs through the `<p>` tag and text styles through `<span>`. In the previous example, the `Slogan` layer consists of two paragraphs, and the first paragraph contains the bold green text. For details about paragraph and text formatting, you can refer to the specification of the [Aurigma Graphics Mill](https://www.graphicsmill.com/docs/gm/advanced-formatted-text.htm) library.

## Passing User Data for a Single Product Page

The [previous example](#populating-products-with-predefined-data) illustrates how you can predefine `userInfo` for the entire product. Also, Design Editor allows you to pass user data for a single product page by using the surfaces object. You can refer to a page through its name or index starting from `0`.

```js title="Passing Data to a Single Page"
// Defining a multipage product.
var productDefinition = {
    surfaces: { designFolder: "brochure" }
};

var userInfo = {
    // The default content.
    "Name": "Jon Snow",
    "Phone": "18005551234",
    // The content for specific surfaces (pages).
    "surfaces": {
        // The content for the "surface_0" page.
        "surface_0": {
            "Name": "Christopher Bennett",
            "Phone": "18005551255"
        },
        // The content for the third page.
        "2": {
            "Name": "John Wood",
            "Phone": "18005551011"
        }
    }
};
```

## Passing User Data to the Loaded Editor

:::warning
This method is time-consuming. For optimization, you can populate a product template when it is loading into the Design Editor with [autoLoadUserInfo](#populating-products-with-predefined-data) enabled.
:::

You may want to pass user data to a product at runtime. The [Editor.loadUserInfo()](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor.md#loaduserinfo) method allows you to populate a product template with user data. Pass the `data` dictionary as its parameter to populate the template with the required values. The `data` dictionary has the same structure as `userInfo`. You can also call this method without parameters; in this case it applies the `userInfo` set when the Design Editor has initialized.

```js title="Passing Data at runtime"
...
// Load the web-to-print editor.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration)
.then(function (e) {
    // Retrieve the loaded editor.
    editor = e;
});
...
// Populate the product with user data.
editor.loadUserInfo({"FirstName": "Jon", "LastName": "Snow", "Phone": "0123456789", "Email": "jon.snow@example.com"});
```