---
title: "Customizing Widgets on a Per-page Basis"
canonical: https://customerscanvas.com/docs/cc6/customizing-widgets.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/).

# Customizing Widgets on a Per-page Basis

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
Customer's Canvas allows for customizing the designer's look and feel in several ways. You can set up:
 
- [A color set](https://customerscanvas.com/docs/cc6/colors.htm.md)
- [A font list mode](https://customerscanvas.com/docs/cc6/custom-fonts.htm.md)
- [An edit mode](https://customerscanvas.com/docs/cc6/simple-and-advanced-designer-modes.htm.md)
- [Toolbars and widgets](https://customerscanvas.com/docs/cc6/customizing-user-interface.htm.md)

All the listed parameters are defined either for an entire web-to-print designer or for a single print product, but there is another way to set up the user interface. You can customize widgets in a different way for different pages.
 
The standard user interface of Customer's Canvas is shown in the following screenshot.
 
![The interface of Customer's Canvas.](https://customerscanvas.com/docs/cc6/images/CustomizingUserInterface01.png)
 
If you open the **Text** menu, you will notice that it contains the **Add text** and **Rich text** commands.
 
![The Text menu.](https://customerscanvas.com/docs/cc6/images/PerSurfaceWidgets1.png)
 
Also, there is the **Background** element in the **Object Inspector**. The following image shows the **Color Picker** with the default palette.
 
![The default color picker.](https://customerscanvas.com/docs/cc6/images/PerSurfaceWidgets2.png)
 
To find out how to set up these widgets for all your products and pages at once, refer to the [Customizing the User Interface](https://customerscanvas.com/docs/cc6/customizing-user-interface.htm.md) example. Furthermore, what if you want your users to add texts and images to some pages, but not to other pages?
 
When you have a number of pages in a product, you can configure the **Color Picker**, the **Object Inspector**, and the **Toolbox** for those pages, using their names. For example, let us configure these widgets for the back side of the business card shown in the previous screenshot:
 
- Enable the **Add text** and **Image** commands in the **Toolbox**.
- Remove the **Background** element from the **Object Inspector**.
- Disable the default palette and define spot colors in the **Color Picker**.

```
product: {
    // Define a product which contains two pages. Their names are "FRONT" and "BACK".
    surfaces: [
        {
            name: "FRONT",
            printAreas: [ 
                { designFile: "Card_FrontSide" }
            ]
        },
        {
            name: "BACK",
            printAreas: [
                { designFile: "Card_BackSide" }
            ]
        }
    ]
};

config: {
    // Set the configuration for the "BACK" page. The "FRONT" page keeps default settings.
    perSurfaceConfiguration: {
        "BACK": {
            widgets: {
                Toolbox: {
                    buttons: ["Text", "Image"]
                },
                ObjectInspector: {
                    bgItemEnabled: false
                },
                ColorPicker: {
                    // Define a list of four spot colors.
                    sections: [{
                        type: "PaletteSection",
                        viewType: "Line",
                        palette: [[
                            "spot(PANTONE 419 CP, cmyk(86%,70%,69%,95%,100%), 1, 100%)",
                            "spot(PANTONE 8783 C, cmyk(100%,55%,0%,55%,100%), 1, 100%)",
                            "spot(PANTONE 7683 C, cmyk(75%,50%,0%,0%,100%), 1, 100%)",
                            "spot(TRUMATCH 21-h, cmyk(0%,0%,0%,0%,100%), 1, 100%)"
                        ]]
                    }]
                }
            }
        }
    }
};

// Load the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, product, config);
```
 
As a result, for the **BACK** page, the editor appears as follows:
 
![The interface of the web-to-print editor.](https://customerscanvas.com/docs/cc6/images/PerSurfaceWidgets3.png)
 
If the widgets are configured both for the editor and for a page, then the page settings override general settings.
 
## See Also
  
### Manual
 
- [Customizing the User Interface](https://customerscanvas.com/docs/cc6/customizing-user-interface.htm.md)
- [Color Picker](https://customerscanvas.com/docs/cc6/colors.htm.md)
- [Custom Fonts](https://customerscanvas.com/docs/cc6/custom-fonts.htm.md)
- [Multipage Products](https://customerscanvas.com/docs/cc6/multipage-products.htm.md)

### IFrame API Reference
 
- [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md)