---
title: "ISurfaceBinding Interface"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.isurfacebinding.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# ISurfaceBinding Interface

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
A structure specifying which surfaces of the loaded product should be rendered.
  
You can use this structure when defining a [data set](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.idataset.htm.md) for personalization.
 
 - example
     - ```
const data = {
    dataSet: {
        surfacesData: [{
            surfaceBinding: {
                // Render the first product page.
                surfaceIndexes: [0]
            },
            data: [{
                // Personalize the Name field.
                "Name": {
                    text: "Cristopher Bennett",
                    color: "rgb(48, 194, 255)"
                }
            }]
        }]
    }
};
```
 
## Properties
 
### Optional surfaceIndexes
 
surfaceIndexes: number []

An array of surface indexes.
 
### Optional surfaceNames
 
surfaceNames: string []

An array of surface names.