---
title: "Interface: IUserInfo | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IUserInfo/"
---

# Interface: IUserInfo

> A structure containing user data for populating products.

## Remarks

For details, see the [Load User Info](https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html) topic.

## Example

``` js
  // Define your user data.
  let 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.
  let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, configuration);
  ...
  // Populate the product with your user data.
  editor.loadUserInfo(data);
```

## Indexable

> \[`key`: `string`\]: `string` \| [`IBarcodeData`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Barcode.IBarcodeData.md) \| [`ISurfaceUserInfo`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.ISurfaceUserInfo.md)

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. You can also use the `surfaces` object to set values on specific product pages.